Оформление списков в CSS
В HTML есть два основных типа списков:
<ul>— неупорядоченные списки, в которых элементы отмечены маркерами.<ol>— упорядоченные списки, в которых элементы отмечены цифрами или буквами.
В CSS есть следующие свойства для оформления списков:
list-style-type— задаёт тип маркера.list-style-image— использует изображение в качестве маркера.list-style-position— задаёт положение маркеров.list-style— сокращённая запись для свойств выше.
Стилизация маркеров элементов списка в CSS
Свойство list-style-type задаёт тип маркера для списка.
Примечание: Некоторые значения предназначены для неупорядоченных списков, а другие — для упорядоченных.
Пример
Показаны несколько типов маркеров: circle, disc, square, upper-roman, lower-roman, lower-alpha и decimal.
<style> создайте классы неупорядоченных списков a, b, c со значениями circle, disc, square; и классы упорядоченных списков d, e, f, g со значениями upper-roman, lower-roman, lower-alpha, decimal. Добавьте по одному списку каждого класса с несколькими элементами.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}
ol.d {list-style-type: upper-roman;}
ol.e {list-style-type: lower-roman;}
ol.f {list-style-type: lower-alpha;}
ol.g {list-style-type: decimal;}
</style>
</head>
<body>
<ul class="a"><li>Coffee</li><li>Tea</li><li>Coca-cola</li></ul>
<ul class="b"><li>Coffee</li><li>Tea</li><li>Coca-cola</li></ul>
<ul class="c"><li>Coffee</li><li>Tea</li><li>Coca-cola</li></ul>
<ol class="d"><li>Coffee</li><li>Tea</li><li>Coca-cola</li></ol>
<ol class="e"><li>Coffee</li><li>Tea</li><li>Coca-cola</li></ol>
<ol class="f"><li>Coffee</li><li>Tea</li><li>Coca-cola</li></ol>
<ol class="g"><li>Coffee</li><li>Tea</li><li>Coca-cola</li></ol>
</body>
</html>
Замена маркера элемента списка изображением в CSS
Свойство list-style-image заменяет маркер изображением.
Примечание: Также задайте list-style-type в качестве резервного варианта на случай, если изображение недоступно.
Пример
Маркеры заменены изображением, с square в качестве резервного варианта.
<style> задайте для <ul> свойство list-style-image равным url('sqpurple.gif'), а также list-style-type square в качестве резервного варианта. Добавьте список с несколькими элементами.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul {
list-style-image: url('sqpurple.gif');
list-style-type: square;
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca-cola</li>
</ul>
</body>
</html>
Позиционирование маркеров элементов списка в CSS
Свойство list-style-position задаёт, где располагаются маркеры.
outside (по умолчанию) размещает маркеры за пределами элемента списка, поэтому текст каждого элемента выравнивается по вертикали. inside размещает маркеры внутри элемента списка, так что они становятся частью текста и сдвигают его.
Пример
Один список использует внешние маркеры, а другой — внутренние.
<style> создайте один класс <ul> со значением list-style-position outside (по умолчанию) и один со значением inside. Добавьте каждому списку рамку, чтобы разница в расположении маркеров была заметна. Добавьте по одному списку каждого класса.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul.a {
list-style-position: outside;
border: 1px solid black;
}
ul.b {
list-style-position: inside;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>outside (default)</h2>
<ul class="a"><li>Coffee</li><li>Tea</li><li>Coca-cola</li></ul>
<h2>inside</h2>
<ul class="b"><li>Coffee</li><li>Tea</li><li>Coca-cola</li></ul>
</body>
</html>
Удаление маркеров элементов списка в CSS
Задайте list-style-type: none, чтобы убрать маркеры.
Примечание: У списка есть отступы margin и padding по умолчанию. Чтобы их убрать, добавьте margin: 0 и padding: 0 к <ul> или <ol>.
Пример
Маркеры и отступы по умолчанию убраны из списка.
<style> задайте для <ul> list-style-type none, margin 0 и padding 0. Добавьте список с несколькими элементами.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca-cola</li>
</ul>
</body>
</html>
Сокращённое свойство list-style в CSS
Свойство list-style — это сокращённая запись для задания всех свойств списка в одном объявлении.
Порядок значений: list-style-type, list-style-position, list-style-image. Если значение отсутствует, используется его значение по умолчанию.
Пример
Одна сокращённая запись задаёт тип маркера, позицию и изображение вместе.
<style> задайте для <ul> свойство list-style равным "square inside url('sqpurple.gif')" (тип, позиция, изображение — в этом порядке). Добавьте список с несколькими элементами.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul {
list-style: square inside url("sqpurple.gif");
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca-cola</li>
</ul>
</body>
</html>
Оформление списка цветом в CSS
Списки можно также оформлять цветом, отступами margin и padding, чтобы сделать их более интересными.
Всё, что добавлено к <ol> или <ul>, влияет на весь список, а свойства на <li> — на отдельные элементы.
Пример
Спискам и их элементам заданы разные цвета фона, padding и margin.
<style> задайте <ol> лососевый фон и padding, а <ol> <li> — розоватый фон, тёмно-красный текст, padding и левый margin. Задайте <ul> голубоватый фон и padding, а <ul> <li> — розоватый фон, тёмно-синий текст и margin. Добавьте упорядоченный и неупорядоченный список.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ol {
background: salmon;
padding: 20px;
}
ol li {
background: mistyrose;
color: darkred;
padding: 10px;
margin-left: 20px;
}
ul {
background: powderblue;
padding: 20px;
}
ul li {
background: mistyrose;
color: darkblue;
margin: 5px;
}
</style>
</head>
<body>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Все свойства CSS для списков
Сводка свойств для списков:
list-style— задаёт все свойства списка в одном объявлении.list-style-image— использует изображение в качестве маркера.list-style-position— задаёт положение маркеров.list-style-type— задаёт тип маркера.