List-style-type: circle | disc | square | armenian | decimal | decimal-leading-zero | georgian | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-latin | upper-roman | none
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| Группирует значения. | [ crop || cross ] | |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения зависят от того, к какому типу списка они применяются: маркированному или нумерованному.
ul { list-style-type: decimal ; }
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства list-style-type
Объект .style.listStyleType
В браузере Internet Explorer 6 при использовании нумерованного списка
Браузер Internet Explorer до версии 7 включительно не поддерживает значения armenian , decimal-leading-zero , georgian , lower-greek , lower-latin , upper-latin . Вместо них выводится нумерация арабскими числами. В этом браузере нумерация или маркеры не отображаются для плавающих элементов (ul { float: left; } ).
Internet Explorer 8 дополнительно понимает значение upper-greek , которое устанавливает нумерацию в виде заглавных греческих букв (Α, Β, Γ, Δ,...).
Каждая спецификация проходит несколько стадий одобрения.
| none, disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman | 4 | 12 | 1 | 7 | 1 | 1 |
| lower-latin, upper-latin, lower-greek, armenian, georgian | 8 | 12 | 1 | 6 | 1 | 1 |
| decimal-leading-zero | 8 | 12 | 1 | 8 | 1 | 1 |
Здравствуйте, уважаемые читатели блога сайт. Сегодня будет очередная статья в копилку . Речь в ней пойдет об оформлении с помощью правил таблиц каскадных стилей. Здесь все очень просто, но тем не менее я решил посвятить этой теме отдельный пост.
Чуть раньше мы уже успели узнать как , как и как можно работать со . Ну, а еще чуть раньше мы во всех подробностях рассмотрели всевозможные и их различные комбинации для указания именно того элемента Html кода, для которого нужно будет применить определенные свойства стилевого оформления.
Итак, в языке стилевой разметки существует три отдельных правила начинающихся с list-style, которые служат для настройки внешнего вида списков (нумерованных или маркированных) в коде веб документов. Кроме этого существует сборное Css правило list-style, которое позволяет несколько сократить количество кода. Но обо всем по порядку.
То, что мы сейчас будем с вами рассматривать, допустимо использовать как для Html элементов LI, так и для элементов Ul и Ol (маркированный и нумерованный списки, соответственно). В чем будет разница применения list-style для этих тегов?
Собственно, узнать, наследуется ли свойство или нет, можно на сайте валидатора (читайте про по приведенной ссылке) в разделе посвященном спецификации таблиц каскадных стилей. В столбце «Inherited» напротив наследуемых правил будет стоять «Yes»:
Давайте начнем с list-style-type , которое позволяет задать тип маркирации для отдельных элементов Html списка. Для этого правила допустимы следующие значения:
Как вы думаете, с помощью каких элементов Ul или Ol был создан расположенный чуть выше список? Вопрос на засыпку. Оказывается, что это уже не важно, хотя в данном конкретном случае я использовал Ol, но изменив его на Ul — внешний вид останется прежним, ибо он задается для каждого элемента своим значением CSS правила list style type.
По сути Ul и Ol отличаются только поведением по умолчанию (Ul — маркирует, а Ol — нумерует). Но если вы захотите, то сможете легко превратить один вид списка в другой с помощью list-style-type. Шрифт для маркирования цифрами или буквами используется точно такой же, какой был вами определен для содержимого тегов LI. Например, поменяв цвет шрифта для списка мы поменяем и цвет маркеров :
Давайте перейдем с следующему CSS свойству — list-style-position . С помощью него можно задать позицию (размещение) области с маркером. Для него предусмотрено всего два варианта значений:
Т.е. по сути в list-style-position мы указываем, где нужно размещать область с маркерам — за пределами элемента LI (outside) или внутри него (inside). По умолчанию область с маркером выносится за пределы, т.е. используется значение outside.
Давайте посмотрим это на примере. В первом элементе списка я специально пропишу list-style-position:inside и мы посмотрим, что из этого выйдет:
Далее у нас на очереди 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 - инструменты блочной верстки
Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка
Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши
Position (absolute, relative и fixed) - способы позиционирования Html элементов в CSS (правила left, right, top и bottom)
CSS свойства text-decoration, vertical-align, text-align, text-indent для оформления текста в Html
Здравствуйте, уважаемые читатели блога сайт. Сегодня будет очередная статья о свойствах каскадных таблиц стилей. В ней речь пойдет об оформлении с помощью правил CSS.
Вообще списки среди блочных элементов стоят особняком. Это связано с тем, что они включают в себя маркеры и нумерацию, которые расставляет сам браузер.
В языке 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|lower-roman|upper-roman|lower-greek|lower-alpha|lower-latin|upper-alpha|upper-latin|armenian|georgian|none|inherit
Как видно, свойство list-style-type имеет много доступных значений, которые могут задавать как вид маркера, так и различные виды нумерации.
Так примерно будут выглядеть элементы списка в браузере с различными значениями 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:
Следующее свойство CSS list-style является сборным для оформления списков. Оно позволяет записать все три рассмотренных выше CSS правила в одно единое. Порядок указания значений в нем может быть любым и параметры, которые вы не зададите в list-style браузер возьмет принятые по умолчанию.
Разделять значения в сборном правиле list-style следует пробелами:
list-style: list-style-type list-style-image list-style-position;
Реальное CSS правило для оформления списков может выглядеть примерно вот так:
list-style: circle url (http://сайт/images/marker.png) outside;
Таким образом свойство list-style позволяет значительно сократить объем кода, ведь вместо трех правил достаточно задать лишь одно.
Как уже говорилось выше, значения можно указывать в любом порядке и любом количестве. Так, например, для того чтобы убрать маркеры из списка меню достаточно записи:
list-style: none;
Тоже самое можно сделать используя свойство list-style-type:
list-style-type: none;
На этом рассказ об оформлении html списков при помощи каскадных таблиц стилей я закончу. Чтобы узнать о других CSS свойствах вы можете почитать статьи из раздела « » и не забудьте подписаться на обновления блога . До новых встреч!
Внешний лист стилей позволяет сконцентрировать информацию о форматировании сайта в одном файле. Для того, чтобы сослаться на внешний лист стилей css надо в теле
после заголовка
Атрибут href указывает путь к файлу внешнего листа стилей. Данную строку надо прописывать в тексте всех Вэб-страниц, где надо использовать внешний лист стилей.
Таким образом, изменения, вносимые в файл style.css, сразу отображаются на всех страницах, ссылающихся на этот файл.
Если надо применить какой-либо стиль частным образом, по отношению к отдельному экземпляру дескриптора, то для этого надо воспользоваться атрибутом STYLE. Такой прием позволяет воспользоваться всеми преимуществами, предоставляемыми стилями, избегая обязанности создавать листы стилей. Частное использование стилей можно пользовать даже в том случае, если страница уже содержит внутренний или ссылку на внешний лист стилей, т.к. частный стиль имеет наивысший приоритет.
Пример:
Если надо применить стиль к отдельному элементу Вэб-страницы, то надо воспользоваться атрибутом ID.
Для этого надо нужному тэгу элемента страницы назначить идентификатор. После этого можно определить во внутреннем или внешнем листе стилей свойства данного элемента. Заданные признаки форматирования будут установлены только для элемента, отмеченного указанным идентификатором.