voliuf.narod.ru

voliuf.narod.ru

помощь сайту

Основы работы с CSS

Бесплатные учебники по темам

Партнерская программа

1.Общая информация

2.Синтаксис CSS и примеры использования

3.Параметры CSS для фона

4.Параметры текста в CSS

5.Шрифты в CSS

6.Границы в CSS

7.Отступы в СSS

8.Поля в CSS

9.Списки в CSS

10.Размеры элементов в CSS

11.Параметры форматирования в CSS

12.Позиционирование в CSS

13.Псевдо-классы CSS

14.Псевдо-элементы CSS

15.Типы носителей информации в CSS2

Дополнительные материалы
Печать в CSS2
Использование звука в CSS2
Единицы измерения в CSS
Цвета в CSS /* аналогично как в HTML */

Основы работы с CSS

9.Списки в CSS

Параметры списков в CSS позволяют разместить и изменять маркеры элементов списка, задавать изображение в качестве маркера элемента списка.

Примеры:

Этот пример показывает, как задать различные маркеры элементов списка.
<html>
<head>
<style type="text/css">
ol.no {list-style-type: none}
ul.ds {list-style-type: disc}
ol.sqr {list-style-type: square}
ul.crl {list-style-type: circle}
</style>
</head>

<body>
<ol class="no">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>

<ul class="ds">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>

<ol class="sqr">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>

<ul class="crl">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>

</body>

</html>
Этот пример показывает, как задать различные маркеры элементов списка.
<html>
<head>
<style type="text/css">
ul.dec {list-style-type: decimal}
ol.lwrm {list-style-type: lower-roman}
ul.uprm {list-style-type: upper-roman}
ol.lwalph {list-style-type: lower-alpha}
ul.upalph {list-style-type: upper-alpha}
</style>
</head>

<body>

<ol class="lwalph">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>

<ul class="upalph">
<li>Первый элемент</li>
<li>Чай</li>
<li>Третий элемент</li>
</ul>

<ol class="lwrm">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>

<ul class="uprm">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>

<ul class="dec">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>

</body>

</html>
Этот пример показывает, как задать изображение в качестве маркера элемента списка.
<html>
<head>
<style type="text/css">
ol
{
list-style-image: url("http://www.intuit.ru/departamen/speciality/image.gif")
}
</style>
</head>

<body>
<ol>
<li>Первый элемент</li>
<li>Второй элемент</li>
</ol>
</body>

</html>
Этот пример показывает, как можно задать расположение маркера элемента списка.
<html>
<head>
<style type="text/css">
ol.in
{
list-style-position: inside
}

ul.out
{
list-style-position: outside
}
</style>
</head>

<body>
<ol class="in">
<li>Это первый элемент списка</li>
<li>Это второй элемент списка</li>
<li>Это третий элемент списка</li>
<pre>Cписок имеет <i><u>list-style-position</u></i> = "<b>inside</b>"</pre>
</ol>

<ul class="out">
<li>Это первый элемент списка</li>
<li>Это второй элемент списка</li>
<li>Это третий элемент списка</li>
</ul>
<pre>Список имеет <i><u>list-style-position</u></i> = "<b>outside</b>"</pre>
</body>
</html>
Пример показывает, как задать все параметры списка в одном объявлении.
<html>
<head>
<style type="text/css">
ol
{
list-style: disc outside url("http://www.intuit.ru/departament/speciality/image.gif")
}
</style>
</head>

<body>
<ol>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ol>
</body>

</html>

Параметры списков в CSS

Как было отмечено выше, параметры списков в CSS позволяют разместить и изменять маркеры элементов списка, задавать изображение в качестве маркера элемента списка.

Поддерживаются следующими браузерами: Internet Explorer, Firefox, Netscape.

Параметр	Описание	Значения	IE	F	N	W3C
list-style	Параметр для задания всех характеристик списка в одном объявлении	list-style-type	4	1	6	1
		list-style-position
		list-style-image
list-style-image	Задает изображение в качестве маркера элемента списка	none	4	1	6	1
list-style-image	Задает изображение в качестве маркера элемента списка	url	4	1	6	1
list-style-position	Задает размещение в списке маркера элемента списка	inside	4	1	6	1
list-style-position	Задает размещение в списке маркера элемента списка	outside	4	1	6	1
list-style-type	Задает тип маркера элемента списка	none	4	1	4	1
		disc
		circle
		square
		decimal
		decimal-leading-zero
		lower-roman
		upper-roman
		lower-alpha
		upper-alpha
		lower-greek
		lower-latin
		upper-latin
		hebrew
		armenian
		georgian
		cjk-ideographic
		hiragana
		katakana
		hiragana-iroha
		katakana-iroha
marker-offset		auto		1	7	2
marker-offset		length		1	7	2

Списки в CSS: подробное рассмотрение

Параметр 'list-style'

Данный параметр определяет все характеристики списка в одном объявлении.

Наследование:да.

Может принимать следующие значения:

Значение	Описание
list-style	Задает характеристики списка
list-style-type
list-style-position
list-style-image

Примеры:

ol
{
list-style: square inside url("www.intuit.ru/departament/image.gif")
}

ul
{
list-style: circle inside
}

Параметр 'list-style-image'

Данный параметр позволяет заменить маркер элемента списка указанным изображением. Необходимо определять параметр "list-style-type" на тот случай, если изображение будет недоступно.

Наследование:да.

Может принимать следующие значения:

Значение	Описание
url	Путь доступа к изображению
None	Изображение не выводится

Пример:

ul
{
list-style-image: url("www.intuit.ru/speciality/image.gif");
list-style-type: square
}

Параметр 'list-style-position'

Параметр определяет способ размещения маркера элемента списка.

Наследование:да.

Может принимать следующие значения:

Значение	Описание
inside	Маркер смещен внутрь текста
outside	Маркер располагается слева от текста

Пример:

ul
{
list-style-position: outside
}

Параметр 'list-style-type'

Данный параметр задает тип маркера элемента списка.

Наследование:да.

Может принимать следующие значения:

Значение	Описание
none	Без маркера
disc	Маркер — закрашенный круг
circle	Маркер — окружность
square	Маркер — закрашенный квадрат
decimal	Маркер — число
decimal-leading-zero	Маркер — число с добавленным ведущим нулем (01, 02, 03 b и т.д.)
lower-roman	Маркер — римские цифры, представленные строчными буквами (i, ii, iii, iv, v и т.д. )
upper-roman	Маркер — римске цифры, представленные прописными буквами (I, II, III, IV, V и т.д.)
lower-alpha	Маркер — латинские строчные буквы (a, b, c, d, e и т.д.)
upper-alpha	Маркер —- латинские прописные буквы (A, B, C, D, E и т.д.)
lower-greek	Маркер — греческие прописные буквы (альфа, бета, гамма и т.д.)
lower-latin	Маркер — латинские строчные буквы (a, b, c, d, e и т.д.)
upper-latin	Маркер — латинские прописные буквы (A, B, C, D, E и т.д.)
hebrew	Традиционная еврейская нумерация
armenian	Традиционная армянская нумерация
georgian	Традиционная грузинская нумерация (an, ban, gan, и т.д.)
cjk-ideographic	Маркер — простые идеографические числа
hiragana	Маркер — a, i, u, e, o, ka, ki, и т.д.
katakana	Маркер — A, I, U, E, O, KA, KI и т.д.
hiragana-iroha	Маркер — i, ro, ha, ni, ho, he, to и т.д.
katakana-iroha	Маркер — I, RO, HA, NI, HO, HE, TO и т.д.

Примеры:

ol
{
list-style-type: circle
}

ul
{
list-style-type: decimal
}

источник: http://www.INTUIT.ru

13 центов(0,13$) за клик, выплаты через WebMoney каждый вторник +10% с рефералов

Мы выкупаем 100% трафа! $12 за 1000 хостов (РФ), и до $4 за 1000 хостов (зарубежный траф) + 10% с дохода Ваших рефералов!
Выплаты через WebMoney

~80-100$ за1000 хостов 2.5$ за 1 смс.
реф. процент - 10 %Выплаты происходят раз в неделю, в четверг на WebMoney

____________________________

Посмотреть порно видео в онлайне »

_______________________________

Сайт управляется системой uCoz