В этом уроке мы рассмотрим, как применять списки CSS к внешнему виду сайту и поработаем с тремя основными свойствами.
Свойство list-style-type вид маркера
Свойство list-style-position положение маркера
Свойство list-style-image изображение вместо маркера
1) Свойство list-style-type нужно чтоб указать вид маркера которыми можно обозначать список например это могут быть цифры, буквы, кружочки, квадратики. И ещё мы вспомним работу с элементами <ol>></ol> – обозначающий упорядоченный список и <ul> </ul> – обозначающий неупорядоченный список. Смотрите ниже список основных обозначений списка в CSS.
- none – маркер списка отсутсвует
- upper-roman – большие римские цифры: I, II, III
- lower-roman – маленькие римские цифры: i, ii, iii
- decimal – обычные числа: 1,2,3
- upper-alpha – большие буквы: A, B, C
- ower-alpha – малые буквы: a,b,c
- square – закрашенный квадрат
- disk – закрашенный круг
- circle – не закрашенный круг
Пример HTML упорядоченного и неупорядоченного списка на веб странице.
<ol> <li> Первый </li> <li> Второй </li> <li> Третий </li> </ol> <ul> <li> Первый </li> <li> Второй </li> <li> Третий </li> </ul>
Пример содержание файла style.css для свойства list-style-type.
ol {list-style-type:decimal;}
ul {list-style-type:circle;}
Обратите внимание в файле style.css которая показана выше мы указали, что упорядоченный список будет обозначаться обычными числами, а неупорядоченный маркируется в виде не закрашенных кружочков. Теперь смотрите ниже, где показано как это будет выглядеть в браузере.
- Первый
- Второй
- Третий
- Первый
- Второй
- Третий
2) Свойство list-style-position указывает положение маркера в списке работает с двумя элементами, такими как inside – определяющее что маркер будет расположен внутри основного блока и outside – маркер расположен за пределами основного блока списка.
Пример HTML упорядоченного и неупорядоченного списка на веб странице.
<ol> <li> Первый </li> <li> Второй </li> <li> Третий </li> </ol> <ul> <li> Первый </li> <li> Второй </li> <li> Третий </li> </ul>
Пример содержание файла style.css.
ol {
list-style-type:decimal;
list-style-position:inside;
}
ul {
list-style-type:disk;
list-style-position:outside;
}
Посмотрите ниже на скриншоте мы обвели красным границы основного блока для того чтоб нам легче было понять суть работы свойства list-style-position. Мы видим, что нумерация упорядоченного списка отображается обычными числами и находится внутри основного блока, а непорядочная отображается в виде закрашенного круга и находится за пределами границы блока как мы и указали в файле style.css.
3) Свойство list-style-image оно выводит изображение в списке вместо маркера. Обратите внимание, размер картинки имеет значение, оно влияет на вид списка. Ниже смотрите пример списка на веб странице и пример содержания файла style.css.
Пример HTML списка на веб странице.
<ul> <li> Первый </li> <li> Второй </li> <li> Третий </li> </ul>
Пример содержание файла style.css.
ul {list-style-image:url(image/marker.gif);}
Смотрите ниже на результат в браузере вместо маркера у нас выводится изображение.
Теперь вы умеете работать над списками в CSS на сайте, конечно всё это сразу может быть и не понятно, но со временем немного попрактикуетесь и всё станет на свои места.
Источник