Главная » Языки программирования

Маркер к ссылке css

На чтение 9 мин
Содержание
  1. CSS list-style-type Property
  2. Browser Support
  3. CSS Syntax
  4. Property Values
  5. More Examples
  6. Example
  7. Example
  8. Свойства списков
  9. list-style-type
  10. Значения
  11. Маркированный список
  12. Нумерованный список
  13. Объектная модель
  14. Браузеры
  15. CSS по теме
  16. : : marker
  17. Кратко
  18. Пример
  19. Как пишется
  20. Как понять
  21. Элемент списка
  22. Маркеры
  23. Свойства применяемые к маркерному полю
  24. Свойства, применяемые к содержимому маркерного поля
  25. Генерация содержимого маркера
  26. На практике
  27. Алексей Степанов советует

CSS list-style-type Property

The list-style-type specifies the type of list-item marker in a list.

Default value: disc
Inherited: yes
Animatable: no. Read about animatable
Version: CSS1
JavaScript syntax: object.style.listStyleType=»square» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Note: Edge 18 and Opera 12 and earlier versions do not support the values: cjk-ideographic, hebrew, hiragana, hiragana-iroha, katakana, and katakana-iroha.

CSS Syntax

Property Values

Value Description Demo
disc Default value. The marker is a filled circle Demo ❯
armenian The marker is traditional Armenian numbering Demo ❯
circle The marker is a circle Demo ❯
cjk-ideographic The marker is plain ideographic numbers Demo ❯
decimal The marker is a number Demo ❯
decimal-leading-zero The marker is a number with leading zeros (01, 02, 03, etc.) Demo ❯
georgian The marker is traditional Georgian numbering Demo ❯
hebrew The marker is traditional Hebrew numbering Demo ❯
hiragana The marker is traditional Hiragana numbering Demo ❯
hiragana-iroha The marker is traditional Hiragana iroha numbering Demo ❯
katakana The marker is traditional Katakana numbering Demo ❯
katakana-iroha The marker is traditional Katakana iroha numbering Demo ❯
lower-alpha The marker is lower-alpha (a, b, c, d, e, etc.) Demo ❯
lower-greek The marker is lower-greek Demo ❯
lower-latin The marker is lower-latin (a, b, c, d, e, etc.) Demo ❯
lower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.) Demo ❯
none No marker is shown Demo ❯
square The marker is a square Demo ❯
upper-alpha The marker is upper-alpha (A, B, C, D, E, etc.) Demo ❯
upper-greek The marker is upper-greek Demo ❯
upper-latin The marker is upper-latin (A, B, C, D, E, etc.) Demo ❯
upper-roman The marker is upper-roman (I, II, III, IV, V, etc.) Demo ❯
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

This example demonstrates all the different list-item markers:

Example

    or
    by removing their default bullets and adding a HTML entity that looks like bullets (•):

ul <
list-style: none; /* Remove list bullets */
padding: 0;
margin: 0;
>

li::before content: «•»; /* Insert content that looks like bullets */
padding-right: 8px;
color: blue; /* Or a color you prefer */
>

Читайте также:  Doctype html css height

Источник

Свойства списков

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

В табл. 1 перечислены свойства элементов, предназначенных для создания и изменения списков.

Табл. 1. Свойства CSS для управления видом списка

Свойство Значение Описание Пример
list-style-type disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none		 Вид маркера. Первые три используются для создания маркированного списка, а остальные — для нумерованного. LI
LI
list-style-image none
URL		 Устанавливает символом маркера любую картинку. LI
list-style-position outside
inside		 Выбор положения маркера относительно блока строк текста. LI
list-style Универсальное свойство, включает одновременно все вышеперечисленные свойства.

    или
    , который выступает в качестве его родителя, то можно устанавливать стиль как для селектора UL , так и для селектора LI . Так, в примере 1 используется селектор UL , для него и задаются стилевые параметры.

Пример 1. Создание маркированного списка

Результат данного примера показан на рис. 1. Используются квадратные маркеры и их внешнее размещение относительно текста.

Вид списка, измененого с помощью стилей

Рис. 1. Вид списка, измененого с помощью стилей

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

Пример 2. Использование изображений в качестве маркера

Результат данного примера показан на рис. 2. В качестве маркеров используется маленькая картинка.

Изображения в качестве маркеров

Рис. 2. Изображения в качестве маркеров

Некоторые примеры создания различных списков приведен в табл. 2.

  • работоспособность всех ссылок
  • поддержку разных браузеров
  • читабельность текста
  • работоспособность всех ссылок
  • поддержку разных браузеров
  • читабельность текста
  • работоспособность всех ссылок
  • поддержку разных браузеров
  • читабельность текста

Нумерованный список с арабскими цифрами:

Нумерованный список со строчными римскими цифрами:

Нумерованный список с заглавными римскими цифрами:

Нумерованный список со строчными буквами латинского алфавита:

Нумерованный список с заглавными буквами латинского алфавита:

Источник

list-style-type

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 | inherit

Значения

Значения зависят от того, к какому типу списка они применяются: маркированному или нумерованному.

Маркированный список

Нумерованный список

armenian Традиционная армянская нумерация. decimal Арабские числа (1, 2, 3, 4. ). decimal-leading-zero
Арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03. ). georgian Традиционная грузинская нумерация. lower-alpha Строчные латинские буквы (a, b, c, d. ). lower-greek Строчные греческие буквы (α, β, γ, δ. ). lower-latin Это значение аналогично lower-alpha . lower-roman Римские числа в нижнем регистре (i, ii, iii, iv, v. ). upper-alpha Заглавные латинские буквы (A, B, C, D. ). upper-latin Это значение аналогично upper-alpha . upper-roman Римские числа в верхнем регистре (I, II, III, IV, V. ). none Отменяет маркеры для списка. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

  1. Lorem ipsum dolor sit amet
  2. Consectetuer adipiscing elit
  3. Sed diem nonummy nibh euismod
  4. 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.

Применение свойства list-style-type

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

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

[window.]document.getElementById(» elementID «).style.listStyleType

Браузеры

    и значения inside свойства list-style-position , числа идущие с 10, начинают накладываться на текст списка.

Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения armenian , decimal-leading-zero , georgian , lower-greek , lower-latin , upper-latin , inheirt . Вместо них выводится нумерация арабскими числами. В этом браузере нумерация или маркеры не отображаются для плавающих элементов ( ul < float: left; >).

Internet Explorer 8 дополнительно понимает значение upper-greek , которое устанавливает нумерацию в виде заглавных греческих букв (Α, Β, Γ, Δ. ).

CSS по теме

Источник

: : marker

Псевдоэлемент для работы с маркерами элементов списка.

Время чтения: меньше 5 мин

Обновлено 28 сентября 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

: : marker — псевдоэлемент, отвечающий за маркерное поле. В нём находятся, например, маркеры списка.

Пример

Скопировать ссылку «Пример» Скопировано

 li::marker  color: #2e9aff;> li::marker  color: #2e9aff; >

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 li::marker  color: #2e9aff;> li::marker  color: #2e9aff; >

Псевдоэлемент : : marker работает только на элементах списка.

💡 Для обратной совместимости с CSS 2 браузеры позволяют писать некоторые псевдоэлементы с одним двоеточием, например: : : before , : : after , : : first — letter , : : first — line . Однако псевдоэлемент : : marker необходимо указывать с двумя двоеточиями.

Как понять

Скопировать ссылку «Как понять» Скопировано

Элемент списка

Скопировать ссылку «Элемент списка» Скопировано

Маркеры

Скопировать ссылку «Маркеры» Скопировано

Псевдоэлемент : : marker — это маркерное поле в котором находится маркер. Маркер может представлять из себя символ или порядковый номер.

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

Элементы списка автоматически создают псевдоэлемент : : marker , никакие другие элементы этого не делают.

Содержимым этого маркерного поля можно управлять с помощью свойств:

Также есть шорткат list — style , который даёт возможность задать значения для всех этих свойств одновременно.

Свойства применяемые к маркерному полю

Скопировать ссылку «Свойства применяемые к маркерному полю» Скопировано

Только следующие CSS-свойства применяются к маркерному полю:

  • свойства text — combine — upright , unicode — bidi и direction ;
  • свойство content ;
  • все свойства анимации и переходов.

Ожидается, что в будущих спецификациях этот маленький список свойств будет расширен. А пока обходимся тем, что есть.

Свойства, применяемые к содержимому маркерного поля

Скопировать ссылку «Свойства, применяемые к содержимому маркерного поля» Скопировано

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

В Safari на данный момент псевдоэлемент : : marker поддерживается не полностью. Нормально работает только свойство color и свойства для работы с текстом. Точно не работают свойства content и direction . А также отсутствует поддержка анимаций и переходов.

Помимо Safari, анимации и переходы не поддерживаются в Firefox на Android.

Генерация содержимого маркера

Скопировать ссылку «Генерация содержимого маркера» Скопировано

Если вы попробуете создать и стилизовать псевдоэлемент : : marker для элемента, у которого свойство display не равно display : list — item , то ничего не выйдет, маркерное поле не создастся.

Воссоздадим искусственный ненумерованный список и попробуем стилизовать псевдоэлемент : : marker элементов :

   
первый элемент псевдосписка
 
второй элемент псевдосписка
 
третий элемент псевдосписка
  div class="unordered-list"> p class="list-item">первый элемент псевдоспискаp> p class="list-item">второй элемент псевдоспискаp> p class="list-item">третий элемент псевдоспискаp> div>      
 .list-item::marker  content: "🌵";> .list-item::marker  content: "🌵"; >

Как видно, маркеры в виде кактусов не появились.

Однако, если указать элементам

значение display : list — item :

 .list-item  display: list-item;> .list-item  display: list-item; >

Псевдоэлемент : : marker элемента списка встаёт перед псевдоэлементом : : before , если он существует в элементе.

Возьмём демку, которая демонстрировалась выше, но немного изменим её CSS:

 .list-item::marker  content: "🌚";> .list-item::before  content: "🌝 ";> .list-item::marker  content: "🌚"; > .list-item::before  content: "🌝 "; >

Браузер решает как в итоге будет выглядеть : : marker по порядку проверяя следующие условия:

  1. Будет отображаться указанное значение если свойство content на псевдоэлементе : : marker отличается от значения по умолчанию ( normal ).
  2. Будет отображаться указанное изображение если применено свойство list — style — image на элементе списка.
  3. Будет отображаться маркер в виде строки если применено свойство list — style — type на элементе списка.
  4. Если ничего из выше перечисленного не выполняется, псевдоэлемент : : marker не создаст поле.

На практике

Скопировать ссылку «На практике» Скопировано

Алексей Степанов советует

Скопировать ссылку «Алексей Степанов советует» Скопировано

🛠 К сожалению, из-за того, что на данный момент свойств для изменения маркерного поля достаточно мало, его не получится как-то по-особому стилизовать. Например, в первой демке в начале доки фактически не используется псевдоэлемент : : marker . Синие маркеры в виде квадратиков сделаны в псевдоэлементе : : before через position : absolute с указанием свойств width и heigth и свойства background — color , данные свойства псевдоэлемент : : marker не поддерживает.

 li  color: #2e9aff;> li::marker  color: #f498ad; font-weight: bold;> li  color: #2e9aff; > li::marker  color: #f498ad; font-weight: bold; >

Или вы можете стилизовать маркер конкретного элемента списка, например, комбинируя псевдоэлемент : : marker с псевдоклассом last — of — type :

 li::marker  color: aquamarine;> li:last-of-type::marker  color: tomato;> li::marker  color: aquamarine; > li:last-of-type::marker  color: tomato; >

    . Также можно влиять и на элементы списка
    при помощи счётчиков в CSS.

Источник

Оцените статью
© 2023 Программирование