Свойства - классификации           Оглавление Установка свойства "показ" ("display") Установка пробелов ("white-space") Установка типа маркера перечня ("list-style-type") Установка рисунка маркера перечня ("list-style-image") Установка отступа маркера перечня "list-style-position" Установка обобщающего свойства "перечень" ("list-style") Эти свойства классифицируют элементы по категориям, большим, чем при установке специфических визуальных параметров. Перечень стилей свойств описывает, каким образом сформатированы элементы перечня (т.е. элементы, у которых свойство "показ" ("display") имеет значение "list-item"). Свойства перечня стилей могут быть установлены для любого элемента, и будут наследоваться в порядке, определенном древом этого перечня. Однако этот эффект будет распространяться только на элементы, у которых свойство "показ" ("display") имеет значение "list-item". Установка свойства "показ" ("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 для соответствующих элементов. Ядро CSS1: UA может игнорировать свойство "показ" и использовать собственные установки по умолчанию. (См. этот раздел). Установка пробелов ("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 может игнорировать свойство "пробелы" в таблице стилей автора или читателя, и использовать взамен собственные значения по умолчанию. font color=red>(См. раздел 7). Установка типа маркера перечня ("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. */ Установка рисунка маркера перечня ("list-style-image").            Вверх Значение <url> | none По умолчанию none Область применения элементы со значением "list-item" для свойства "display" Наследование есть Процентное выражение неопр. Это свойство определяет изображение, которое должно быть использовано в качестве маркера перечня. В случае недоступности изображения последнее будет заменено маркером, определенным по свойству "тип маркера перечня". UL { list-style-image: url(http://png.com/ellipse.png) } Установка отступа маркера перечня "list-style-position"            Вверх Значение inside | outside По умолчанию outside Область применения элементы со значением "list-item" для свойства "display" Наследование есть Процентное выражение неопр. Значение свойства "отступ маркера перечня" определяет, каким образом маркер перечня будет расположен относительно содержания. Примеры форматирования см. в разделе Установка обобщающего свойства "перечень" ("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" будет использоваться в случае недоступности изображения. <<<  Назад  1  2  3  4  5  6   8  Комментарии к статье  8 8  Обсудить в чате

8  В тему Cвойства CSS Терминология Базовые понятия Псевдо-классы и псевдо-элементы Каскадирование Модель форматирования Единицы измерения значений Совместимость с CSS1