2.8. CSS-списки
CSS-списки — это некоторый ряд правил в каскадных стилях, которые используются для оформления различного рода списочной информации при разметке (верстке) страницы. Чаще всего в качестве спичных данных выступают различные виды меню, а также различные попунктные перечисления в тексте. Все списочные блоки в HTML-документе размечаются в следующими тэгами:
- ul, ol (родительские);
- li (дочерний).
Списочный набор css-правил предназначен именно для визуального оформления этих тэгов. Они позволяют выполнять следующие манипуляции с маркировкой:
- выбирать ее разновидность;
- заменять ее на картинки;
- изменять ее расположение.
1. Тип маркера списка list-style-type
Данное css-правило дает возможность задать разное визуальное отображение маркеров из стандартного набора или же отключить их отображение у маркированного или нумерованного списков. Является наследуемым.
| list-style-type | |
|---|---|
| Значения: | |
disc |
При этом параметре маркер представляет собой закрашенную «горошину» (буллет, bullet). Определён в качестве дефолтного. |
armenian |
Маркировка будет, как в Армении. |
circle |
Маркер будет в виде окружности, которая не закрашена и по всей своей длине имеет сплошную границу однотонного цвета. |
cjk-ideographic |
Идеографический тип нумирования. |
decimal |
В виде десятичных цифр: 1, 2, 3, … Относится к нумерованному типу. |
decimal-leading-zero |
Также в виде десятичных цифр, перед каждой из которых расположен ноль: 01, 02, 03, … |
georgian |
Маркировка будет, как в Грузии. |
hebrew |
Маркировка будет, как в Европе. |
hiragana |
Маркировка будет, как в Японии (строчные, малые): a, i, u, … |
hiragana-iroha |
Маркировка будет, как в Японии (строчные, малые): i, ro, ha, … |
katakana |
Маркировка будет, как японская слоговая азбука (прописные): A, I, U, … |
katakana-iroha |
Маркировка будет, как еще один подвид японской азбуки (прописные): I, RO, HA, … |
lower-alpha |
Нижнерегистровые символы английской азбуки: a, b, c, … |
lower-greek |
Нижнерегистровые символы греческой азбуки. |
lower-latin |
Нижнерегистровые латинские символы: a, b, c, … |
lower-roman |
Римские строчные (маленькие) цифры: i, ii, iii, … |
none |
Эта опция убирает маркер |
square |
При таком значении буллет будет представлять собой квадрат, который будет закрашен однотонным цветом или не закрашен |
upper-alpha |
Верхнерегистровые буквы английского алфавита: A, B, C, … |
upper-latin |
Верхнерегистровые латинские символы: A, B, C, … |
upper-roman |
Римские прописные цифры: I, II, III, … |
initial |
Этот параметр переводит маркер в состояние по умолчанию |
inherit |
Эта опция сообщает браузеру, что при рендеринге текущего списка он должен наследовать списочные правила у его родителя. |
Формат записи
ul {list-style-type: circle;}ol {list-style-type: upper-alpha;}Рассмотрим, как на javascript, управлять этим параметром:
document.getElementById("IDhtmlблока").style.listStyleType = 'тип';2. Изображения для маркеров списка list-style-image
Рассматриваемое правило позволяет делать маркирование списочной информации с помощью картинок. В качестве картинки также может быть указан некоторый градиент с помощью правила linear-gradient. Также, как и предыдущее, тоже наследуется.
| list-style-image | |
|---|---|
| Значения: | |
url('путь') |
В качестве входного параметра выступает относительный или абсолютный путь к картинке, которая будет выступать в качестве маркера. |
none |
При этой опции картинка в качестве маркера будет убрана. Является дефолтным параметром. |
initial |
Переводит свойство в дефолтное состояние. |
inherit |
При таком параметре свойство будет наследоваться у родителя. |
Формат записи
ul {list-style-image: url(img3.jpg);}Рассмотрим, как на javascript, управлять этим параметром:
document.getElementById("IDhtmlблока").style.listStyleImage = 'путь к картинке';3. Позиционирование маркера списка list-style-position
Рассматриваемое правило позволяет изменять расположение парке в пунктах списочной информации. Является наследуемым.
| list-style-position | |
|---|---|
| Значения: | |
outside |
При выборе такого параметра маркер списка будет находится вне границы текста (вне строки, с отступом). Является дефолтным значением. |
inside |
При выборе такого параметра элементы маркировки будут располагаться без отступа от текста, то есть будет включен в текстовую строку в качестве первого символа. |
initial |
Переводит свойство в дефолтное состояние. |
inherit |
При таком параметре свойство будет наследоваться у родителя. |
Формат записи
ul {list-style-position: inside;}Рассмотрим, как на javascript, изменить это свойство:
document.getElementById("IDhtmlблока").style.listStylePosition = 'положение';4. Упрощенная запись в одну строку list-style
Все описанные выше правила можно записать в рамках одной строки, то есть в одном правиле list-style. При этом, если какое-то из подправил пропускается, то его значение будет дефолтным.
Формат записи
ul {list-style: lower-greek inside;}Надеемся, что описанная выше информация Вам дала полное представление о стилизации списочных данных при разметке документа в процессе html-верстки. Хотелось бы отметить, что не нужно забывать при оформлении и про возможность задания рамки border у ul, ol, li, и про цвет их фона background, которые также дают широкий набор возможностей для более красивого визуального оформления.
Добавить комментарий