Списки в CSS
Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали, как добавить рамки в CSS. В данной статье я бы хотел рассказать о важной теме — это работа со списками в CSS. Работать со списками приходится постоянно, и поэтому необходимо знать, какие свойства по работе со списками существуют в CSS. Узнать лучше, что такое списки, вы можете из этой статьи. Давайте рассмотрим первое свойство — это внешний вид маркеров.
Создадим файл index.html со следующим содержимым:
<html> <head> <meta charset="utf-8"/> <link href="style.css" rel="stylesheet" type="text/css"/> </head> <body> <ul> <li>1 элемент списка</li> <li>2 элемент списка</li> <li>3 элемент списка</li> <li>4 элемент списка</li> </ul> </body> </html>
Файл style.css будет иметь следующий вид:
ul {
list-style-type: none;
}
Здесь мы задаём правило для тега ul.
Свойство list-style-type как раз и отвечает за внешний вид маркеров. В данном случае мы поставили, чтобы никаких маркеров не было совсем. В данной таблице вы можете посмотреть все виды маркеров, которые бывают. Первые 4 используются постоянно, остальные гораздо реже:
Иногда данных видов маркеров не хватает и хочется загрузить какую-нибудь свою картинку. В данном случае можно воспользоваться свойством list-style-image, значение которого будет путь до картинки:
ul {
list-style-image: url(images/mystyle.png);
}
Внимательно задавайте путь до картинки, в данном случае путь нужно задавать относительно файла style.css (так как мы сейчас работаем с ним).
Свойство list-style-position отвечает за положение маркеров. По умолчанию данное свойство имеет значение outside, т.е. маркеры находятся за границей элементов списка. Их можно внести:
ul {
list-style-type: square;
list-style-position:inside;
}
Чтобы лучше понять данное свойство, вот вам домашнее задание:
Создайте нумерованный список из 4 элементов. Вид маркера: большие римские буквы. Вокруг каждого элемента списка сделайте сплошную рамку в 1px красного цвета. Для позиции маркера сначала задайте значение outside, затем inside. И вы сразу поймёте разницу.
Также имеется краткий вариант записи:
ul {
list-style: square inside;
}
Напоследок расскажу, как сделать так, чтобы список был горизонтальным. Рассмотрим на примере всё того же списка из файла index.html. CSS — правила в данном случае будут примерно такими:
ul li{
display:inline;
padding:4px;
}
Если вы откроете данный файл в браузере, то увидите, что элементы списка выстроились по горизонтали. Данные свойства будут подробно рассмотрены в одной из следующих статей.
В данной статье вы узнали, как работать со списками в CSS.
На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.
