list-style-type в CSS


Свойство CSS list-style-type

Описание и использование

Свойство CSS list-style-type определяет тип маркера пункта списка.

Значение по умолчанию disc
Наследование да
Версия CSS CSS 1
Синтаксис JavaScript object.style.listStyleType=»square»

Поддержка в браузерах

Свойство list-style-type поддерживается всеми основными браузерами.

Заметка: Ни одная версия Internet Explorer (включая IE8) не поддерживает значения свойства «decimal-leading-zero», «lower-greek», «lower-latin», «upper-latin», «armenian», «georgian» или «inherit».

list-style-type

Поддержка браузерами

12.0+ 4.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

CSS свойство list-style-type указывает вид маркера для элементов списка. Оно позволяет изменить или убрать маркеры HTML списка.

Для маркированных списков в CSS есть всего три вида маркеров: circle , disk и squred . Остальные значения свойства list-style-type предназначены для нумерованных списков.

Чтобы убрать маркеры у списка, то есть получить список без маркеров, надо в качестве значения для свойства list-style-type указать none . Для изменения маркеров у списка, надо просто выбрать любое значение, отличное от значения по умолчанию:

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

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

CSS-свойство List

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

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

list-style-type

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

Стандартное значение этого свойства – disc , но можно использовать и другие значения: circle , square , none . Кроме этого можно использовать такие значения, как upper-alpha , lower-alpha , upper-roman , lower-roman , decimal и т. д.

В приведенном ниже примере свойство list-style-type имеет значение square :

Если вам вообще не нужны маркеры, то CSS list style type необходимо присвоить значение none :

Поля и отступы

Чтобы добавить в список отступы, можно использовать свойство margin .

В приведенном ниже примере использования CSS ul li list style мы прибавляем поля по 30px над и под списком:

В следующем примере мы полностью исключаем поля:

В примере CSS ul list style мы убираем отступы:

Здесь мы задаем списку фиксированную ширину:

List-style-position

Это свойство отвечает за то, как текст внутри list style CSS будет переходить на следующую строку. Стандартное значение outside означает, что при переносе строки текст также получит выравнивание по левому краю. Если выставлено значение inside , то строка будет перенесена под маркер списка.

В примере, приведенном ниже, представлен список, в котором свойство list-style-position выставлено на outside ( значение по умолчанию ):

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

List-style-image

Свойство list-style-image позволяет использовать собственную пиктограмму в качестве маркера.

В примере CSS ul list style мы используем изображение звезды вместо маркера списка:

Сокращение list-style

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

Список inline

По умолчанию, все пункты списка перечисляются с новой строки, то есть, вертикально. Если нужно выводить список горизонтально или строчно ( inline ), нужно присвоить элементам списка display inline .

В приведенном ниже примере представлен строчный список:

Стилизация упорядоченного списка

Теперь пришло время задать стиль для CSS ol list style . По умолчанию, list-style-type для упорядоченного списка установлен при помощи десятичного числа:

Чтобы изменить тип, можно поменять значение на upper-alpha , lower-alpha , upper-roman , lower-roman .

Ниже приведен пример, где list-style-type имеет значение upper-alpha :

В следующем примере list-style-type имеет значение lower-roman :

Данная публикация представляет собой перевод статьи « CSS List » , подготовленной дружной командой проекта Интернет-технологии.ру

CSS list-style-type

Свойство list-style-type позволяет указать маркер. Используется только в случае, когда list-style-image установлен в none .


Возможные значения:

none — без маркера

armenian — армянская нумерация

decimal — Арабские числа (1, 2, 3, 4, 5, …).

decimal-leading-zero — Арабские числа с нулем впереди, если число меньше десяти (01, 02, 03,…).

georgian — традиционная грузинская нумерация.

lower-alpha — маленькие (строчные) латинские буквы (a, b, c, d,…).

lower-greek — строчные греческие буквы (α, β, γ, δ,…).

lower-latin — маленькие (строчные) латинские буквы (a, b, c, d,…).

lower-roman — маленькие (строчные) римские числа (i, ii, iii, iv, v,…).

upper-alpha — Прописные латинские буквы (A, B, C, D,…).

upper-latin — Прописные латинские буквы (A, B, C, D,…).

upper-roman — Прописные римские числа (I, II, III, IV, V,…).
Значение по умолчанию: disc для неупорядоченного списка, decimal для упорядоченного списка.

CSS для списков: свойство list-style и его производные

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

Илон Маск рекомендует:  Контейнеры html документа

List-style-type: изменение маркера / нумерации

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

Вид маркера / нумерации Подходящее значение
Маркер-точка (по умолчанию) disc
Маркер-окружность circle
Маркер-квадрат square
Нумерация арабскими цифрами (по умолчанию) decimal
Нумерация арабскими цифрами (перед числами 1-9 добавляется 0) decimal-leading-zero
Нумерация прописными буквами латинского алфавита upper-latin
Нумерация строчными буквами латинского алфавита lower-latin
Наследование значений родителя inherit
Удаление маркеров / нумерации none

Примечание: в таблице приведены только основные значения. Более обширный список (грузинская и армянская нумерации, нумерация римскими числами, греческими буквами и т. д.) доступен здесь.

Пример написания кода CSS:

Скриншот: варианты маркеров / нумерации списков

List-style-image: маркер-картинка

Помимо вышеперечисленных маркеров можно установить свои графические маркеры, используя файл с необходимым изображением. Для этого вам понадобится свойство CSS list-style-image и значение с указанием адреса URL картинки. Пример записи стиля:

Скриншот: примеры собственных графических маркеров

List-style-position: расположение маркеров / нумерации

Для CSS свойства list-style-position, которое задает расположение маркеров / нумерации относительно текста, есть два значения – outside и inside . По умолчанию используется значение outside – это значит, что маркер / число отображается как бы отдельно от текста списка, тогда как при значении inside маркер / число располагается внутри текстового блока и обтекается текстом.

Ниже показан пример записи стиля:

Скриншот для лучшего понимания значений outside и inside

List-style: все вместе

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

Далее в учебнике: что такое блоки.

List style ( type, image, position) — Css правила для настройки внешнего вида списков в Html коде

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

Чуть раньше мы уже успели узнать как задается фон через background, как оформляется текст с помощью text-decoration, vertical-align, align и indent и как можно работать со шрифтами с помощью Font (Weight, Family, Size, Style). Ну, а еще чуть раньше мы во всех подробностях рассмотрели всевозможные селекторы CSS и их различные комбинации для указания именно того элемента Html кода, для которого нужно будет применить определенные свойства стилевого оформления.

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

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

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

Если прописать его только для конкретного элемента списка LI, то, соответственно, оно только для него и применится (либо вообще для всех элементов LI). А если аналогичное правило прописать для контейнеров Ul или Ol, то оно применится для всех тегов LI заключенных в этих контейнерах. Т.е. оно перейдет к элементу LI по наследству (читайте более подробно про наследование в CSS).

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

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

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

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

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

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

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

Илон Маск рекомендует:  Познакомьтесь, флексбоксы!

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

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

  1. Здесь все по умолчанию
  2. Вот так будет выглядеть размещение области маркера с ins >


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

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

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

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

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

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

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

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

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

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

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

List-style-type

The CSS list-style-type is used when the author wishes to change the default appearance of list-markers in HTML list structures. If a list-style-image property is also given and it has a value of none or the URL can not be loaded, the list-style-type property value will be used in its place. This property should always be specified in the event the URL pointed to in list-style-image can not be loaded. If a value for this property is not understood, the value decimal should be used.

list-style-type

Свойство CSS list-style-type используется для указания внешнего вида маркера или типа нумерации в упорядоченных (нумерованных) и неупорядоченных (маркированных) списках.

Вместо list-style-type можно использовать универсальное свойство list-style.

Тип свойства

Применяется: к тегам , , и элементам с display: list-item .

Значения

Значением свойства list-style-type является одно из ключевых слов, задающее внешний вид маркера или тип нумерации.

Значения для маркированного списка

disc Маркер в виде кружка
  • Ниф-Ниф
  • Нуф-Нуф
  • Наф-Наф
circle Маркер в виде окружности
  • Ниф-Ниф
  • Нуф-Нуф
  • Наф-Наф
square Маркер в виде квадрата
  • Ниф-Ниф
  • Нуф-Нуф
  • Наф-Наф
Значения для нумерованного списка
decimal Нумерация обычными арабскими числами
  • Ниф-Ниф
  • Нуф-Нуф
  • Наф-Наф
decimal-leading-zero Нумерация арабскими числами с начальными нулями
  • Ниф-Ниф
  • Нуф-Нуф
  • Наф-Наф
upper-roman Римские числа написанные заглавной латиницей
  • Ниф-Ниф
  • Нуф-Нуф
  • Наф-Наф
lower-roman Римские числа написанные строчной латиницей
  • Ниф-Ниф
  • Нуф-Нуф
  • Наф-Наф
upper-latin Заглавные латинские буквы
  • Ниф-Ниф
  • Нуф-Нуф
  • Наф-Наф
lower-latin Строчные латинские буквы
  • Ниф-Ниф
  • Нуф-Нуф
  • Наф-Наф
upper-alpha Заглавные латинские буквы (аналогично upper-latin)
  • Ниф-Ниф
  • Нуф-Нуф
  • Наф-Наф
lower-alpha Строчные латинские буквы (аналогично lower-latin)
  • Ниф-Ниф
  • Нуф-Нуф
  • Наф-Наф
armenian Традиционная армянская нумерация
  • Ниф-Ниф
  • Нуф-Нуф
  • Наф-Наф
georgian Традиционная грузинская нумерация
  • Ниф-Ниф
  • Нуф-Нуф
  • Наф-Наф
lower-greek Нумерация греческими строчными буквами
  • Ниф-Ниф
  • Нуф-Нуф
  • Наф-Наф
  • none — Убирает маркеры или нумерацию у списка.
  • inherit — наследует значение list-style-type от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: decimal для нумерованных списков, disc для маркированных.

Синтаксис

Пример CSS: использование list-style-type

Результат. Использование свойства CSS list-style-type.

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Да Да Да Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и 7.0 8.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Частично Да Да Да Да Да

Internet Explorer 6.0 и 7.0 не понимают значение inherit , а также значения: decimal-leading-zero , upper-latin , lower-latin , armenian , georgian и lower-greek .

CSS Свойство list-style-type

Пример

Установить различные типы списков:


ul.circle ul.square ol.upper-roman ol.lower-alpha

Попробуйте сами »

Еще примеры внизу этой страницы.

Определение и Использование

Свойство list-style-type указывает тип маркеров пунктов в списке.

Значение по умолчанию: «disc» для
    и «decimal» для
Наследуется: да
Версия: CSS1
JavaScript синтаксис: объект.style.listStyleType=»square»

Поддержка Браузерами

Свойство list-style-type поддерживается всеми основными браузерами.

Замечание: IE9 и Opera 11 не поддерживают: cjk-ideographic, hebrew, hiragana, hiragana-iroha, katakana и katakana-iroha.

Замечание: IE8 и более ранние версии поддерживают только свойства: decimal-leading-zero, lower-greek, lower-latin, upper-latin, armenian, georgian, и inherit, если указано объявление DOCTYPE!

Значения Свойства

Значение Описание
armenian Маркеры — традиционная Армянская нумерация
circle Маркер — окружность
cjk-ideographic Маркеры — простые идеографические числа
decimal Маркер — число. Используется по умолчанию для
decimal-leading-zero Маркер — число с нулем впереди (01, 02, 03, и т.д.)
disc Маркер — круг. Используется по умолчанию для
georgian Маркеры — традиционная Грузинская нумерация
hebrew Маркеры — традиционная Еврейская нумерация
hiragana Маркеры — традиционная нумерация Хирагана
hiragana-iroha Маркеры — традиционная нумерация Хирагана ироха
inherit Значение свойства наследуется от родительского элемента
katakana Маркеры — традиционная нумерация Катакана
katakana-iroha Маркеры — традиционная нумерация Катакана ироха
lower-alpha Маркеры — символы алфавита в нижнем регистре (a, b, c, d, e, и т.д.)
lower-greek Маркеры — символы греческого алфавита в нижнем регистре
lower-latin Маркеры — символы латинского алфавита в нижнем регистре (a, b, c, d, e, и т.д.)
lower-roman Маркеры — римские числа в нижнем регистре (i, ii, iii, iv, v, и т.д.)
none Маркер не отображается
square Маркер — квадрат
upper-alpha Маркеры — символы алфавита в верхнем регистре (A, B, C, D, E, и т.д.)
upper-latin Маркеры — символы латинского алфавита в верхнем регистре (A, B, C, D, E, и т.д.)
upper-roman Маркеры — римские числа в верхнем регистре (I, II, III, IV, V, и т.д.)

Попробуйте сами — Примеры

Всевозможные маркеры пунктов списка
Этот пример демонстрирует всевозможные маркеры пунктов списка.

CSS list-style-type

The CSS list-style-type property is used for specifying the «list style type» (how list item markers should be styled).

You can specify the list style type as one of the predefined counter styles (e.g., a disc, square, roman numerals, etc) or you can use your own customized counter style. You can create your own custom counter style with the @counter-style at-rule, then refer to that style in list-style-type by simply adding that counter style’s name as the value for list-style-type .

You can also prov >string as the value (the string becomes the marker) or use the symbols() function as a quick way to add a custom marker style.

Syntax

These values are explained below.

Possible Values

Specifies a counter style to use for the marker’s default contents. A counter style can be defined using the @counter-style at-rule, the symbols() function, or one of the CSS predefined counter styles.

Here’s an overview of each one.

The At-Rule

The @counter-style at-rule allows you to create your own custom counter markers. You can get very specific about how the marker looks and how it is used.

It allows you to name the counter styles so you can use them multiple times throughout the style sheet simply by referring to the style’s name.

Here’s an example:

This could result in a list that looks something like this:

An unordered list using Unicode emojis of apples for bullets.

The Function

The symbols() function is like a stripped down version of the @counter-style at-rule. The symbols() function allows you to create a custom style right from within the property value itself.

This is useful if you only need to use the style once. There’s no need to name your counter style, as it only applies to the property that you’re using it with.

Here’s the same list from the previous example, but this time we use the symbols() function to generate the counter styles:

And here’s the result:

An unordered list using Unicode emojis of apples for bullets.

Note that the symbols() function doesn’t provide the full feature set that @counter-style provides, so there may be times where you need to use @counter-style instead.

Predefined Counter Styles

Here are the predefined counter styles. These are keywords that represent some of the more common counter styles.

Numeric

The decimal counter style cannot be overridden by the @counter-style at-rule, so it is always available as an ultimate fallback style.

Decimal numbers padded by initial zeros (e.g., 01, 02, 03, . ) Han decimal numbers (e.g., 一, 二, 三, . ) Lowercase ASCII Roman numerals (e.g., i, ii, iii, . ) Uppercase ASCII Roman numerals (e.g., I, II, III, . ) Traditional uppercase Armenian numbering (e.g., Ա, Բ, Գ, . ) Traditional Georgian numbering (e.g., ა, ბ, გ, . ) Traditional Hebrew numbering (e.g., ג, ב, א, . )

Alphabetic
Symbolic

For example, disclosure-open might use the U+25B8 character (▸) and disclosure-closed might use the U+25BE character (▾).

Longhand East Asian Counter Styles

Specifies a string to be used as the list item’s marker’s default contents. A string is character data surrounded with either single ( ‘ ) or double ( » ) quote characters.

Here’s an example:

When the above CSS is applied to the list, the list should appear something like this:

An unordered list with the string «Don’t forget to » applied to the marker representation.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Илон Маск рекомендует:  Что такое код fbsql_field_flags
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL