Урок №9: оформление списков в CSS

На этом уроке мы научимся оформлять внешний вид списков с помощью каскадных таблиц стилей. Изменять, удалять маркеры нумерованных и ненумерованных списков и их пунктов. Заменять стандартные маркеры и устанавливать свое изображение в качестве маркера. При изучении HTML, мы уже имели дело со списками - Создание списков в HTML, поэтому перейдем сразу к делу.

---

Изменение и удаление маркеров списка

Для изменения внешнего вида маркера, в CSS используется свойство list-style-type, в значении которого необходимо указать каким маркером нужно заменить стандартный. Для нумерованных списков существуют такие значения:

• upper-alpha - заглавные латинские буквы: A, B, С и т.д
• lower-alpha - строчные латинские буквы: a, b, c и т.д
• upper-roman - большие римские числа: I, II, III и т.д
• lower-roman – маленькие римские числа: i, ii, iii и т.д
• decimal – арабские цифры: 1, и т.д

Для маркированных списков существуют такие значения:

• disk - жирный круг
• circle - не закрашенный круг
• square – квадратный маркер

Удалить маркер можно, использовав значение none, в свойстве list-style-type. Для примера создадим список с разными маркерами и один из них удалим. Используем HTML код со строчной таблицей стилей.

HTML-код	Вид в браузере
<ol> <li> Пункты списка - арабские цифры</li> <li style="list-style-type:square;">Маркер - квадрат </li> <li style="list-style-type:circle;">Маркер - пустой круг /li> <li> Пункт не был изменен, поэтому продолжаются арабские цифры/li> <li style="list-style-type:none;"> Маркер отсутствует/li> <li> И так далее</li> </ol>	Пункты списка - арабские цифры Маркер - квадрат Маркер - пустой круг Пункт не был изменен, поэтому продолжаются арабские цифры Маркер отсутствует И так далее

Таким образом можно в одном списке использовать всевозможные маркеры, без труда заменять и удалять их.

---

Замена маркеров изображениями

К сожалению HTML предлагаем всего три вида маркеров, именно поэтому CSS позволяет использовать в качестве маркеров свои изображения. Задается изображение с помощью свойства - list-style-image, в значении которого необходимо указать путь к изображению. Изображение можно использовать для всего списка или отдельного его пункта. Кстати, размер изображение не будет автоматически подстраиваться под размер списка, поэтому придется редактировать его или искать подходящее по размеру изображение.

HTML-код	Вид в браузере
<ul style="list-style-image:url('/6.gif');"> <li> Мигающий круг</li> <li> Мигающий круг</li> <li style="list-style-image:url(/2.png);"> Стрелочка</li> </ul>	Мигающий круг Мигающий круг Стрелочка

Совсем необязательно встраивать в каждый список style. Если необходимо задать один маркер для всех списков с определенным типом маркера на странице, можно просто в css документе написать ul{list-image:square url('путь к вашему рисунку.gif');}, в этом случае все списке, помечались квадратным маркером, теперь будут помечаться вашим изображением.

---

Положение маркеров

При отображении списков, браузер устанавливает отступ от левой стороны по умолчанию. Если один пункт в списке переносится на следующую строку, то текст выравнивается по верхней строке, как бы оставляя место для маркера. Для управления таким отступом необходимо использовать свойство padding-left, при значении 0 - содержимое списка максимально приблизиться к левой границе, а маркер удалиться.

Позиция маркера в списке задается свойством - list-style-position, которое имеет два значения:

• outside - маркер расположен за границей списка (значение по умолчанию)
• inside - маркер расположен внутри списка и сверху и снизу будет окружен текстом

Рассмотрим это свойства и его значения на примере:

HTML-код

Вид в браузере

<ul style="list-style-position:inside;">  <li> В пунктах данного списка текст в новой строке будет начинаться,<br> окружая маркеры, так как они расположены внутри списка</li> <li> благодаря  значению inside</li> <li style="list-style-position:outside;"> Этот пункт показывает значение списков по умолчанию outside,<br> где маркер вынесен за пределы данного пункта и <br> каждая новая строка выравнивается по предыдущей, оставляя маркер с левой стороны.</li> </ul>

В пунктах данного списка текст в новой строке будет начинаться, окружая маркеры, так как они расположены внутри списка благодаря значению inside Этот пункт показывает значение списков по умолчанию outside, где маркер вынесен за пределы данного пункта и каждая новая строка выравнивается по предыдущей, оставляя маркер с левой стороны.

---

Универсальное свойство

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

Для примера создадим нумерованный список с большими римскими числами (list-style-type:upper-roman) и с положением маркеров внутри списка (list-style-position:inside)

HTML-код	Вид в браузере
<ul style="list-style: upper-roman inside;"> <li> К данному списку с помощью свойства list-style задано два свойства, которые отвечают за оформление списков, значения указаны через пробел  <li> upper-roman - пункты списка нумеруются большими римскими цифрами <li> inside - цифры находятся внутри списка  </ul>	К данному списку с помощью свойства list-style задано два свойства, которые отвечают за оформление списков, значения указаны через пробел upper-roman - пункты списка нумеруются большими римскими цифрами inside - цифры находятся внутри списка

На следующем уроке рассмотри оформление таблиц с помощью CSS: Оформление таблиц