«Единственный способ творить великие дела – это любить то, что ты делаешь»
CSS



Как Вы уже знаете из HTML, существуют нумерованные списки, представленные тегом <ol>, и маркированные списки, представленные тегом <ul>. Каждый пункт в обоих списках обозначается тегом <li>.

Кроме этого в ряде случаев находят применение списки определений, в построении которых участвуют теги <dl>, <dt> и <dd>.

Свойства CSS, которые задают для списков стилевое оформление, применяются к тегам <ol>, <ul>, <li>, <dd> и <dt>.



Маркер списка

Свойство list-style-type устанавливает вид маркера для элементов списка.

Условно значения этого свойства можно разделить на маркеры:

- для нумерованного списка:

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

- и для маркированного списка:

- disk - закрашенный круг,
- circle - не закрашенный круг,
- square – квадрат.

Как видите, маркировка списков в HTML и в CSS одна и та же.

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

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

При значении none маркер списка отсутствует.

Фрагмент кода

<ol>
<li>
Это нумерованный список
<li>
Пункты списка - арабские цифры (значение по умолчанию)
<li style="list-style-type
:square;"> Я выбрал в качестве маркера для третьего пункта списка квадрат
<li>
Четвертый пункт
<li style="list-style-type
:none;"> Пятый пункт списка не обозначен
</ol>

Результат
  1. Это нумерованный список
  2. Пункты списка - арабские цифры (значение по умолчанию)
  3. Я выбрал в качестве маркера для третьего пункта списка квадрат
  4. Четвертый пункт
  5. Пятый пункт списка не обозначен

Маркер - изображение

Свойство list-style-image позволяет задать в качестве маркера для пунктов списка изображение.

В качестве значения свойства list-style-image указывается адрес файла с изображением - абсолютный или относительный путь к файлу (подробнее здесь...). Изображение может являться маркером как для всего списка, так и для его отдельного пункта.

При значении none маркер списка отсутствует.

Фрагмент кода

<p> Моря юга европейской части России: </p>
<ul style="list-style-image
:url(img/Greendaw.gif);">
<li>
Черное море
<li>
Азовское море
<li style="list-style-image
:url(img/Redcross.gif);"> Каспийское море
</ul>

Результат

Моря юга европейской части России:

  • Черное море
  • Азовское море
  • Каспийское море

Позиция маркера

Свойство list-style-position задает положение маркера в списке.

И здесь лишь два варианта: маркер располагается либо за границей списка - значение outside (значение по умолчанию), либо внутри списка при значении inside.

Фрагмент кода

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

Результат
  • В предыдущем примере напротив Каспийского моря стоит крест. Если Вы не знаете почему, то
  • Каспийское море - это озеро.
  • Этот пример иллюстрирует позицию маркера: для всего списка задано внутреннее положение маркера. Исключение составляет данный пункт: как видите маркер вынесен за пределы списка.

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

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

Значения свойств указывают через пробел, в любом порядке. А браузер автоматически определяет принадлежность значения свойству.

Не обязательно указывать значения всех свойств. Не используемым свойствам присваиваются значения по умолчанию.

Фрагмент кода

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

Результат
  • К данному списку с помощью свойства list-style я применил два свойства, отвечающих за оформление списков, указав через пробел только значения свойств.
  • upper-roman - пункты списка обозначены большими римскими цифрами.
  • inside - цифры расположены внутри списка.




CSS по шагам

Тематические публикации

Все cвойства CSS

Тематические публикации