Использование специальных стилей

Оформление списков

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

Оформление неупорядоченных списков

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

<ul>
  <li>Элемент списка 1</li>
  <li>Элемент списка 2</li>
  <li>Элемент списка 3</li>
</ul>


x Элемент списка 1
x Элемент списка 2
x Элемент списка 3

Тип маркера можно определять с помощью исключенного атрибута type="disc|circle|square" тега <ul>.

Однако предпочтительнее применять вместо этого атрибута свойства таблиц стилей. Для неупорядоченных списков существует два свойства стиля, которые можно использовать для задания типа символа маркера, который предшествует элементам списка. Эти свойства и их соответствующие значения показаны в таблице 6.1.

list-style-type

disc
circle
square
none

list-style-image

url(url)

Определение символов маркеров

Неупорядоченный список использует свойство list-style-type для вывода в качестве типа маркера окружности. Оформление задается во встроенной таблице стилей для селектора ul.

<style type="text/css">
  ul {list-style-type:circle}
</style>

<ul>
  <li>Элемент списка 1</li>
  <li>Элемент списка 2</li>
  <li>Элемент списка 3</li>
</ul>

Неупорядоченный список с маркером-окружностью:

• Элемент списка 1
• Элемент списка 2
• Элемент списка 3

Конечно, при использовании в таблице стилей простого селектора ul все неупорядоченные списки на странице будут иметь маркеры-окружности. Можно при желании применять селекторы ID, чтобы различным спискам можно было задать различные символы-маркеры. Следующая таблица стилей определяет три таких списка, каждый со своим собственным символом-префиксом.

<style type="text/css">
  ul#List1 {list-style-type:disc}
  ul#List2 {list-style-type:circle}
  ul#List3 {list-style-type:square}
</style>

Определенная структура списка получает тип маркера, задавая соответствующий ID для своего тега <ul>. То есть список, определяемый с помощью тега <ul id="List3">, будет иметь в качестве маркера символ в виде квадрата.

Задание полей для неупорядоченного списка

Обычно неупорядоченные списки имеют отступ от левого поля на фиксированное число пикселей. В некоторых случаях может понадобиться изменить это поведение. Можно включить задание стиля margin-left, чтобы переместить элементы к левому полю (задание поля для списка соответствует заданию поля для его контейнера). В следующем коде эта настройка поля добавляется в селектор ul, чтобы выровнять маркеры по полю страницы в 20 пикселей.

<style type="text/css">
  ul {list-style-type:circle; margin-left:20px}
</style>