list-style в CSS


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

Свойство list-style — это сокращенное свойство для одновременного установления свойств list-style-image, list-style-position, list-style-type.

Можно установить все свойства в следующем порядке: 1- list-style-type, 2- list-style-position, 3- list-style-image.

Свойство 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 при этом используется для того, чтобы убрать маркеры из списков меню, которые там совершенно не нужны:

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

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

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, можно записать все вышеперечисленное в одной строке – то есть, сразу же задать вид маркеров / нумерации и их расположение относительно текста. Такой код будет более кратким и удобным. Ниже показано два примера, как пишется подобный стиль:

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

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


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

Устанавливает за одну декларацию следующие свойства (в соответствующем порядке): list-style-type, list-style-position, list-style-image.

Если какое-либо из этих свойств не задано, например, «list-style:circle inside;«, то будет использовано значение по умолчанию.

CSS синтаксис

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

Значение Описание
list-style-type Тип маркера списка.
list-style-position Положение маркера списка.
list-style-image Изображение маркера списка.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

Устанавливаем стиль списка за одну декларацию

Правила CSS для настройки внешнего вида списка на html странице. Свойство list style (type, image, position)

Здравствуйте, уважаемые читатели блога webcodius.ru. Сегодня будет очередная статья о свойствах каскадных таблиц стилей. В ней речь пойдет об оформлении нумерованных и маркированных списков HTML с помощью правил 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 убирает маркер изображение и устанавливает обычный, не графический. Это поведение по умолчанию.

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

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

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

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


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

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

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

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

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

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

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

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

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

list-style: circle url (//webcodius.ru/images/marker.png) outside;

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

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

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

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

list-style

Easily manage projects with monday.com

The list-style property is a shorthand property that sets values for three different list-related properties in one declaration:

Here’s an example of the syntax:

Which would be the same as the following longhand version:

In the shorthand, if any values are omitted, they will revert to their initial state.

Values for list-style-type

The list-style-type property defines the type of list by setting the content of each marker, or bullet, on the list. Acceptable keyword values for list-style-type include:

  • disc
  • circle
  • square
  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-greek
  • lower-latin
  • upper-latin
  • armenian
  • georgian
  • lower-alpha
  • upper-alpha
  • none

Non-keyword values are introduced in CSS3, but there is little, if any, browser support for them.

The following demo includes a group of unordered lists to demonstrate each keyword value:


The list-style-type property applies to all lists, and to any element that is set to display: list-item .

The color of the list marker will be whatever the computed color of the element is (set via the color property).

Values for list-style-position

The list-style-position property defines where to position the list marker, and it accepts one of two values: «inside» or «outside». These are demonstrated below with padding removed from the lists and a left red border added:

Values for list-style-image

The list-style-image property determines whether the list marker is set with an image, and accepts a value of «none» or a URL that points to the image:

More Demo

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works Works Works Works Works Works Works

IE6/7 don’t support all the keyword values for list-style-type and also have a bug where floated list items do not display their list marker. This is resolved by using a background image (instead of list-style-image ) on the list items.

List-style в CSS

Привет! В этой статье мы поговорим о стилизации списков, а именно о свойстве list-style.

Если Вам надо освежить в памяти, что такое списки в HTML, и каких типов они бывают — вернитесь к этой статье:

Стилизация маркеров списков

Как видите, слева от пунктов списка, есть так называемые маркеры. В первом пример — в виде черных кружочков. Во втором — в виде черных квадратиков.

Так вот, с помощью 3-х свойств можно менять внешний вид маркеров. Эти свойства:

  • list-style-type — задает вид маркера (кружочек, квадратик, римские числа и т.д.)
  • list-style-position — задает положение маркера относительно текста списка
  • list-style-image -задает какое-то изображение в виде маркера

Ниже мы рассмотрим каждое свойство по порядку.

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

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

Для ненумерованных списков (

    ):

list-style-type: circle — «пустые кружочки». Например:

list-style-type: disc — «зарисованные кружочки». Например:

list-style-type: square — квадратный маркер. Например:

Для нумерованных списков (

    ):


decimal — «стандартная» нумерация (1, 2, 3 . )

upper-alpha — большие латинские буквы (A, B, C . )

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

upper-roman — римская нумерация (I, II, III, IV, V. ).

lower-roman — римская нумерация (i, ii, iii, iv, v. ).

Например, попробуйте создать ненумерованный список и в CSS прописать следующее:

О формление списков: List-style

С войство LIST-STYLE

Свойство Значения Пр* Нc*
list-style [ list-style-image; list-style-position; list-style-type ], inherit * +
list-style-type disk , circle, square, decimal, decimal-leading-zero, lowel-roman, upper-roman, lowel-latin, upper-latin, armenian, georgian, none, inherit * +
list-style-position inside, outside , inherit * +
list-style-image URL, none , inherit * +

Свойство List-style — сокращённая форма записи свойств, которые задают все стили маркеров для элементов списка. Эти свойства применяются, как к нумерованным, так и маркированным спискам — их нужно рассматривать по отдельности. Сокращённая форма записи может не включать какое-либо отдельное свойство, но порядок их записи должен соблюдаться: тип маркера — его позиция — путь к изображению.

Область применения *: элементы списков и любые другие, для которых значением свойства Display является list-item.

List-style-type

Свойство устанавливает тип маркера для каждого элемента списка. Типы маркеров различаются для маркированных и нумерованных списков.

disk — маркер-точка.
circle — маркер-кружок.
square — маркер-квадратик.
decimal — арабские числа: 1, 2, 3 ….
decimal-leading-zero — арабские числа, начиная с нуля: 01, 02, 03 … 09.
lowel-roman — римская нумерация в нижнем регистре.
upper-roman — римская нумерация в верхнем регистре.
lowel-latin — строчные латинские буквы: a, b, c ….
upper-latin — заглавные латинские буквы: A, B, C ….
armenian — армянская нумерация.
georgian — грузинская нумерация.
none — отмена.
inherit — наследование от родительского элемента.

В примере используется два разных значения свойства List-style-type:

List-style-position

Свойство определяет расположение маркера элемента. Либо маркер находится внутри элемента, либо за его пределами.

inside — маркер располагается внутри элемента списка.
outside — маркер вынесен за пределы текстового блока.
inherit — наследование от родительского элемента.

В примере наглядно видна разница между значениями inside и outside свойства List-style-position:

List-style-image

Свойство задает путь к картинке, которая будет служить маркером элемента нумерованного или маркированного списка. Расположением картинки-маркера можно управлять при помощи свойства List-style-position.

URL — путь к графическому файлу.
none — отменяет картинку-маркер, например, для родительского элемента.
inherit — наследование от родительского элемента.

В примере мы использовали в качестве маркера картинку небольшого размера, что наглядно демонстрирует возможности свойства List-style-image:

Стиль списка.

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

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

      — изложенная в учебнике HTML глава 9 «Списки» — рекомендую освежить в голове информацию о данных элементах, прежде чем приступать к работе.

Ну а если в голове и так свежо тогда начнем!


Вид маркера в списке.

Если Вы помните, то в чистом HTML вид маркера в списке определял атрибут type и одно из его возможных значений, в CSS данную задачу берёт на себя свойство: list-style-type которое, в свою очередь, тоже имеет свои стандартные значения определяющие вид маркера как всего списка сразу, так и его отдельного «пункта».

  • disc — Диск. (по умолчанию для )
  • circle — Полый круг.
  • square — Квадрат.
  • decimal — Арабские цифры. (по умолчанию для )
  • lower-roman — Строчные римские цифры.
  • lower-alpha — Строчные буквы.
  • upper-roman — Заглавные римские цифры.
  • upper-alpha — Заглавные буквы.
  • none — Маркер отсутствует.

list-style

Easily manage projects with monday.com

The list-style property is a shorthand property that sets values for three different list-related properties in one declaration:

Here’s an example of the syntax:

Which would be the same as the following longhand version:

In the shorthand, if any values are omitted, they will revert to their initial state.

Values for list-style-type

The list-style-type property defines the type of list by setting the content of each marker, or bullet, on the list. Acceptable keyword values for list-style-type include:

  • disc
  • circle
  • square
  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-greek
  • lower-latin
  • upper-latin
  • armenian
  • georgian
  • lower-alpha
  • upper-alpha
  • none

Non-keyword values are introduced in CSS3, but there is little, if any, browser support for them.

The following demo includes a group of unordered lists to demonstrate each keyword value:

The list-style-type property applies to all lists, and to any element that is set to display: list-item .

The color of the list marker will be whatever the computed color of the element is (set via the color property).

Values for list-style-position

The list-style-position property defines where to position the list marker, and it accepts one of two values: «inside» or «outside». These are demonstrated below with padding removed from the lists and a left red border added:

Values for list-style-image

The list-style-image property determines whether the list marker is set with an image, and accepts a value of «none» or a URL that points to the image:

More Demo

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works Works Works Works Works Works Works

IE6/7 don’t support all the keyword values for list-style-type and also have a bug where floated list items do not display their list marker. This is resolved by using a background image (instead of list-style-image ) on the list items.

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