Опубликован: 19.03.2007 | Уровень: для всех | Доступ: платный
Лекция 6:

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

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

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

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

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

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

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


x Элемент списка 1
x Элемент списка 2
x Элемент списка 3
Листинг 6.1. Неупорядоченный список

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

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

Таблица 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>
Листинг 6.2. Код для задания типа маркера

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

  • Элемент списка 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>
Листинг 6.4. Встроенная таблица стилей для типов маркеров list-style

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

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

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

<style type="text/css">
  ul {list-style-type:circle; margin-left:20px}
</style>
Листинг 6.5. Выравнивание неупорядоченного списка по полю страницы
Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Владислав Нагорный
Владислав Нагорный

Подскажите, пожалуйста, планируете ли вы возобновление программ высшего образования? Если да, есть ли какие-то примерные сроки?

Спасибо!

Константин Леденев
Константин Леденев
Россия
Олег Равков
Олег Равков
Россия