Главная > Компьютер > Оформление списков: List-style. Правила CSS для настройки внешнего вида списка на html странице

Оформление списков: List-style. Правила CSS для настройки внешнего вида списка на html странице

Универсальное свойство, позволяющее одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера списка.

Краткая информация

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

Любые комбинации трёх значений определяющих стиль маркеров, они разделяются между собой пробелом. Комбинации значений должны следовать в указанном порядке: вначале идёт тип маркера, затем положение и картинка. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить.

Пример

list-style

Многомерный полином
Нормальный абсолютно сходящийся ряд
Интеграл от функции
Коллинеарный экстремум функции

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства list-style

Объектная модель

Объект .style.listStyle

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации ) - первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

List style — оформление списков в Html коде

Итак, в языке стилевой разметки существует три отдельных правила начинающихся с list-style, которые служат для настройки внешнего вида списков (нумерованных или маркированных) в коде веб документов. Кроме этого существует сборное Css правило list-style, которое позволяет несколько сократить количество кода. Но обо всем по порядку.

То, что мы сейчас будем с вами рассматривать, допустимо использовать как для Html элементов LI, так и для элементов Ul и Ol (маркированный и нумерованный списки, соответственно). В чем будет разница применения list-style для этих тегов?

Собственно, узнать, наследуется ли свойство или нет, можно на сайте валидатора (читайте про по приведенной ссылке) в разделе посвященном спецификации таблиц каскадных стилей. В столбце «Inherited» напротив наследуемых правил будет стоять «Yes»:

Давайте начнем с list-style-type , которое позволяет задать тип маркирации для отдельных элементов Html списка. Для этого правила допустимы следующие значения:

None — маркирация осуществляться вообще не будет (list-style-type:none; применено для этого пункта и поэтому у него нет маркера)
Disc — закрашенный кружок (для этой строки как раз применено list-style-type:disc;)
Circle — окружность в качестве маркера
Square — квадратик в качестве маркера
Decimal — арабские цифры (list-style-type:decimal;)
lower-alpha — в нижнем регистре
upper-alpha — латинские буквы в верхнем регистре
lower-roman — римские цифры в нижнем регистре
upper-roman — римские цифры в верхнем регистре

Как вы думаете, с помощью каких элементов Ul или Ol был создан расположенный чуть выше список? Вопрос на засыпку. Оказывается, что это уже не важно, хотя в данном конкретном случае я использовал Ol, но изменив его на Ul — внешний вид останется прежним, ибо он задается для каждого элемента своим значением CSS правила list style type.

По сути Ul и Ol отличаются только поведением по умолчанию (Ul — маркирует, а Ol — нумерует). Но если вы захотите, то сможете легко превратить один вид списка в другой с помощью list-style-type. Шрифт для маркирования цифрами или буквами используется точно такой же, какой был вами определен для содержимого тегов LI. Например, поменяв цвет шрифта для списка мы поменяем и цвет маркеров :

Поменяли цвет текста (list-style-type:lower-roman;color:red) и поменялся цвет маркера

Давайте перейдем с следующему CSS свойству — list-style-position . С помощью него можно задать позицию (размещение) области с маркером. Для него предусмотрено всего два варианта значений:

Т.е. по сути в list-style-position мы указываем, где нужно размещать область с маркерам — за пределами элемента LI (outside) или внутри него (inside). По умолчанию область с маркером выносится за пределы, т.е. используется значение outside.

Давайте посмотрим это на примере. В первом элементе списка я специально пропишу list-style-position:inside и мы посмотрим, что из этого выйдет:

Здесь все по умолчанию
Вот так будет выглядеть размещение области маркера с inside. Обратите внимание, что вторая строка в этом элементе и маркер расположены на одном уровне
Здесь все по умолчанию

List-style-image и сборное Css правило

Далее у нас на очереди List-style-image — позволяет задать картинку, которая будет использоваться в качестве маркера. Это правило по умолчанию имеет значение None (т.е. никакой картинки в качестве маркера не используется), но вы можете прописать функционал Url (), указав в нем путь до изображения, которое в последствие будет выполнять роль маркера в этом списке:

Выглядеть это может так:

List-style-image: url(https://сайт/images/list_star.png);

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

Как вы помните, в статье про я говорил, что картинки относятся к строчным элементам (собственно, для браузера эта та же самая буква, но иногда очень большого размера).

Вот картинка и встает на место маркера (буквы или цифры). При этом высота строки с элементом списка будет увеличена, если вы вставите в качестве маркера большую картинку (как это произошло во втором элементе приведенного чуть выше примера).

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

Чтобы записать все три описанных выше CSS правила в одно единое, можно будет использовать List-style, которое является сборным для оформления списков. Порядок указания значений в нем не имеет никакого значения. Те значения, которые вы не зададите в List-style, в явном виде будут интерпретированы браузером со значениями принятыми по умолчанию.

Где посмотреть значения по умолчанию? Да все там же — в спецификации CSS валидатора W3C в столбце «Initial value» напротив интересующих вас свойств:

Значения для отдельных свойств в сборном правиле List-style разделяются пробелами. Места расположения, как уже упоминал, не важны:

На практике это может выглядеть, например, так:

List-style:inside upper-roman url(https://сайт/images/list_star.png);

Можно использовать значения в любом порядке и любом количестве (начиная от одного). Кстати говоря, с помощью списков чаще всего формируются на сайтах меню и свойство List-style при этом используется для того, чтобы убрать маркеры из списков меню , которые там совершенно не нужны:

List-style-type:none;

List-style:none;

Удачи вам! До скорых встреч на страницах блога сайт

Вам может быть интересно

Display (block, none, inline) в CSS - задаем тип отображения Html элементов на вебстранице Как настроить чередование фонового цвета строк таблиц, списков и прочих Html элементов на сайте с помощью псевдокласса nth-child
Float и clear в CSS - инструменты блочной верстки
Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши
Position (absolute, relative и fixed) - способы позиционирования Html элементов в CSS (правила left, right, top и bottom)
Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка
CSS свойства text-decoration, vertical-align, text-align, text-indent для оформления текста в Html
Правила Font (Weight, Family, Size, Style) и Line Height для оформления шрифтов в CSS
Background в CSS (color, position, image, repeat, attachment) - все для задания цвета фона или фоновой картинки Html элементов
CSS - что это такое, как таблицы каскадных стилей подключаются к Html коду с помощью Style и Link
Приоритеты в Css и их повышение за счет Important, комбинация и группировка селекторов, пользовательские и авторские стили

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

Вообще списки среди блочных элементов стоят особняком. Это связано с тем, что они включают в себя маркеры и нумерацию, которые расставляет сам браузер.

Свойство List style — оформление списка на html странице

В языке CSS существует три свойства начинающихся с list-style, которые отвечают за оформление маркированных и нумерованных списков. Плюс еще есть сборное правило list-style, позволяющее сократить количество кода.

Все эти свойства допустимо использовать как для html элементов li, так и для элементов ul и ol. Единственное отличие, если правила прописать для конкретного значения списка li, то оно только для него и применится. А если эти же css правила прописать для контейнеров ul или ul, то они применятся для всех элементов li заключенных в этих контейнерах.

Начнем с атрибута list-style-type , который задает вид маркеров или нумерации у пунктов списка:

Как видно, свойство list-style-type имеет много доступных значений, которые могут задавать как вид маркера, так и различные виды нумерации.

disc - маркер в виде черного кружка (значение по умолчанию для маркированных списков).
circle - маркер в виде не закрашенного кружка.
square - маркер в виде квадратика. Он может быть светлым или темным, в зависимости от браузера.
decimal - нумерация арабскими цифрами (значение по умолчанию для нумерованных списков).
decimal-leading-zero - нумерация арабскими цифрами от 01 до 99 с начальным нулем.
lower-roman - нумерация маленькими римскими цифрами.
upper-roman - нумерация большими римскими цифрами.
lower-greek - нумерация маленькими греческими буквами.
lower-alpha и lower-latin - нумерация маленькими латинскими буквами.
upper-alpha и upper-latin - нумерация большими латинскими буквами.
armenian - нумерация традиционными армянскими цифрами.
georgian - нумерация традиционными грузинскими цифрами.
none - маркерация и нумерация осуществляться вообще не будет.

Так примерно будут выглядеть элементы списка в браузере с различными значениями list-style-type:

При использовании CSS стилей не важно какой элемент (OL или UL) используется для создания списка. OL и UL отличаются только поведением по умолчанию и с помощью свойства list-style-type вы можете легко превратить один вид списка в другой.

Атрибут стиля list-style-image позволяет задавать в качестве маркера пунктов списка графическое изображение . При использовании атрибута list-style-image значение атрибута list-style-type игнорируется:

list-style-image: none|<интернет-адрес файла изображения>|inherit

Значение none убирает маркер изображение и устанавливает обычный, не графический. Это поведение по умолчанию.

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

Пример списка с картинкой в качестве маркера:

первый пункт списка;

второй пункт списка;

третий пункт списка.

А вот как это выглядит:

первый пункт списка;
второй пункт списка;
третий пункт списка.

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

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

list-style-position: inside|outside

В случае значения inside маркер или нумерация помещается как бы внутри списка, а в случае outside за пределами элементов li. По умолчанию используется значение outside и маркер выносится за пределы.

Пример списка с различными значениями list-style-position:

в первом пункте все по умолчанию;
во втором пункте list-style-position установлен в inside. В этом случае, обратите внимание, вторая строка размещается на одном уровне с маркером;
в этом пункте list-style-position равен outside.

Сборное CSS правило list-style

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

Разделять значения в сборном правиле list-style следует пробелами:

list-style: list-style-type list-style-image list-style-position;

Реальное CSS правило для оформления списков может выглядеть примерно вот так:

list-style: circle url (//сайт/images/marker.png) outside;

Таким образом свойство list-style позволяет значительно сократить объем кода, ведь вместо трех правил достаточно задать лишь одно.

Как уже говорилось выше, значения можно указывать в любом порядке и любом количестве. Так, например, для того чтобы убрать маркеры из списка меню достаточно записи:

list-style: none;

Тоже самое можно сделать используя свойство list-style-type:

list-style-type: none;

На этом рассказ об оформлении html списков при помощи каскадных таблиц стилей я закончу. Чтобы узнать о других CSS свойствах вы можете почитать статьи из раздела « » и не забудьте подписаться на обновления блога . До новых встреч!

В этой главе мы изучим атрибуты стиля, с помощью которых задают параметры абзацев . Абзацев в широком смысле этого слова - к которым относятся и заголовки, и списки , и теги адреса, и большие цитаты. В общем, блочных элементов, рассмотренных в главе 2 и предназначенных для структурирования текста.

Напоследок мы познакомимся с двумя очень специфичными атрибутами стиля, которые позволят нам задать отображение элемента Web-страницы (т. е. будет он блочным или встроенным) и сделать элемент невидимым. Эти атрибуты стиля применяются нечасто и только в совокупности с определенным поведением (см. часть III).

Параметры вывода текста

Начнем мы с атрибутов стиля, управляющих выводом текста в структурирующих текст блочных элементах. Их совсем мало. И все они применимы только к блочным элементам.

Атрибут стиля text-align задает горизонтальное выравнивание текста:

text-align: left|right|center|justify|inherit

Здесь доступны значения left (выравнивание по левому краю; обычное поведение Web-обозревателя), right (по правому краю), center (по центру) и justify (полное выравнивание).

Примеры:

P { text-align: justify }
H1 { text-align: center }

Атрибут стиля text-indent задает отступ для "красной строки":

text-indent: <отступ "красной строки">

Здесь допускаются абсолютные и относительные (относительно ширины абзаца) величины отступа. По умолчанию отступ "красной строки" равен нулю. Отметим, что атрибут стиля text-indent не поддерживает значение inherit.

Пример:

P { text-indent: 5mm }

Вот теперь абзацы будут иметь "красную строку".

Списки среди блочных элементов стоят особняком. В основном, из-за того, что, во-первых, содержат в себе другие блочные элементы (отдельные пункты), а во-вторых, включают маркеры и нумерацию, которые расставляет сам Web-обозреватель. Вот о маркерах и нумерации, а точнее, об атрибутах стиля, предназначенных для задания их параметров, мы сейчас и поговорим.

Атрибут стиля list-style-type задает вид маркеров или нумерации у пунктов списка:

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

Disc- маркер в виде черного кружка (обычное поведение для маркированных списков).

Circle- маркер в виде светлого кружка.

Square - маркер в виде квадратика. Он может быть светлым или темным, в зависимости от Web-обозревателя.

Decimal- нумерация арабскими цифрами (обычное поведение для нумерованных списков).

Decimal-leading-zero - нумерация арабскими цифрами от 01 до 99 с начальным нулем.

Lower-roman- нумерация маленькими римскими цифрами.

Upper-roman- нумерация большими римскими цифрами.

Lower-greek - нумерация маленькими греческими буквами.

Lower-alpha и lower-latin - нумерация маленькими латинскими буквами.

Upper-alpha и upper-latin- нумерация большими латинскими буквами.

Armenian- нумерация традиционными армянскими цифрами.

Georgian - нумерация традиционными грузинскими цифрами.

None - маркер и нумерация отсутствуют (обычное поведение для несписков).

НА ЗАМЕТКУ

Мы рассмотрели только значения атрибута стиля list-style-type, предлагаемые стандартом CSS 3. Однако стандарт CSS 2 предусматривал еще несколько значений, которые до сих пор поддерживаются Web-обозревателями. Вы можете найти их на Web-странице https://developer.mozilla.org/en/CSS/list-style-type.

Атрибут стиля list-style-type можно задавать как для самих списков , так и для отдельных пунктов списков. В последнем случае создается список, в котором пункты имеют разные маркеры или нумерацию. Иногда это может пригодиться.

Вот определение маркированного списка с маркером в виде квадратика:

UL { list-style-type: square }

А в листинге 9.1 мы задали такой же маркер для одного из пунктов маркированного списка.

Атрибут стиля list-style-image позволяет задать в качестве маркера пунктов списка какое-либо графическое изображение (создать графический маркер). В этом случае значение атрибута стиля list-style-type, если таковой задан, игнорируется:

list-style-image: none|<интернет-адрес файла изображения>|inherit

Интернет-адрес файла с графическим маркером задается в таком же формате, что и интернет-адрес файла фонового изображения (см. главу 8):

UL { list-style-image: url(/markers/dot.gif) }

Значение none убирает графический маркер и возвращает простой, неграфический. Это обычное поведение.

Атрибут стиля list-style-image также можно задавать как для самих списков, так и для отдельных их пунктов.

Атрибут стиля list-style-position позволяет указать местоположение маркера или нумерации в пункте списка:

list-style-position: inside|outside|inherit

Доступных значений здесь два:

Inside - маркер или нумерация находятся как бы внутри пункта списка, являются его частью;

Outside - маркер или нумерация вынесены за пределы пункта списка (это обычное поведение).

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

Пример:

OL { list-style-position: inside }

Браузер	Internet Explorer			Netscape			Opera			Safari	Mozilla	Firefox
Версия	5.5	6.0	7.0	6.0	7.0	8.0	7.0	8.0	9.0	1.0	1.7	1.0	2.0
Поддерживается	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

Краткая информация

Описание

Атрибут, позволяющий одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера. Для более подробного ознакомления с аргументами, смотрите свойства каждого параметра list-style-type , list-style-position и list-style-image отдельно.

Синтаксис

list-style: list-style-type || list-style-position || list-style-image

Аргументы

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

list-style

Lorem ipsum dolor sit amet

Consectetuer adipiscing elit

Sed diem nonummy nibh euismod

Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Результат данного примера показан ни рис. 1.