Содержание

Маркеры списка в CSS

Маркеры списка в CSS

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

Рассмотрим все основные маркеры.

Простые маркеры

Для этого просто созданим простой маркерованный список через теги <ul> и <li>
  • Пункт 1
  • Пункт 2
  • Пункт 3

В результате получим стандартные списки

  • Пункт 1
  • Пункт 2
  • Пункт 3

Маркер — картинка

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


	ul li{
	    list-style: none; 
	    background: url(assets/img/marker1.png) no-repeat left 50%; 
	    padding-left: 25px;
	}

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

  • Пункт 1
  • Пункт 2
  • Пункт 3

Убрать маркеры списка через css

Чтобы полностью отключить маркеры у списков, добавьте к ним стиль css


	ul li{list-style: none}

И в результате мы не увидим маркеры

  • Пункт 1
  • Пункт 2
  • Пункт 3

Стандартные маркеры в css

Ниже показана таблица в которые вы можете увидить все маркеры, которые задать через язык CSS, а именно через стиль list-style

Возможные варианты списков
Код Пример
<li> Маркер «сплошной кружок»:
  • Пункт 1
  • Пункт 2
  • Пункт 3
<li> Маркер «окружность»:
  • Пункт 1
  • Пункт 2
  • Пункт 3
<li> Маркер «сплошной квадрат»:
  • Пункт 1
  • Пункт 2
  • Пункт 3
<li>

Маркер арабскими цифрами

  1. Пункт 1
  2. Пункт 2
  3. Пункт 3
<li>

Маркер со строчными римскими цифрами:

  1. Пункт 1
  2. Пункт 2
  3. Пункт 3
<li>

Маркер с заглавными римскими цифрами:

  1. Пункт 1
  2. Пункт 2
  3. Пункт 3
<li>

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

  1. Пункт 1
  2. Пункт 2
  3. Пункт 3
<li>

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

  1. Пункт 1
  2. Пункт 2
  3. Пункт 3

Маркер списка CSS

Использовать картинку в качестве маркера списка — непозволительная роскошь по отношению к скорости загрузки страницы, особенно для молодого сайта.

Поэтому я покажу Вам несколько примеров, как можно создать маркер только средствами html и css.

В качестве контейнера для маркера применим одиночный тег <hr>, так как он нормально уживается в списке и не является блочным элементом.

Для того, чтоб код можно было вставить в стили CMS я тегам списка и прямой задал классы. Размеры на ваше усмотрение, у меня всё немного крупнее.

Квадрат Код

  • Список
  • Список

Круг Код

  • Список
  • Список

Треугольник Код

  • Список
  • Список
  • Список
  • Список

Галочка Код

  • Список
  • Список

Сердечко Код Сердечки можно сделать бьющимися. Как — читайте здесь

  • Список
  • Список

Символ Код. В качестве маркера можно использовать любой символ шрифта или спецсимвол.

130

 

 

Квадрат

CSS

.squar {
list-style: none;
font-size: 20px;
}
.square {
width: 10px;
height: 10px;

background: red;
float: left;
margin: 6px 5px 5px 5px;
}

HTML

<ul >
<hr><li>Список</li>
<hr><li>Список</li>
</ul>

Круг

CSS

.circle {
list-style: none;
font-size: 20px;
line-height: 1.3;
}
.disck {
width: 12px;
height: 12px;
float: left;
margin: 7px 5px 0 5px;
border-radius: 50%;
background: radial-gradient(circle, white, red 4px);
}

HTML

<ul >
<hr><li>Список</li>
<hr><li>Список</li>
</ul>

Треугольник

CSS

.triangle1 {
list-style: none;

font-size: 20px;
}
.corner1 {
border: 6px solid transparent;
border-right: 10px solid green;
float: left;
margin: 6px 5px 5px 5px;

}
.triangle2 {
list-style: none;
font-size: 20px;
}
.corner2 {
border: 6px solid transparent;
border-left: 10px solid green;
float: left;
margin: 6px 5px 5px 5px;
}
HTML

<ul >
<hr><li>Список</li>
<hr><li>Список</li>
</ul>

<ul >
<hr><li>Список</li>
<hr><li>Список</li>
</ul>

Галочка

CSS

.daw {
list-style: none;

font-size: 20px;
}
.mark {
width: 2px;
height: 12px;
margin: 2px 5px 5px 0;
background: green;
float: left;
transform: rotate(-25deg);
z-index: 1;
}
.mark1 {
width: 2px;
height: 10px;
background: green;
margin: 4px 5px 5px -5px;
float: left;
transform: rotate(25deg);
}

HTML

<ul >
<hr><hr><li>Список</li>
<hr><hr><li>Список</li>
</ul">

Сердечко

CSS

.amur {
list-style: none;
font-size: 20px;
}
.love {
border-radius: 5px 10px 0 10px;
width: 10px;
height: 10px;
margin: 6px -6px 5px 0;
background: red;
float: left;

}
.love1{
border-radius: 10px 5px 10px 0;
width: 10px;
height: 10px;
margin: 6px 5px 5px 0;
background: red;
float: left;
}

HTML

<ul >
<hr><hr><li>Список</li>
<hr><hr><li">Список</li>
</ul>

Символ

CSS

.symb {
list-style: none;
font-size: 18px;
line-height: 1.3;
}
.symbol {
margin: 0 5px 0 0;
color: red;
font-weight: bold;
float: left;

}

HTML

<ul >
<span>®</span><li>Список</li>
<span>®</span><li>Список</li>
</ul>

Возможно кто-то из Вас найдёт ошибки в коде, укажет как их исправить или предложит дополнения. Буду весьма признателен. И не только я.

Желаю творческих успехов.

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

Работа с маркерами списков ol на CSS

Маркеры списка ul также меняются с помощью свойства list-style-type. Давайте посмотрим, какие значения оно может принимать для списка ol.

Значение lower-roman

Значение lower-roman делает вместо обычных цифр римские:

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>

ol { list-style-type: lower-roman; }

:

Значение upper-roman

Значение upper-roman делает заглавные римские цифры:

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> ol { list-style-type: upper-roman; }

:

Значение lower-roman

Значение lower-alpha делает нумерацию маленькими латинскими буквами:

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> ol { list-style-type: lower-alpha; }

:

Значение upper-alpha

Значение upper-alpha делает нумерацию большими латинскими буквами:

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> ol { list-style-type: upper-alpha; }

:

Значение lower-greek

Значение lower-greek делает нумерацию маленькими греческими буквами:

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> ol { list-style-type: lower-greek; }

:

Значение upper-greek

Значение upper-greek делает нумерацию большими греческими буквами:

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> ol { list-style-type: upper-greek; }

:

Значение decimal-leading-zero

Значение decimal-leading-zero делает нумерацию в виде чисел, но нулем впереди для цифр меньше десяти (01, 02, 03,…):

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> ol { list-style-type: decimal-leading-zero; }

:

Практические задачи

Повторите страницу по данному образцу:

Повторите страницу по данному образцу:

Повторите страницу по данному образцу:

Работа с маркерами списков ul на CSS

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

Значение square

Значение square позволяет сделать маркеры в виде квадратиков:

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> ul { list-style-type: square; }

:

Значение circle

Значение circle позволяет сделать маркеры в виде кружков:

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> ul { list-style-type: circle; }

:

Значение disc

Значение disc делает маркеры в виде закрашенных кружков (это значение по умолчанию):

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> ul { list-style-type: disc; }

:

Значение none

Значение none убирает маркеры совсем:

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> ul { list-style-type: none; }

:

Практические задачи

Повторите страницу по данному образцу:

Повторите страницу по данному образцу:

Сделайте список без маркеров, как в данном образце:

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

В этой статье рассмотрим, 182как вместо цифр, кружочков, и квадратиков в списках, сделать и установить красивые маркеры-изображения.

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

Сначала нужно получить картинку маркера.

Можно найти её в интернете, тем у кого есть фотошоп, можно сделать в нём. Я покажу, как сделать маркеры в редакторе Paint, так как он есть во всех Windows по умолчанию.

Картинку можно взять прямо отсюда.

Красивые маркеры для списка

Для этого делаем снимок экрана (нажать клавишу Prt Sc Sys Rd), и открыв Paint, щёлкаем по иконке «Вставить».

Затем выбираем «Выделить — прямоугольная область»,  аккуратно, с минимальным зазором выделяем выбранный маркер, и щёлкаем «Обрезать».

Картинка готова. Теперь «Файл — Сохранить как…», и сохраняем в папку «images» каталога сайта.

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

Если у Вас фон отличается от белого, то чтобы закрасить белые углы (картинка-то вырезается квадратная), можно воспользоваться онлайн фотошопом

Загрузив в него картинку нужно войти в меню «Коррекция» и выбрать «Color balanse». Затем, передвигая бегунки, подобрать нужный Вам фон, и сохранить подправленное изображение обратно на свой компьютер, пройдя в меню «Файл», и выбрав «Сохранить как …»

Как изменить фон полотна изображения

Если фон Вашей страницы вообще тёмный, то можно подобрать заливку цвета, из панели инструментов (слева), и аккуратненько залить белые углы, так называемое полотно изображения. Сама картинка останется такой же как и была.

Теперь приступим к украшению списка этой картинкой. Свойство, применяемое для вставки картинки маркера в список, называется list-style-image. В значении его указывается путь к картинке.


ul{
  list-style-image: url(images/2.png);
}

Если Вам потребуется заключить список в рамку, то в селектор ul добавляется свойство list-style-position: inside;. Это свойство указывает на то, что маркеры должны располагаться внутри рамки, отодвинув при этом содержание.


ul{
  border: 2px solid #ffff00;
  list-style-image: url(images/2.png);
  list-style-position: inside;
}

Можно сделать список в блоке с закруглёнными углами и тенью. Для этого в селектор ul добавляются свойства border-radius и box-shadow.


border-radius: 5px;
box-shadow: rgba(0,0,0,5.2) 0px 1px 3px;

Пример, html документ, с использованием этих блоков для списка с маркерами-картинками.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
  body{
    border: 2px solid #ffff00;
}
  ul{
    border-radius: 5px;
    box-shadow: rgba(0,0,0,5.2) 0px 1px 3px;
    list-style-image: url(images/2.png);
    width: 150px;
    margin: 20px;
}
</style>
</head>
<body>
  <ul>
  <li>Строка списка</li>
  <li>Строка списка</li>
  <li>Строка списка</li>
  <li>Строка списка</li>
  </ul>

</body>
</html>

В этом коде Вам нужно будет только вставить своё название картинки в свойстве list-style-image, там где 2.png, а у меня получился вот такой список

Список с красивыми маркерами

Попробуйте поиграть со значениями (цифрами) в блоках border-radius и box-shadow, чтобы узнать, какие очертания может принять этот список.

Как форматировать текст внутри списка, смотрите в Уроке 1 CSS, в статьях «Шрифты», «Размер и цвет шрифта», «Жирный и курсивный шрифт».

Чтобы сделать такой список в виде меню, нужно вставить в тегах li ссылки на нужные страницы.

Маркеры можно и нарисовать средствами CSS. Об этом в статье CSS маркер списка

На следующей странице будем задавать ширину и местоположение для любых рамок.

Неужели не осталось вопросов? Спросить

-Почему ты стал антисемитом?
-Один еврей испортил мне всю жизнь.
-И как же его звали?
-Мендельсон.

Как изменить маркер списка CSS

Сегодня разберемся, как создаются списки на веб-странице, какие маркеры используются и протестируем разные стили для изменения внешнего вида.

Напомню, как подключаются стили к Html странице:

 

 

Существуют маркированный, или ненумерованный список css и нумерованный.

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

Нумерованный список представляет собой вывод информации под номерами 1, 2, 3  и т.д.

 

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

Если вы решили заменить эти кружки на дизайнерские, то нужно освоить оформление списка с помощью css. Чем мы сегодня и займемся.

 

Основа любого списка состоит из следующего кода веб-страницы:

 

  • Первый элемент списка
  • Второй элемент списка
  • Последний элемент списка

 

 

Выглядит этот блок так:

  • Первый элемент списка
  • Второй элемент списка
  • Последний элемент списка

 

Css оформление маркеров списка   

 

Внешний вывод будем прописывать в файле стилей style.css. Он может называться и по-другому, но иметь расширение .css.

Стандартные маркеры CSS:  кружок (circle) – не закрашенный кружок, точка (disk) – закрашенный кружок, квадрат (square) – закрашенный квадрат.

Формирует список в css код ul  — с его помощью мы задаем, какой из стандартных маркеров будет выводиться на странице.  

Например, выведем списки с использованием кружка (circle). Запись в css файле будет такая:

 

ul {list-style-type: circle}

 

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

 ul {list-style-type: none}

 

Если вы не можете найти код в файле css, отвечающий за вывод списка в нужном вам блоке, то воспользуйтесь плагином для Firefox — Firebug или в Google Chrom нажмите правой кнопкой мыши на веб-странице блога. Затем «просмотр кода элемента».

Например, один из вариантов изменения внешнего вида списка в постах на стандартный кружок, если для блока контента нет  ul:

 

 .post-content ul {list-style-type: circle}

 

Или другой пример:

 

 #content-blok ul{list-style-type:square}

 

Полный курс «Css практика»

]]>Видеокурс]]>

 

 

 

Знание CSS необходимо каждому вебмастеру, потому что это универсальный способ сделать качественный дизайн без перегрузки кода страницы. 

Для тех, кто хочет очень быстро научиться трюкам css стилей, ]]>рекомендую]]> расширенный курс «CSS практика» Евгения Попова.

 

 

Следующие статьи:

 Графические маркеры для списка.

Отступ списка css.

Как поменять css цвет маркера списка, чтобы его цвет был отличным от цвета текста.

Вложенные списки. Как в css сделать горизонтальный список. Изменение стиля нумерованных списков.

Скачать красивые маркеры для списков сайта.

 

list-style | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

Краткая информация

Значение по умолчаниюНет
НаследуетсяДа
ПрименяетсяК тегам <dd>, <dt>, <li>, <ol> и <ul>, а также ко всем элементам, у которых указано display: list-item
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/generate.html#propdef-list-style

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Универсальное свойство, позволяющее одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера. Для подробного ознакомления смотрите информацию о каждом свойстве list-style-type, list-style-position и list-style-image отдельно.

Синтаксис

list-style: list-style-type || list-style-position || list-style-image | inherit

Значения

Любые комбинации трех значений определяющих стиль маркеров, они разделяются между собой пробелом. Комбинации значений должны следовать в указанном порядке: вначале идет тип маркера, затем положение и картинка. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить.

inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>list-style</title>
  <style>
   ul {
    list-style: square outside; /* Квадратные маркеры */
                               /* Маркеры размещаются за 
                                  пределами текстового блока */
   }
  </style>
 </head> 
 <body> 
  <ul>
   <li>Lorem ipsum dolor sit amet</li>
   <li>Consectetuer adipiscing elit</li>
   <li>Sed diem nonummy nibh euismod</li>
   <li>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.</li>
  </ul>
 </body>
</html>

Результат данного примера показан на рис. 1.

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

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

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

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

:: marker — Веб-технологии для разработчиков

Псевдоэлемент CSS :: marker выбирает поле маркера элемента списка, который обычно содержит маркер или номер. Он работает с любым элементом или псевдоэлементом, для которого установлено значение display: list-item , например, с элементами

  • и .

     :: marker {
  цвет синий;
  размер шрифта: 1.2em;
}

    Допустимые свойства

    Только определенные свойства CSS могут использоваться в правиле с :: marker в качестве селектора:

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

    Синтаксис 

     :: маркер

    Примеры

    HTML 

     
      
  
    •  Персики 
      • 
  
    •  Яблоки 
      • 
  
    •  Сливы 
      •

    CSS 

     ul li :: marker {
  красный цвет;
  размер шрифта: 1.5em;
}

    Результат

    Технические характеристики

    Совместимость с браузером

    Обновить данные о совместимости на GitHub
    Desktop Mobile
    Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome для Android Firefox для Android Opera для Android Safari на iOS Samsung Internet
    :: маркер Chrome Полная поддержка 80
    Полная поддержка 80
    Отключено Начиная с версии 80: эта функция стоит за настройкой Включить экспериментальные функции веб-платформы .Чтобы изменить настройки в Chrome, посетите chrome: // flags.
    		 Кромка Полная поддержка 80
    Полная поддержка 80
    Отключено Начиная с версии 80: эта функция стоит за настройкой Включить экспериментальные функции веб-платформы .
    		 Firefox Полная поддержка 68 IE Нет поддержки № Opera Нет поддержки № Safari Полная поддержка 11.1 WebView Android Нет поддержки № Chrome Android Полная поддержка 80
    Полная поддержка 80
    Отключено Начиная с версии 80: эта функция стоит за настройкой Включить экспериментальные функции веб-платформы . Чтобы изменить настройки в Chrome, посетите chrome: // flags.
    		 Firefox Android Полная поддержка 68 Опера Android Нет поддержки № Safari iOS Полная поддержка 11.3 Samsung Интернет Android Нет поддержки №

    Обозначение

    Полная поддержка
    Полная поддержка
    Нет поддержки
    Нет поддержки
    Пользователь должен явно включить эту функцию.
    Пользователь должен явно включить эту функцию.

    См. Также

    .

    CSS свойство стиля списка


    Пример

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

    ul.a {list-style-type: circle;}
    ul.b {list-style-type: square;}
    ol.c {тип-стиля-списка: верхний-римский;}
    ol.d {тип-стиля-списка: нижний-альфа;}

    Попробуй сам »

    Дополнительные примеры «Попробуйте сами» ниже.

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

    Тип list-style-type определяет тип маркера элемента списка в списке.

    Значение по умолчанию: диск
    Унаследовано: да
    Анимированные: нет. Прочитать о animatable
    Версия: CSS1
    Синтаксис JavaScript: объект .style.listStyleType = «квадрат» Попытайся

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

    Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

    Объект
    тип списка 1,0 4.0 1,0 1,0 3,5

    Примечание. Internet Explorer / Edge и Opera 12 и более ранние версии не поддерживают значения: cjk-ideographic, иврит, хирагана, хирагана-ироха, катакана и катакана-ироха.

    Синтаксис CSS

    Стоимость недвижимости

    ..
    Значение Описание Сыграй
    диск Значение по умолчанию.Маркер представляет собой закрашенный кружок Играй »
    армянский Маркер традиционный армянский номер Играй »
    круг Маркер круг Играй »
    cjk-ideographic Маркер простой идеографический номер Играй »
    десятичное Маркер номер Играй »
    десятичный ведущий ноль Маркер — это число с ведущими нулями (01, 02, 03 и т. Д.).) Играй »
    грузинский Маркер традиционный грузинский с номером Играй »
    еврейский Маркер — традиционная ивритская нумерация Играй »
    хирагана Маркер — традиционная хирагана с номером Играй »
    хирагана-ироха Маркер — традиционный хирагана ироха с номером Играй »
    катакана Маркер — традиционный катакана с номером Играй »
    катакана-ироха Маркер традиционный катакана ироха номер Играй »
    нижний альфа Маркер с нижним альфа-каналом (a, b, c, d, e и т. Д.) Играй »
    нижнегреческий Маркер нижнегреческий Играй »
    строчная латынь Маркер нижнелатинский (a, b, c, d, e и др.) Играй »
    нижний римский Маркер является нижним римским шрифтом (i, ii, iii, iv, v и т. Д.) Играй »
    нет Маркер не отображается Играй »
    квадрат Маркер квадратный Играй »
    верхняя альфа Маркер верхнего альфа (A, B, C, D, E и т. Д.) Играй »
    верхнегреческий Маркер верхнегреческий Играй »
    верхняя латынь Маркер верхнелатинский (A, B, C, D, E и т. Д.)) Играй »
    верхнеримская Маркер верхнеримский (I, II, III, IV, V и др.) Играй »
    начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальные Играй »
    унаследовать Наследует это свойство от своего родительского элемента.Читать про наследство

    Другие примеры

    Пример

    В этом примере показаны все различные маркеры элементов списка:

    ul.a {list-style-type: circle;}
    ul.b {list-style-type: disc;}
    ul.c {list-style-type: square;}

    ol.d {list-style- type: armenian;}
    ol.e {list-style-type: cjk-ideographic;}
    ol.f {list-style-type: decimal;}
    ol.g {list-style-type: десятичный-начальный-ноль;}
    ol.h {list-style-type: georgian;}
    ol.i {list-style-type: hebrew;}
    ol.j {list-style-type: hiragana;}
    ol.k {list-style-type: hiragana-iroha;}
    ol.l {тип-стиля-списка: katakana;}
    ol.m {тип-стиля-списка: katakana-iroha;}
    ol.n {тип-стиля-списка: нижний-альфа;}
    ol.o {тип-стиля-списка: нижний-греческий;}
    ol.p {тип-стиля-списка: нижний-латинский;}
    ol.q {тип-стиля-списка: нижний-римский;}
    ol.r {list-style-type: upper-alpha;}
    ol.s {list-style-type: upper-greek;}
    ол.t {list-style-type: upper-latin;}
    ol.u {тип-стиля-списка: верхний-римский;}
    ol.v {тип-стиля-списка: нет;}
    ol.w {тип-стиля-списка: наследование;}

    Попробуй сам »

    Пример

    Как добавить цвета маркеров для

      или
        , удалив маркеры по умолчанию и добавив объект HTML, который выглядит как маркеры (& bull;):

        ul {
        list-style: нет; / * Удалить маркеры списка * /
        padding: 0;
        маржа: 0;
        }

        li {
        padding-left: 16px;
        }

        li: до {
        content: «•»; / * Вставляем контент, похожий на маркеры * /
        отступ справа: 8 пикселей;
        цвет: синий; / * Или желаемый цвет * /
        }

        Попробуй сам »

        Связанные страницы

        Учебник

        CSS: Список CSS

        Ссылка CSS: свойство стиля списка

        Ссылка на HTML DOM: свойство listStyleType


        .

        list-style-type — веб-технология для разработчиков

        list-style-type Chrome Полная поддержка 1 Край Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка 4 Опера Полная поддержка 3.5 Safari Полная поддержка 1 WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка 10.1 Safari iOS Полная поддержка 1 Samsung Интернет Android Полная поддержка 1.0
        вдалеке Хром Нет поддержки 6-45 Кромка Нет поддержки № Firefox Нет поддержки № IE Нет поддержки № Опера Нет поддержки 15–32 Safari Полная поддержка 5 WebView Android Нет поддержки 3–45 Chrome Android Нет поддержки 18–45 Firefox Android Нет поддержки № Opera Android Нет поддержки 14–32 Safari iOS Полная поддержка 4.2 Samsung Интернет Android Нет поддержки 1,0 — 5,0
        амарик хром Нет поддержки 6-45 Кромка Нет поддержки № Firefox Нет поддержки № IE Нет поддержки № Опера Нет поддержки 15–32 Safari Полная поддержка 5 WebView Android Нет поддержки 3–45 Chrome Android Нет поддержки 18–45 Firefox Android Нет поддержки № Opera Android Нет поддержки 14–32 Safari iOS Полная поддержка 4.2 Samsung Интернет Android Нет поддержки 1,0 — 5,0
        amaric-abegede Хром Нет поддержки 6-45 Кромка Нет поддержки № Firefox Нет поддержки № IE Нет поддержки № Опера Нет поддержки 15–32 Safari Полная поддержка 5 WebView Android Нет поддержки 3–45 Chrome Android Нет поддержки 18–45 Firefox Android Нет поддержки № Opera Android Нет поддержки 14–32 Safari iOS Полная поддержка 4.2 Samsung Интернет Android Нет поддержки 1,0 — 5,0
        арабский индикатор Хром Полная поддержка 6 Край Полная поддержка 79 Firefox Полная поддержка 33
        Полная поддержка 33
        Полная поддержка 1
        С префиксом Реализовано с префиксом поставщика: -moz-
        		 IE Нет поддержки № Опера Полная поддержка 15 Safari Полная поддержка 5 WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 33
        Полная поддержка 33
        Полная поддержка 4
        С префиксом Реализовано с префиксом поставщика: -moz-
        		 Opera Android Полная поддержка 14 Safari iOS Полная поддержка 4.2 Samsung Интернет Android Полная поддержка 1.0
        армянский Хром Полная поддержка 1 Край Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка 8 Опера Полная поддержка 6 Safari Полная поддержка 1 WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка 10.1 Safari iOS Полная поддержка 1 Samsung Интернет Android Полная поддержка 1.0
        звездочки Хром Нет поддержки 13-45 Кромка Нет поддержки № Firefox Нет поддержки № IE Нет поддержки № Опера Нет поддержки 15–32 Safari Полная поддержка 5.1 WebView Android Нет поддержки 4,4 — 45 Chrome Android Нет поддержки 18–45 Firefox Android Нет поддержки № Opera Android Нет поддержки 14–32 Safari iOS Полная поддержка 5 Samsung Интернет Android Нет поддержки 1.0 — 5,0
        бенгальский Хром Полная поддержка 6 Край Полная поддержка 79 Firefox Полная поддержка 33
        Полная поддержка 33
        Полная поддержка 1
        С префиксом Реализовано с префиксом поставщика: -moz-
        		 IE Нет поддержки № Опера Полная поддержка 15 Safari Полная поддержка 5 WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 33
        Полная поддержка 33
        Полная поддержка 4
        С префиксом Реализовано с префиксом поставщика: -moz-
        		 Opera Android Полная поддержка 14 Safari iOS Полная поддержка 4.2 Samsung Интернет Android Полная поддержка 1.0
        двоичный Хром Нет поддержки 13-45 Кромка Нет поддержки № Firefox Нет поддержки № IE Нет поддержки № Опера Нет поддержки 15–32 Safari Полная поддержка 5 WebView Android Нет поддержки 4.4–45 Chrome Android Нет поддержки 18–45 Firefox Android Нет поддержки № Opera Android Нет поддержки 14–32 Safari iOS Полная поддержка 4.2 Samsung Интернет Android Нет поддержки 1,0 — 5,0
        камбоджийский Хром Полная поддержка 6 Край Полная поддержка 79 Firefox Полная поддержка 33 IE Нет поддержки № Опера Полная поддержка 15 Safari Полная поддержка 5 WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 33 Опера Android Полная поддержка 14 Safari iOS Полная поддержка 4.2 Samsung Интернет Android Полная поддержка 1.0
        круг Хром Полная поддержка 1 Край Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка 4 Опера Полная поддержка 3.5 Safari Полная поддержка 1 WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка 10.1 Safari iOS Полная поддержка 1 Samsung Интернет Android Полная поддержка 1.0
        cjk-decimal Chrome Нет поддержки № Край Нет поддержки № Firefox Полная поддержка 28 IE Нет поддержки № Опера Нет поддержки № Safari Нет поддержки № WebView Android Нет поддержки № Chrome Android Нет поддержки № Firefox Android Полная поддержка 28 Опера Android Нет поддержки № Safari iOS Нет поддержки № Samsung Internet Android Нет поддержки №
        cjk-earthly-branch Chrome Полная поддержка 6 Край Полная поддержка 79 Firefox Полная поддержка 33
        Полная поддержка 33
        Полная поддержка 1
        С префиксом Реализовано с префиксом поставщика: -moz-
        		 IE Нет поддержки № Опера Полная поддержка 15 Safari Полная поддержка 5 WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 33
        Полная поддержка 33
        Полная поддержка 4
        С префиксом Реализовано с префиксом поставщика: -moz-
        		 Opera Android Полная поддержка 14 Safari iOS Полная поддержка 4.2 Samsung Интернет Android Полная поддержка 1.0
        cjk-небесный ствол Хром Полная поддержка 6 Край Полная поддержка 79 Firefox Полная поддержка 33
        Полная поддержка 33
        Полная поддержка 1
        С префиксом Реализовано с префиксом поставщика: -moz-
        		 IE Нет поддержки № Опера Полная поддержка 15 Safari Полная поддержка 5 WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 33
        Полная поддержка 33
        Полная поддержка 4
        С префиксом Реализовано с префиксом поставщика: -moz-
        		 Opera Android Полная поддержка 14 Safari iOS Полная поддержка 4.2 Samsung Интернет Android Полная поддержка 1.0
        cjk-ideographic Хром Полная поддержка 1 Край Полная поддержка 79 Firefox Полная поддержка 1 IE Нет поддержки № Опера Полная поддержка 15
        Полная поддержка 15
        Частичная поддержка 7
        Примечания До версии 15 отображаются только десятичные числа.
        		 Safari Полная поддержка 5 WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка 14
        Полная поддержка 14
        Частичная поддержка 10.1
        Примечания До версии 15 отображаются только десятичные числа.
        		 Safari iOS Полная поддержка 4.2 Samsung Интернет Android Полная поддержка 1.0
        десятичное Хром Полная поддержка 1 Край Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка 4 Опера Полная поддержка 3.5 Safari Полная поддержка 1 WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка 10.1 Safari iOS Полная поддержка 1 Samsung Интернет Android Полная поддержка 1.0
        десятичный начальный ноль Chrome Полная поддержка 1 Край Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка 8 Опера Полная поддержка 8 Safari Полная поддержка 1 WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка 10.1 Safari iOS Полная поддержка 1 Samsung Интернет Android Полная поддержка 1.0
        деванагари Хром Полная поддержка 6 Край Полная поддержка 79 Firefox Полная поддержка 33
        Полная поддержка 33
        Полная поддержка 1
        С префиксом Реализовано с префиксом поставщика: -moz-
        		 IE Нет поддержки № Опера Полная поддержка 15 Safari Полная поддержка 5 WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 33
        Полная поддержка 33
        Полная поддержка 4
        С префиксом Реализовано с префиксом поставщика: -moz-
        		 Opera Android Полная поддержка 14 Safari iOS Полная поддержка 4.2 Samsung Интернет Android Полная поддержка 1.0
        диск хром Полная поддержка 1 Край Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка 4 Опера Полная поддержка 3.5 Safari Полная поддержка 1 WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка 10.1 Safari iOS Полная поддержка 1 Samsung Интернет Android Полная поддержка 1.0
        раскрытие закрыто Хром Нет поддержки № Край Нет поддержки № Firefox Полная поддержка 33 IE Нет поддержки № Опера Нет поддержки № Safari Нет поддержки № WebView Android Нет поддержки № Chrome Android Нет поддержки № Firefox Android Полная поддержка 33 Опера Android Нет поддержки № Safari iOS Нет поддержки № Samsung Internet Android Нет поддержки №
        раскрытие открыто Хром Нет поддержки № Край Нет поддержки № Firefox Полная поддержка 33 IE Нет поддержки № Опера Нет поддержки № Safari Нет поддержки № WebView Android Нет поддержки № Chrome Android Нет поддержки № Firefox Android Полная поддержка 33 Опера Android Нет поддержки № Safari iOS Нет поддержки № Samsung Internet Android Нет поддержки Нет
        этиопский Хром Нет поддержки 6-45 Кромка Нет поддержки № Firefox Нет поддержки № IE Нет поддержки № Опера Нет поддержки 15–32 Safari Полная поддержка 5 WebView Android Нет поддержки 3–45 Chrome Android Нет поддержки 18–45 Firefox Android Нет поддержки № Opera Android Нет поддержки 14–32 Safari iOS Полная поддержка 4.2 Samsung Интернет Android Нет поддержки 1,0 — 5,0
        ethiopic-abegede Хром Нет поддержки 6-45 Кромка Нет поддержки № Firefox Нет поддержки № IE Нет поддержки № Опера Нет поддержки 15–32 Safari Полная поддержка 5 WebView Android Нет поддержки 3–45 Chrome Android Нет поддержки 18–45 Firefox Android Нет поддержки № Opera Android
        .Маркер элемента списка стилей

        со свойством стиля списка CSS

        Стиль списка — это сокращенное свойство, которое устанавливает три свойства списка — list-style-type , list-style-position и list-style-image в одном объявлении. Это свойство используется для стилизации отображения списков.

        CSS

         стиль списка: [тип стиля списка] [позиция стиля списка] [изображение стиля списка];

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

        CSS

         список-стиль-тип: [список-стиль-тип];
позиция стиля списка: [позиция стиля списка];
изображение-стиль-список: [изображение-стиль-список];

        Посмотрите на каждое из стандартных свойств с возможными значениями, которые они могут принимать.

        стиль списка

        Тип списка определяет тип маркера элемента списка. Он может принимать одно из следующих значений. Однако значения по умолчанию для ul (неупорядоченный список) и ol (упорядоченный список) — disk и decimal соответственно.

        диск , круг , квадрат , десятичный , десятичный начальный ноль , нижняя альфа , верхняя альфа , нижняя греческая , нижняя латинская , верхняя латинская , нижняя римская , верхняя римская , грузинская , армянская , иврит , хирагана , хирагана-ироха , катакана ироха , катакана , катакана cjk-ideographic , телугу , бенгальский , урду , нет , начальный , наследовать

        Значение нет скрывает маркер списка.Все перечисленные выше значения демонстрируются в следующей демонстрации.

        См. Тип Pen list-style от Aakhya Singh (@aakhya) на CodePen.

        В приведенной выше демонстрации ul: nth-of-type (1) представляет первый элемент ul . Точно так же этот селектор используется для представления других элементов ul .

        Некоторые значения, такие как иврит, хирагана, хирагана-ироха, катакана и катакана-ироха, не поддерживаются IE и версиями Opera до Opera 12.Firefox 32 и его более ранние версии не поддерживают некоторые значения, такие как телугу, бенгальский и урду.

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

        См. Перо Различные стили маркеров элементов списка в списке, написанном Аахья Сингхом (@aakhya) на CodePen.

        Здесь ul li: nth-child (1) представляет первый дочерний элемент li элемента ul .

        Свойство list-style-type может применяться к элементам списка, а также к элементам, заданным display: list-item .Вы можете узнать больше о значениях, которые могут быть присвоены этому свойству, из значений CSS list-style-type.

        позиция стиля списка

        Свойство list-style-position определяет положение маркера элемента списка, то есть, появляется ли маркер элемента списка внутри или вне содержимого элемента списка. Может принимать одно из следующих значений.

        внутри : Помещает маркер элемента списка как часть содержимого элемента списка.

        за пределами : помещает маркер элемента списка перед содержимым элемента списка.Это значение по умолчанию.

        начальное : Устанавливает начальное значение свойства.

        наследовать : наследует значение от родительского элемента.

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

        См. Раздел Pen list-style-position от Aakhya Singh (@aakhya) на CodePen.

        Посмотрите на следующий пример, в котором содержимое элементов списка занимает более одной строки.

        См. Пример позиции в стиле списка пера, созданный Аахьей Сингхом (@aakhya) на CodePen.

        Если задать левое заполнение элементу li (элемент списка), когда элемент ul или ol имеет свойство list-style-position , установленное на за пределами , то заполнение будет добавлено перед содержимое элемента списка, тем самым увеличивая расстояние между маркером элемента списка (например, маркером или числом) и текстом. Если для свойства установлено значение внутри , то маркер элемента списка будет частью содержимого li (элемент списка).Таким образом, перед маркером элемента списка будет добавлено заполнение.

        изображение в стиле списка

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

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

        url : это путь к расположению изображения, установленного в качестве маркера.

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

        См. Изображение Pen list-style от Aakhya Singh (@aakhya) на CodePen.

        Таким образом, вы можете поместить любое изображение по вашему выбору в разные списки. Если вы присваиваете значения обоим свойствам list-style-type и list-style-image , то последнее преобладает. В таком случае маркер будет отображаться в соответствии со значением, заданным в list-style-type , только если значение list-style-image равно none (что также является его значением по умолчанию).Это демонстрируется в следующем примере.

        См. Пример Pen list-style-image overriding list-style-type от Aakhya Singh (@aakhya) на CodePen.

        Использование сокращенного свойства

        Как указывалось ранее, вы можете указать значения трех вышеупомянутых свойств в одном объявлении, используя сокращенное свойство в стиле списка . Всегда лучше использовать сокращенные свойства, так как это не дает нам писать лишние строки кода и делает его более читабельным.

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

        CSS

        В приведенном выше коде значение list-style-type дается сокращенному свойству. Следовательно, list-style-position и list-style-image установлены на свои значения по умолчанию, то есть вне и none соответственно.

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

        CSS

         стиль списка: круг внутри;

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

        См. «Примеры перьев для списков» от Аахьи Сингха (@aakhya) на CodePen.

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

        нет : удаляет маркер элемента списка.

        начальное : Устанавливает начальное значение свойства.

        наследовать : наследует значение от родительского элемента.

        Удаление внешнего вида по умолчанию

        Вы можете удалить внешний вид списка по умолчанию, установив list-item на none (чтобы удалить маркер элемента списка) и задав padding и margin значениями как 0 (чтобы удалить дополнительные пробелы), как показано ниже. .

        См. «Удаление пера» по умолчанию в списке от Аахьи Сингха (@aakhya) на CodePen.

        Установка разных свойств маркера списка для разных элементов списка

        В приведенных выше примерах стили маркеров были изменены для всех элементов списка.Вы также можете изменить стиль маркера отдельных элементов списка, присвоив значения свойству list-style для разделения элементов li вместо элементов ul или ol .

        См. Перо «Различные стили для разных элементов списка». Автор Aakhya Singh (@aakhya) на CodePen.

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

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

        .

        No related posts.

    • Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *