CSS :: Списки
Тип маркера списка и
css-свойство list-style-type
В процессе изучения HTML мы научились создавать списки, но оформление внешнего вида оставили за CSS, который позволяет выбрать нужный тип и расположение маркеров, а также использовать в качестве маркеров изображения (см. пример №1).
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Оформление списков</title> <style> ul{ width: 500px; margin: 2em; padding: 0px; background-color: #009900; } .list_2 { list-style-position: inside; list-style-type: decimal; } .list_3{ list-style-position: outside; list-style-image: url("circle_orange.png"); } .list_4{ list-style-position: inside; list-style-type: square; } .list_5{ list-style: decimal inside; } .list_6{ list-style: outside url("circle_orange.png"); } </style> </head> <body> <ul> <li> Все значения по умолчанию.<br><br> </li> <li class="list_2"> list-style-position: inside;<br> list-style-type: decimal;<br><br> </li> <li class="list_3"> list-style-position: outside;<br> list-style-image: url("circle_orange.png");<br><br> </li> <li class="list_4"> list-style-position: inside;<br> list-style-type: square;<br><br> </li> <li class="list_5"> list-style: decimal inside;<br><br> </li> <li class="list_6"> list-style: outside url("circle_orange.png"); </li> </ul> </body> </html>
Пример №1. Примеры оформления маркеров списка
Тип маркера задается при помощи наследуемого свойства list-style-type. Перечислим его значения:
- disc – маркер в виде диска; значение используется браузером по умолчанию для маркированных списков;
- circle – маркер в виде круга;
- square – маркер в виде квадрата;
- decimal – арабские цифры, т.е. 1, 2, 3 и т.д.; значение используется браузером по умолчанию для нумерованных списков;
- decimal-leading-zero – те же арабские цифры, только с нулем впереди для всех цифр, которые меньше десяти, т.е. 01, 02,...09, 10, 11 и т.д.;
- lower-roman – римские цифры в нижнем регистре, т.е. i, ii, iii, iv и т.д.;
- upper-roman – римские цифры в верхнем регистре, т.е. I, II, III, IV и т.д.;
- lower-greek – строчные греческие буквы, т.е. α, β, γ и т.д.;
- lower-latin или lower-alpha – строчные латинские буквы, т.е. a, b, c и т.д.;
- upper-latin или upper-alpha – прописные латинские буквы, т.е. A, B, C и т.д.;
- armenian – армянские цифры;
- georgian – грузинские цифры;
- none – отменяет маркеры вообще, т.е. список идет без маркеров.
Расположение маркеров списка и
css-свойство list-style-position
Расположение маркеров относительно содержимого пунктов списка определяется при помощи наследуемого свойства list-style-position, значение outside которого используется по умолчанию и указывает браузеру на размещение маркеров за границей содержимого пунктов списка, а значение inside указывает браузеру на размещение маркеров вместе с содержимым пунктов списка (см. пример №1).
Использование изображений в качестве маркеров списка.
css-свойство list-style-image
В CSS имеется также возможность использовать в качестве маркеров изображения. Для этого применяется наследуемое свойство list-style-image, которое может принимать значения:
-
url – относительный или абсолютный путь к файлу изображения, указываемый в скобках с использованием
одиночных или двойных кавычек или без них, например,
{list-style-image: url("http://
html ;.net/image_1.png")} - none – используется по умолчанию и указывает браузеру, что следует применять стандартный маркер вместо изображения.
Кстати, в данном списке маркеры представляют собой не что иное, как изображения в виде кружков.
Сокращенное css-свойство list-style
Можно задать значения всех трех свойств одновременно посредством наследуемого сокращенного свойства list-style. Опять же, значения должны разделяться пробелом, но могут идти в любом порядке или отсутствовать, тогда браузер заменит их значениями по умолчанию (см. пример №1).
Все свойства, перечисленные в данном пункте, применяются к элементам, у которых
{display: list-item
Различные варианты оформления списков можно посмотреть на соответствующей странице нашего учебного сайта №1.
Быстрый переход к другим страницам
- Определение характеристик шрифтов
- Оформление внешнего вида списков
- Оформление внешнего вида таблиц
- Вернуться к оглавлению учебника