List style ( type, image, position) — Css правила для настройки внешнего вида списков в Html коде
Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня будет очередная статья в копилку CSS справочника. Речь в ней пойдет об оформлении Html списков с помощью правил CSS (таблиц каскадных стилей). Здесь все очень просто, но тем не менее я решил посвятить этой теме отдельный пост.
Чуть раньше мы уже успели узнать, как задается фон через CSS правила background, как оформляется текст с помощью text-decoration, vertical-align, text-align и text-indent и как можно работать со шрифтами в CSS с помощью Font (Weight, Family, Size, Style). Ну, а еще чуть раньше мы во всех подробностях рассмотрели всевозможные селекторы CSS и их различные комбинации для указания именно того элемента Html кода, для которого нужно будет применить определенные правила стилевого оформления.
List style — оформление списков в Html коде
Итак, в языке стилевой разметки существует три отдельных правила начинающихся с list-style, которые служат для настройки внешнего вида списков (нумерованных или маркированных) в Html коде веб документов. Кроме этого существует сборное Css правило list-style, которое позволяет несколько сократить количество кода, необходимого для описания внешнего вида списков в файле стилевой разметки. Но обо всем по порядку.
Те CSS правила, которые мы сейчас будем с вами рассматривать, допустимо использовать как для Html элементов LI (элемент списка), так и для элементов Ul и Ol (маркированный и нумерованный списки, соответственно). В чем будет разница применения правил list-style?
Если прописать это CSS правило только для конкретного элемента списка LI, то, соответственно, оно только для него и применится (либо вообще для всех элементов LI). А если аналогичное правило прописать для контейнеров Ul или Ol, то оно применится для всех элементов LI заключенных в этих контейнерах (маркированных или нумерованных списков). Т.е. оно перейдет к элементу LI по наследству (читайте более подробно про наследование в CSS).
Собственно, узнать, наследуется ли CSS правило или нет, можно на сайте валидатора (читайте про валидатор W3C по приведенной ссылке) в разделе посвященном спецификации таблиц каскадных стилей. В столбце «Inherited» напротив наследуемых правил будет стоять «Yes»:
Давайте начнем с CSS свойства 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 правилу для Html списков — list-style-position. С помощью этого правила можно задать позицию (размещение) области с маркером. Для него предусмотрено всего два варианта значений:
Т.е. по сути в правиле list-style-position мы указываем, где нужно размещать область с маркерам — за пределами элемента LI (outside) или внутри него (inside). По умолчанию область с маркером выносится за пределы элемента LI, т.е. используется значение outside. Давайте посмотрим это на примере. В первом элементе списка я специально пропишу list-style-position:inside и мы посмотрим, что из этого выйдет:
- Здесь все по умолчанию
- Вот так будет выглядеть размещение области маркера внутри элемента LI с помощью CSS свойства list-style-position:inside. Обратите внимание, что вторая строка в этом элементе и маркер расположены на одном уровне
- Здесь все по умолчанию
List-style-image и сборное Css правило list-style
Следующее CSS правило для работы со списками List-style-image позволяет задать картинку, которая будет использоваться в качестве маркера. Это правило по умолчанию имеет значение None (т.е. никакой картинки в качестве маркера не используется), но вы можете прописать функционал Url () указав в нем путь до изображения, которое в последствие будет выполнять роль маркера в Html списке:
Если в List-style-image вы пропишите путь до картинки и она будет удачно подгружена браузером, то именно она встанет на место маркера либо нумерации. Выглядеть это может так:
list-style-image: url(http://ktonanovenkogo.ru/images/list_star.png);
- Здесь все по умолчанию
- Вот так может выглядеть использование картинки в качестве маркера в Html списке. Понятно, что можно подобрать более подходящее для этой цели изображение
- Например, как здесь.
Как вы помните, в статье про тег изображения Img я говорил, что картинки относятся к строчным элементам (собственно, для браузера эта та же самая буква, но иногда очень большого размера). Вот картинка и встает на место маркера (буквы или цифры). При этом высота строки с элементом списка будет увеличена, если вы вставите в качестве маркера большую картинку (как это произошло во втором элементе списка приведенного чуть выше примера).
В функционале CSS свойства list style image можно указывать как абсолютные так и относительные ссылки на изображения (подробнее читайте об этом в статье про Url). Если картинка не подгрузится, то будет использоваться маркер или нумерация по умолчанию, либо то, что прописано в list-style-type для этого Html списка.
Чтобы записать все три описанных выше CSS правила (list-style-type, list-style-position и list-style-image) в одно единое правило, то можно будет использовать List-style, которое является сборным правилом для оформления списков. Порядок указания значений в этом сборном правиле не имеет никакого значения. Те значения, которые вы не зададите в List-style в явном виде будут интерпретированы браузером со значениями принятыми по умолчанию.
Где посмотреть значения по умолчанию для CSS правил? Да все там же — в спецификации CSS валидатора W3C в столбце «Initial value» напротив интересующих вас правил:
Значения для отдельных правил в сборном правиле List-style разделяются пробелами. Места расположения, как уже упоминал не важны:
На практике это может выглядеть, например, так:
list-style:inside upper-roman url(http://ktonanovenkogo.ru/images/list_star.png);
Можно использовать значения правил в любом порядке и любом количестве (начиная от одного). Кстати говоря, с помощью списков чаще всего формируются на сайтах меню и свойство List-style при этом используется для того, чтобы убрать маркеры из списков меню (list-style:none), которые там совершенно не нужны:
list-style-type:none;
либо
list-style:none;
У Евгения Попова имеется видекурс по PHP+MySQL, который стоит того, чтобы с ним ознакомиться.
Можете посмотреть бесплатные видеоуроки по Html и CSS, а так же можете ознакомиться с другими статьями:
- Учебник Html
- Что такое язык Html, валидатор W3C и Html тэги
- Doctype и комментарии в html
- Спецсимволы (мнемоники) в Html, символ неразрывного пробела
- Коды цвета в Html и CSS коде (RGB палитра)
- Как в Html код вставить картинку и html ссылку
- Img и обтекание картинки текстом
- Гиперссылки (a, target blank, href, якоря)
- Html список (UL, OL, DL и LI)
- Html таблица (Tr, Th, Td, Table)
- Html формы - теги Form и Input
- Справочник CSS для начинающих
- Блочная Div верстка сайта в Html и CSS
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru
-
- Position (absolute, relative и fixed) — способы позиционирования Html элементов в CSS (правила left, right, top и bottom)
- Background в CSS (color, position, image, repeat, attachment) для задания цвета фона или фоновой картинки Html элементов
- Css свойства Font (Weight, Family, Size, Style) и Line Height для оформления шрифтов в Html коде
- CSS (таблицы каскадных стилей) — что это такое, Style и Link для связывания языка Css и Html
- CSS правило Display (block, none, inline) — задаем тип отображения Html элементов на вебстранице
- Height, width и overflow — CSS правила для описания области контента при блочной верстке
- Теги UL, OL, LI, DL — Html списки
Спасибо, как раз разрабатываю новый проект (ссылку пока не публикую), обновил знания.