Шаг 27 - CSS: Классифицирующие параметры

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

Первым из таких параметров являлется display. Он описывает то, как будет отображаться этот элемент на дисплее, принтере и т.д. Имеет четыре стандартных значения: block, inline, list-item, none. По умолчанию принимается равным block. Это значение говорит о том, что при создании этого элемента надо начать новый блок для отображения. Значение inline предназначается для элементов, которым не требуется новый блок. К таким элементам можно отнести все элементы html управляющие отображением текста, например: <b>, <i>, <font> и т.д.

Значение list-item практически аналогично block, но при этом перед блоком отобржается признак того, что этот блок является элементом списка, например таким признаком может быть точка или номер этого элемента. Значение none выключает для данного элемента отображение, и отображение других внутренних элементов. Пример:

pre { display: block }
strong { display: inline }
li { display: list-item }
img { display: none } 

Второй параметр white-space отвечает за преобразование пробелов в тексте. Имеет три значения: normal, pre, nowrap. Как Вы уже догадываетесь первое значение не делает никакого преобразования над пробелами, т.е. отображает их как обычно - один пробел значимый, остальные игнорируются. Значение pre заставляет браузер выводить текст так же как элемент <pre>, т.е. выводить все пробелы. А значение nowrap работает также как элемент <nowrap> запрещающий перенос перенос содержимого на другую строку. В данном случае принудительный перенос осуществляет тег <br>.

Мы говорили о том, что Вы можете определить блок как элемент списка. Обозначение этого элемента списка задается параметром list-style-type. Значения этого параметра следующие: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none. Думаю объяснять каждое значение этого параметра излишне, если есть с этим какие-то проблемы, то посмотрите описание тега <ol>. Пример:

OL { list-style-type: decimal } /* 1 2 3 4 5 ... */
OL { list-style-type: lower-alpha } /* a b c d e ... */
OL { list-style-type: lower-roman } /* i ii iii iv ... */    
Вот этот параметр видимо будет наиболее радостным для всех оформителей страниц. Это параметр list-style-image, который задает в качестве маркера элемента списка изображение. Помните наверно, как для каждого такого элемента приходилось использовать огромнейший тег <img ...>. Теперь же это будет намного короче и приятнее. Адрес изображения задается в формате url(адрес), как и все адреса в CSS :-)
  UL { list-style-image: url(http://www.your.com/dot.gif) } 
Параметр list-style-position позволит Вам управлять выносом маркера элемента списка. Если Вы будете использовать значение inside, то маркер будет отображаться вместе с текстом, а если outside, то содержимое списка будет выноситься за пределы маркера с отступом.

И как всегда под конец параметр, который задает все параметры списка разом :-) Зовется он list-style и задает значения параметров list-style-type, list-style-image и list-style-position. Пример:

UL { list-style: upper-roman inside }
UL UL { list-style: circle outside }
LI.square { list-style: url(http://www.your.com/square.gif)}

Вот вобщем и все. Старайтесь использовать данные параметры только для тегов определяющих тип списка, а не на тег определяющий элемент списка <li>.


Предыдущий Шаг | Следующий Шаг | Оглавление
Автор Кузин Андрей.