Продолжаем изучать CSS свойства различных элементов. И в этом уроке пойдет речь об оформлении списков. Списки на практике используются достаточно часто, поэтому эти свойства нужно запомнить.
Обычный вид маркера
И, первое - задать внешний вид маркеров. Маркеры у списков бывают разные. В уроках по HTML Нумерованных списках показывается, как менять маркеры с помощью атрибута type. Но зная CSS данный атрибут больше не нужен, так как все это делается, куда удобней, благодаря таблице стилей CSS.
Для демонстрации давайте создадим список, с использованием CSS. Особо не имеет значения какой нумерованный список или ненумерованный список, так как с помощью свойства list-style-typet мы можем добавить маркеры или удалить их.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML страница</title>
<link href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>
- Ненумерованный список
- Ненумерованный список
- Ненумерованный список
- Ненумерованный список
</body> </html>
И так, обычный список создали, и по умолчанию у него создались маркеры в виде закрашенных кругов. И очень часто возникает вопрос, как убрать маркеры списка?
Убирается маркер у списка с помощью свойства list-style-typet и присваивая ему значение none. Это является самым популярным вариантом по удалению маркеров у списка. И для списка <ul> </ul> зададим то самое свойство.
ul{
list-style-type: none;
}
Теперь если обновить страницу то увидим, что данное свойство убрало маркеры из списка.
Далее давайте рассмотрим существующие виды маркеров. Данные маркеры, как уже упоминалось, могут быть использованы как для нумерованного, так и для ненумерованного списка.
- none - Удаляет маркеры у списка
- circle - Маркер в виде круга
- disc' - Маркер в виде заполненного круга. Значение по умолчанию
- square - Маркер в виде квадрата
- armenian - Армянская нумерация
- decimal - Маркер в виде цифры
- decimal-leading-zero - Цифры с «0» перед началом (01, 02, 03, и т.д.)
- georgian - Грузинская нумерация
- lower-alpha - (а, Ь, с, d, е, и т.д.)
- lower-greek - (alpha, beta, gamma, и т.д.)
- lower-latin - (a, b, с, d, e, и т.д.)
- Iower-roman - (i, ii, iii, iv, v, и т.д.)
- upper-alpha - (А, В, С, D, Е, и т.д.)
- upper-latin - (А, В, С, D, Е, и т.д.)
- upper-roman - (I, II, III, IV, V, и т.Д.)
- inherit - Значение должно быть унаследовано от элемента родителя
Это все вида маркеров для списков. Первые четыре вида самые распространённые, остальные виды применяются достаточно редко.
Ну и для примера давайте выберем и зададим маркер в виде больших римских цифр. Делается это просто: в место значения none ставим название нашего маркера upper-roman.
ul{
list-style-type: upper-roman;
}
Если обновить страницу, то у списков в виде маркеров появились римские большие цифры. Вот таким способом можно менять внешний вид маркеров списков, задавая нужный вид через свойство list-style-type.
Маркер в виде изображения
Второй, достаточно важный момент, и часто используемый маркер - это изображение в виде маркера. Часто нужно использовать маркер в виде красивой картинки и обычные варианты маркеров представленных CSS не подходят. Для этого используется изображения. И делается это с помощью специального свойства, которое называется list-style-image. Это будет указывать браузеру, что маркером у нас будет картинка.
Возьмите любую картинку в интернете размером (15px x 15px), которую планируется использовать в качестве маркера и поместите ее в ранее уже созданную папку с картинками images. После этого, остается свойству list-style-image указать путь к картинке и браузер вместо маркера подставит картинку.
В CSS путь указывается с помощью ключевого слова url(). В скобках указываем путь к картинке ../images/Название картинки.jpg, относительно таблицы стилей.
То есть, что значит относительно таблицы стилей? Наша таблица стилей - файл style.css, лежит в каталоге CSS, а картинка лежит в каталоге images. Это значит, что браузеру нужно указать, что ему сначала нужно выйти из каталога CSS, это делается так: ../, а затем зайти в в каталог с картинкой images и уже затем найти нужную картинку.
ul{
list-style-image: url(../images/Название картинки маркера.jpg);
}
Если вы указали правильный путь к картинке, то браузер вместо обычных маркеров подгрузит Вашу картинку.
Применяя в качестве маркера картинки Вам понадобится знать еще одно свойство, которое отвечает за расположение маркера картинки. Чтобы увидеть, как это свойство работает, мы сделаем рамку красного цвета для всех элементов <li>.
ul li{
border: 2px solid #ff0000;
}
Теперь, если вы посмотрите, то Ваш маркер-картинка находится за пределами элемента списка, той самой рамки, что мы создали выше. Поэтому бывают моменты, когда нужно чтобы маркер находился внутри элемента списка. Для этого и существует свойство list-style-position, в которое изначально установлено значение outside, то есть устанавливать маркеры за пределами элемента.
Чтобы внедрить маркер внутрь элемента, используется значение inside. Теперь, если установить это свойство в значение inside, то маркер окажется внутри элемента списка и красная рамка это наглядно нам показывает.
ul{
list-style-image: url(../images/Название картинки маркера.jpg);
list-style-position:inside;
}
ul li{
border: 2px solid #ff0000;
}
Вот таким образом работают три этих свойства. Существует и сокращенный вариант записи, который объединяет все эти свойства.
То есть, указывается свойство list-style и затем, по порядку, значения типа маркера, позиции маркера и, если нужно путь к картинке, которая и будет маркером. И, картина у нас получится следующая:
ul{
list-style: inside url(../images/Название картинки маркера.jpg);
}
Вот таким образом записывается краткий вариант правил, относящихся к внешнему виду списков. Данная запись говорит, что маркер должен находится внутри элемента, а маркером, будет является, та самая картинка
На этом со списками все, но уделите немного больше времени спискам, по тренируйтесь сами с установкой различных маркеров почувствуйте, как это все работает. В демо будут показаны варианты установок маркера, где Вы сможете, путем сравнения, проверить корректность своей работы.
CSS