Для списков, о создании которых средствами HTML рассказано здесь, предусмотрены следующие CSS-правила.
list-style-type
Задаёт маркер или нумерацию списков вместо атрибута type в HTML-коде. Значения свойств для маркированных списков могут быть:
- disk — кружок, установлен по умолчанию.
- circle — окружность.
- square — квадрат.
Для нумерованных списков свойству обычно присваиваются значения:
- decimal — арабские цифры, значение установлено по умолчанию.
- lower-roman — маленькие римские цифры.
- upper-roman — заглавные римские цифры.
- lower-alpha — строчные латинские буквы.
- upper-alpha — прописные латинские буквы.
Также для любого типа списка свойству list-style-type можно указать значение none, которое вообще уберёт маркер.
Для нумерованных списков доступны и другие значения, например, cjk-ideographic задаёт идеографическую нумерацию, Armenian — традиционную армянскую, а decimal-leading-zero установит нумерацию римскими цифрами, но с нулём в начале: 01, 02, 03… 09, однако на практике эти и подобные им значения используются крайне редко.
Пример ниже отображает три списка: нумерованный с традиционной армянской нумерацией, маркированный с окружностью и нумерованный, элементы в котором нумеруются идеографически.
Код:
<!DOCTYPE html>
<html>
<head>
<title>Списки CSS</title>
<style>
#spisok1 {
list-style-type: armenian;
}
#spisok2{
list-style-type: circle;
}
#spisok3{
list-style-type: cjk-ideographic;
}
</style>
</head>
<body>
<ol id="spisok1">
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ol>
<ul id="spisok2">
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
<ol id="spisok3">
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ol>
</body>
</html>Результат.
Цвет маркеров совпадает с цветом текста в списке, указанного свойством color.
list-style-image
Позволяет установить в качестве маркера списка собственное изображение. Например, если в папке с содержащей список страницей находится файл marker.png, который вы и хотите использовать, то код оформления будет следующим:
ul { list-style-image: url("marker.png"); }list-style-position
Определяет положение маркера: либо он вынесен за границу элемента списка (list-style-position: outside), либо текст его обтекает (list-style-position: inside).
В примере ниже показана разница между этими значениями. В первом случае маркер внутри списка, во втором случае он вынесен за его пределы.
<!DOCTYPE html>
<html>
<head>
<title>list-style-position</title>
<style>
#spisok1 {
list-style-position: inside;
}
#spisok2 {
list-style-type: outside;
}
</style>
</head>
<body>
<ul id="spisok1">
<li>Вы просто посмотрите, чем отличаются inside от outside.</li>
<li>В случае с inside маркер прямо-таки вписывается в список, не выходя за его пределы и не мешая вёрстке. Текст обтекает его, маркер как бы внутри.</li>
<li>Значение outside выносит маркер за пределы списка.</li>
</ul>
<ul id="spisok2">
<li>Вы просто посмотрите, чем отличаются inside от outside.</li>
<li>В случае с inside маркер прямо-таки вписывается в список, не выходя за его пределы и не мешая вёрстке. Текст обтекает его, маркер как бы внутри.</li>
<li>Значение outside выносит маркер за пределы списка.</li>
</ul>
</body>
</html>В результате создаётся такая страница:
list-style
Позволяет сократить код, записав все три перечисленных свойства одной строкой. Записываются правила через пробел:
ul { list-style: square inside; }Рассмотрим пример страницы с тремя списками. Первый нумеруется цифрами в формате 01, 02, второй маркируется пользовательским рисунком (файл marker.png в папке со страницей), маркер третьего списка отключен.
HTML-код приведён ниже.
<!DOCTYPE html>
<html>
<head>
<title>list-style</title>
<style>
#spisok1 {
list-style: decimal-leading-zero inside;
font-weight: bold;
}
#spisok2{
list-style: outside url("marker.png");
}
#spisok3{
list-style-type: none;
font: oblique small-caps 12pt/1.2 Arial, sans-serif;
}
</style>
</head>
<body>
<ol id="spisok1">
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ol>
<ul id="spisok2">
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
<ol id="spisok3">
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ol>
</body>
</html>Браузер отобразит следующую страницу.
Чтобы редактировать HTML online воспользуйтесь визуальным редактором по ссылке.
Сообщить об ошибке
