Главная » Frontend » 2.8. CSS-списки
2018/06/29Метки:

2.8. CSS-списки

CSS-списки — это некоторый ряд правил в каскадных стилях, которые используются для оформления различного рода списочной информации при разметке (верстке) страницы. Чаще всего в качестве спичных данных выступают различные виды меню, а также различные попунктные перечисления в тексте. Все списочные блоки в HTML-документе размечаются в следующими тэгами:

  • ul, ol (родительские);
  • li (дочерний).

Списочный набор css-правил предназначен именно для визуального оформления этих тэгов. Они позволяют выполнять следующие манипуляции с маркировкой:

  1. выбирать ее разновидность;
  2. заменять ее на картинки;
  3. изменять ее расположение.

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, которые также дают широкий набор возможностей для более красивого визуального оформления.

Метки: Метки:
Понравилась статья? — Ставь лайк!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

×
Новости и обзор новинок рынка строительной техники.
Подпишитесь на обновления нашей группы!