Css свойства для оформления списков. CSS Design: Укрощение списков

С помощью CSS можно создать маркированные и нумерованные списки, а также использовать в качестве маркера подходящее изображение.

В табл. 1 перечислены свойства элементов, предназначенных для создания и изменения списков.

Табл. 1. Свойства CSS для управления видом списка

Свойство	Значение	Описание	Пример
list-style-type	disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none	Вид маркера. Первые три используются для создания маркированного списка, а остальные — для нумерованного.	LI {list-style-type: circle} LI {list-style-type: upper-alpha}
list-style-image	none URL	Устанавливает символом маркера любую картинку.	LI {list-style-image: url(check.gif)}
list-style-position	outside inside	Выбор положения маркера относительно блока строк текста.	LI {list-style-position: inside}
list-style		Универсальное свойство, включает одновременно все вышеперечисленные свойства.

Поскольку тег

наследует стилевые свойства тега

Пример 1. Создание маркированного списка

Списки <style type="text/css"> UL { list-style-type: square; /* Маркеры в виде квадрата */ list-style-position: outside; /* Маркеры размещаются за пределами текстового блока */ color: navy; /* Цвет текста списка */ }

Результат данного примера показан на рис. 1. Используются квадратные маркеры и их внешнее размещение относительно текста.

Рис. 1. Вид списка, измененого с помощью стилей

Чтобы установить свое собственное изображение в качестве маркера применяется свойство list-style-image , как показано в примере 2.

Пример 2. Использование изображений в качестве маркера

Списки

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

Результат данного примера показан на рис. 2. В качестве маркеров используется маленькая картинка.

Рис. 2. Изображения в качестве маркеров

Некоторые примеры создания различных списков приведен в табл. 2.

Возможные виды

Код HTML	Пример
	работоспособность всех ссылок поддержку разных браузеров читабельность текста
	Что следует учитывать при тестировании сайта: работоспособность всех ссылок поддержку разных браузеров читабельность текста
	Что следует учитывать при тестировании сайта: работоспособность всех ссылок поддержку разных браузеров читабельность текста
	Нумерованный список с арабскими цифрами: первый второй третий
	Нумерованный список со строчными римскими цифрами: первый второй третий
	Нумерованный список с заглавными римскими цифрами: первый второй третий
	Нумерованный список со строчными буквами латинского алфавита: первый второй третий
	Нумерованный список с заглавными буквами латинского алфавита: первый второй третий

Продолжаем изучать CSS свойства различных элементов. И в этом уроке пойдет речь об оформлении списков. Списки на практике используются достаточно часто, поэтому эти свойства нужно запомнить.

Обычный вид маркера

И, первое - задать внешний вид маркеров. Маркеры у списков бывают разные. В уроках по HTML Нумерованных списках показывается, как менять маркеры с помощью атрибута type . Но зная CSS данный атрибут больше не нужен, так как все это делается, куда удобней, благодаря таблице стилей CSS .

Для демонстрации давайте создадим список, с использованием CSS . Особо не имеет значения какой нумерованный список или ненумерованный список , так как с помощью свойства list-style-typet мы можем добавить маркеры или удалить их.

HTML

HTML страница

Ненумерованный список
Ненумерованный список
Ненумерованный список
Ненумерованный список

И так, обычный список создали, и по умолчанию у него создались маркеры в виде закрашенных кругов. И очень часто возникает вопрос, как убрать маркеры списка ?

Убирается маркер у списка с помощью свойства list-style-typet и присваивая ему значение none . Это является самым популярным вариантом по удалению маркеров у списка. И для списка зададим то самое свойство.

Ul{ list-style-type: none; }

Теперь если обновить страницу то увидим, что данное свойство убрало маркеры из списка.

none - Удаляет маркеры у списка
circle - Маркер в виде круга
disc" - Маркер в виде заполненного круга. Значение по умолчанию
square - Маркер в виде квадрата
armenian - Армянская нумерация
decimal - Маркер в виде цифры
decimal-leading-zero - Цифры с «0» перед началом (01, 02, 03, и т.д.)
georgian - Грузинская нумерация
lower-alpha - (а, Ь, с, d, е, и т.д.)
lower-greek - (alpha, beta, gamma, и т.д.)
lower-latin - (a, b, с, d, e, и т.д.)
Iower-roman - (i, ii, iii, iv, v, и т.д.)
upper-alpha - (А, В, С, D, Е, и т.д.)
upper-latin - (А, В, С, D, Е, и т.д.)
upper-roman - (I, II, III, IV, V, и т.Д.)
inherit - Значение должно быть унаследовано от элемента родителя

Это все вида маркеров для списков. Первые четыре вида самые распространённые, остальные виды применяются достаточно редко.

Ну и для примера давайте выберем и зададим маркер в виде больших римских цифр. Делается это просто: в место значения none ставим название нашего маркера upper-roman .

Ul{ list-style-type: upper-roman; }

Если обновить страницу, то у списков в виде маркеров появились римские большие цифры. Вот таким способом можно менять внешний вид маркеров списков, задавая нужный вид через свойство list-style-type .

Маркер в виде изображения

Второй, достаточно важный момент, и часто используемый маркер - это изображение в виде маркера. Часто нужно использовать маркер в виде красивой картинки и обычные варианты маркеров представленных CSS не подходят. Для этого используется изображения. И делается это с помощью специального свойства, которое называется list-style-image . Это будет указывать браузеру, что маркером у нас будет картинка.

Возьмите любую картинку в интернете размером (15px x 15px) , которую планируется использовать в качестве маркера и поместите ее в ранее уже созданную папку с картинками images . После этого, остается свойству list-style-image указать путь к картинке и браузер вместо маркера подставит картинку.

В CSS путь указывается с помощью ключевого слова url() . В скобках указываем путь к картинке ../images/Название картинки.jpg , относительно таблицы стилей.

То есть, что значит относительно таблицы стилей? Наша таблица стилей - файл style.css , лежит в каталоге CSS , а картинка лежит в каталоге images . Это значит, что браузеру нужно указать, что ему сначала нужно выйти из каталога CSS , это делается так: ../ , а затем зайти в в каталог с картинкой images и уже затем найти нужную картинку.

Ul{ list-style-image: url(../images/Название картинки маркера.jpg); }

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

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

.

Ul li{ border: 2px solid #ff0000; }
Теперь, если вы посмотрите, то Ваш маркер-картинка находится за пределами элемента списка, той самой рамки, что мы создали выше. Поэтому бывают моменты, когда нужно чтобы маркер находился внутри элемента списка. Для этого и существует свойство list-style-position , в которое изначально установлено значение outside , то есть устанавливать маркеры за пределами элемента.

Чтобы внедрить маркер внутрь элемента, используется значение inside . Теперь, если установить это свойство в значение inside , то маркер окажется внутри элемента списка и красная рамка это наглядно нам показывает.

Ul{ list-style-image: url(../images/Название картинки маркера.jpg); list-style-position:inside; } ul li{ border: 2px solid #ff0000; }
Вот таким образом работают три этих свойства. Существует и сокращенный вариант записи, который объединяет все эти свойства.

То есть, указывается свойство list-style и затем, по порядку, значения типа маркера, позиции маркера и, если нужно путь к картинке, которая и будет маркером. И, картина у нас получится следующая:

Ul{ list-style: inside url(../images/Название картинки маркера.jpg); }
Вот таким образом записывается краткий вариант правил, относящихся к внешнему виду списков. Данная запись говорит, что маркер должен находится внутри элемента, а маркером, будет является, та самая картинка

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

Сегодня нет практически ни одного сайта, где бы не использовались HTML списки (