оформление списков css3

Оформление списков CSS, используем свои изображения вместо маркеров

Учёными доказано, что у человека, который впервые посетил сайт, сформировывается о сайте впечатление за первые 10 секунд именно исходя из оформления сайта. Поэтому мы разберем в статье тему, посвящённую стилизации HTML списков для улучшения пользовательского интерфейса.

Как Вам должно быть известно, HTML предлагаем по умолчанию маркированный список <ul> и нумерованный <ol>. Допустим, мы имеем маркированный HTMLсписок примерно со следующей структурой:

Самые распространенные типы (маркеры, управляются через атрибут 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списков можно добавлять свои изображения. Приведем его синтаксис:

Нас интересует значение URL().  Давайте посмотрим, как это будет выглядеть на примере.

Код CSS:

Код HTML:

В результате, вместо черных точек или кружков будет отображена Ваша картинка. Рекомендуется подбирать оптимальный размер изображений предварительно, чтобы он симметрично смотрелся с текстом.

Также здесь хотелось бы отметить еще одно свойство – list-style-position. Оно задает параметры того, как будет отображаться маркер относительно текста. Outside — маркер за пределами списка, inside — текст обтекает маркер.

Код CSS:

После этих несложных манипуляций списки Вашего сайта заметно преобразятсяЭто все, что хотелось бы сказать о списках. Экспериментируйте!

2220 просмотров
В поисках шаблона для сайта?