Каскадные таблицы стилей, уровень 1.Спецификация CSS1


Свойства - классификации - часть 3


UL { list-style-image: url(http://png.com/ellipse.png) }

5.6.5 Установка отступа маркера перечня 'list-style-position'

Значение: inside | outside По умолчанию: outside Область применения: элементы со значением 'list-item' для свойства 'display' Наследование: есть Процентное выражение: неопр.

Значение свойства "отступ маркера перечня" определяет, каким образом маркер перечня будет расположен относительно содержания. Примеры форматирования см. в разделе 4.1.3.

5.6.6 Установка обобщающего свойства "перечень" ('list-style')

Значение: <keyword> <position> <url> По умолчанию: не определено для обобщающих свойств Область применения: элементы со значением 'list-item' для свойства 'display' Наследование: есть Процентное выражение: неопр.

Это свойство является обобщающим для установки трех свойств: "тип маркера перечня", "рисунок маркера перечня" и "отступ маркера перечня" в одном месте таблицы стилей.

UL { list-style: upper-roman inside } UL UL { list-style: circle outside } LI.square { list-style: square }

Прямое указание значений свойств "перечень" для элементов 'LI' может иметь непредсказуемые результаты. НаПример:

<STYLE TYPE="text/css"> OL.alpha LI { list-style: lower-alpha } UL LI { list-style: disc } </STYLE> <BODY> <OL CLASS=alpha> <LI>level 1 <UL> <LI>level 2 </UL> </OL> </BODY>

Поскольку приоритет установки (как определено в каскаде установок) выше для первой строки таблицы стилей вышеуказанного примера, он отменяет действие второй строки для всех элементов 'LI' и позиции будут маркироваться только строчными буквами в алфавитном порядке. Таким образом, рекомендуется устанавливать значения для обобщающего свойства "перечень" только для элементов перечня:

OL.alpha { list-style: lower-alpha } UL { list-style: disc }

В вышеуказанных примерах свойства "перечень" будут унаследованы элементами 'LI' от элементов 'OL' и 'UL'.

Значение URL можно сочетать с любыми другими значениями:

UL { list-style: url(http://png.com/ellipse.png) disc }

В вышеуказанном примере значение 'disc' будет использоваться в случае недоступности изображения.

| |

 




- Начало -  - Назад -  - Вперед -



Книжный магазин