Учёными доказано, что у человека, который впервые посетил сайт, сформировывается о сайте впечатление за первые 10 секунд именно исходя из оформления сайта. Поэтому мы разберем в статье тему, посвящённую стилизации HTML списков для улучшения пользовательского интерфейса.
Как Вам должно быть известно, HTML предлагаем по умолчанию маркированный список <ul> и нумерованный <ol>. Допустим, мы имеем маркированный HTML—список примерно со следующей структурой:
<ul> <li>Название списка №1</li> <li>Название списка №2</li> <li>Название списка №3</li> </ul>
Самые распространенные типы (маркеры, управляются через атрибут type) приведены в таблице:
| Тип списка | Код HTML | Пример |
|---|---|---|
| Круговой маркер | <ul type=»disc»> <li>…</li> </ul> |
|
| Маркер в виде окружности | <ul type=»circle»> <li>…</li> </ul> |
|
| Квадратный маркер | <ul type=»square»> <li>…</li> </ul> |
|
Однако, с использованием CSS3 все становится намного интереснее и проще. Чтобы задать тип элемента списка, используется свойство list-style-type. С его помощью можно управлять как маркированным, так и нумерованным списком. Ниже приведен перечень возможностей свойства list-style-type:
Маркированный список
circle — Маркер в виде кружка.
disc — Маркер в виде точки.
square — Маркер в виде квадрата.
Нумерованный список
- armenian — Традиционная армянская нумерация.
- decimal — Арабские числа (1, 2, 3, 4,…).
- decimal-leading-zero — Арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03,…).
georgian — Традиционная грузинская нумерация.
- lower-alpha — Строчные латинские буквы (a, b, c, d,…).
- lower-greek — Строчные греческие буквы (α, β, γ, δ,…).
- lower-latin — Это значение аналогично lower-alpha.
- lower-roman — Римские числа в нижнем регистре (i, ii, iii, iv, v,…).
- upper-alpha — Заглавные латинские буквы (A, B, C, D,…).
- upper-latin — Это значение аналогично upper-alpha.
- upper-roman — Римские числа в верхнем регистре (I, II, III, IV, V,…).
- none — Отменяет маркеры для списка.
- inherit — Наследует значение родителя.
Своя стилизация
Одним из самых важных элементов оформления списков, по нашему мнению, является свойство list-style-image. С его помощью, вместо стандартных чёрных точек, которые стоят перед элементом CSS—списков можно добавлять свои изображения. Приведем его синтаксис:
list-style-image: none | url('путь к файлу') | inherit
Нас интересует значение URL(). Давайте посмотрим, как это будет выглядеть на примере.
Код CSS:
.list {
list-style-image: url('адрес_к_новому_элементу');
}
Код HTML:
<ul class="list"> <li>Название списка №1</li> <li>Название списка №2</li> <li>Название списка №3</li> </ul>
В результате, вместо черных точек или кружков будет отображена Ваша картинка. Рекомендуется подбирать оптимальный размер изображений предварительно, чтобы он симметрично смотрелся с текстом.
Также здесь хотелось бы отметить еще одно свойство – list-style-position. Оно задает параметры того, как будет отображаться маркер относительно текста. Outside — маркер за пределами списка, inside — текст обтекает маркер.
Код CSS:
.list {
list-style-image: url(images/weatherless.png); /* Путь к рисунку для установки маркера */
list-style-position: inside; /* Маркер обтекается текстом */
}
После этих несложных манипуляций списки Вашего сайта заметно преобразятся! Это все, что хотелось бы сказать о списках. Экспериментируйте!
