Далее на странице...
Как Вы уже знаете из HTML, существуют нумерованные списки, представленные тегом , и маркированные списки, представленные тегом . Каждый пункт в обоих списках обозначается тегом .
Кроме этого в ряде случаев находят применение списки определений, в построении которых участвуют теги , и .
Свойства CSS, которые задают для списков стилевое оформление, применяются к тегам , , , и .
Маркер списка
Свойство 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>
- Это нумерованный список
- Пункты списка - арабские цифры (значение по умолчанию)
- Я выбрал в качестве маркера для третьего пункта списка квадрат
- Четвертый пункт
- Пятый пункт списка не обозначен
Маркер - изображение
Свойство 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 - цифры расположены внутри списка.
