Свойства - классификации
Эти свойства классифицируют элементы по категориям, большим, чем при установке специфических визуальных параметров.
Перечень стилей свойств описывает, каким образом сформатированы элементы перечня (т.е. элементы, у которых свойство "показ" ('display') имеет значение 'list-item'). Свойства перечня стилей могут быть установлены для любого элемента, и будут наследоваться в порядке, определенном древом этого перечня. Однако этот эффект будет распространяться только на элементы, у которых свойство "показ" ('display') имеет значение 'list-item'. Для языка
5.6.1 Установка свойства "показ" ('display')
Значение: block | inline | list-item | none По умолчанию: block Область применения: все элементы Наследование: нет Процентное выражение: неопр.
Это свойство описывает, показывается ли элемент на холсте (печатная страница, экран и т.п.) и каким образом.
Элемент со значением 'block' свойства "показ" открывает новое поле. Поле устанавливается относительно смежных полей в соответствии с принципами форматирования CSS. Обычно такие элементы как 'H1' и 'P' относятся к типу "блочные". Значение 'list-item' будет здесь аналогично значению 'block', с той лишь разницей, что добавляется маркер элемента списка. Для HTML это значение обычно имеет элемент 'LI'.
Элемент со значением 'inline' свойства "показ" открывает новое строчное поле в той же самой строке, что и предыдущее содержание. Размеры поля согласуются с размером отформатированного содержания. Если содержание - текст, он может быть разделен на несколько строк, на каждой из которых будет поле. Свойства границы, бордюра и заполнения применяются к строчным ('inline') элементам, но их эффект не будет проявляться в местах переноса строк.
Значение 'none' отменяет показ элемента, включая дочерние элементы и окружающее поле.
P { display: block } EM { display: inline } LI { display: list-item } IMG { display: none }
Последняя строка отключает показ картинок.
По умолчанию свойству "показ" ('display') присваивается значение 'block', но UA обычно присваивает всем элементам HTML значения по умолчанию в соответствии с предлагаемыми спецификацией HTML для соответствующих элементов [2].
Ядро CSS1: UA может игнорировать свойство "показ" и использовать собственные установки по умолчанию. (См. раздел 7).
5.6.2 Установка пробелов ('white-space')
Значение: normal | pre | nowrap По умолчанию: normal Область: блочный элементы Наследование: есть Процентное выражение: неопр.
Это свойство описывает, каким образом внутри элемента поддерживаются пробелы: при значении 'normal' пробелы сжимаются, значение 'pre' действует подобно элементу PRE для HTML, а при значении 'nowrap' перенос производится только с помощью элементов BR:
PRE { white-space: pre } P { white-space: normal }
По умолчанию свойству "пробелы" присваивается значение 'normal', однако UA обычно ставит значения по умолчанию для всех элементов HTML в соответствии с указанным для этих элементов в спецификации HTML [2].
Ядро CSS1: UA может игнорировать свойство "пробелы" в таблице стилей автора или читателя, и использовать взамен собственные значения по умолчанию. (См. раздел 7).
5.6.3 Установка типа маркера перечня ('list-style-type')
Значение: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none По умолчанию: disc Область применения: элементы со значением 'list-item' для свойства 'display' Наследование: есть Процентное выражение: неопр.
Это свойство служит для установки появления маркера перечня, если свойству "рисунок маркера перечня" ('list-style-image') присвоено значение 'none', либо, если изображение, указанное в URL, не может быть отображено.
OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */ OL { list-style-type: lower-alpha } /* a b c d e etc. */ OL { list-style-type: lower-roman } /* i ii iii iv v etc. */
5.6.4 Установка рисунка маркера перечня ('list-style-image').
Значение: <url> | none По умолчанию: none Область применения: элементы со значением 'list-item' для свойства 'display' Наследование: есть Процентное выражение: неопр.
Это свойство определяет изображение, которое должно быть использовано в качестве маркера перечня. В случае недоступности изображения последнее будет заменено маркером, определенным по свойству "тип маркера перечня".
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' будет использоваться в случае недоступности изображения.
