Маркер списка css. Обычный вид маркера. Вид маркера в списке
Синтаксис
List-style-type: circle | disc | square | armenian | decimal | decimal-leading-zero | georgian | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-latin | upper-roman | none
Обозначения
Описание | Пример | |
---|---|---|
<тип> | Указывает тип значения. | <размер> |
A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
Группирует значения. | [ crop || cross ] | |
* | Повторять ноль или больше раз. | [,<время>]* |
+ | Повторять один или больше раз. | <число>+ |
? | Указанный тип, слово или группа не является обязательным. | inset? |
{A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
# | Повторять один или больше раз через запятую. | <время># |
Значения
Значения зависят от того, к какому типу списка они применяются: маркированному или нумерованному.
Маркированный список
circle Маркер в виде кружка. disc Маркер в виде точки. square Маркер в виде квадрата.Нумерованный список
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 Отменяет маркеры для списка.
Песочница
- Четыре
ul { list-style-type: decimal ; }
Пример
- Gaius Octavius Thurinus
- Tiberius Claudius Nero
- Gaius Iulius Caesar Augustus Germanicus
- Tiberius Claudius Drusus
- Lucius Arruntius Camillus Scribonianus
- Nero Claudius Caesar Drusus Germanicus
- Lucius Clodius Macer
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства list-style-type
Объектная модель
Объект .style.listStyleType
Примечание
В браузере Internet Explorer 6 при использовании нумерованного списка
-
и значения inside
свойства list-style-position
, числа идущие с 10, начинают накладываться на текст списка.
- Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации ) - первая черновая версия стандарта.
- none – без маркера
- disk – маркер в виде закрашенного круга;
- circle – маркер в виде незакрашенного круга;
- square – маркер в виде закрашенного квадрата;
- decimal – обычные десятичные числа (1,2,3,4,5 и т. д.);
- upper-roman – большие римские цифры (I, II, III, IV, V и т.д.);
- lower-roman – маленькие римские цифры (i, ii, iii, iv, v и т.д.);
- upper-alpha – большие буквы (A, B, C, D, E и т. д.);
- lower-alpha – малые буквы (a,b,c,d,e и т.д.)
- текст №1
- текст №2
- outside – за пределами основного блока списка;
- inside – внутри основного блока списка.
- Текст №1
- Текст №2
- Элемент нумерованного списка #1
- Элемент нумерованного списка #2
- Элемент нумерованного списка #3
- Элемент ненумерованного списка #1
- Элемент ненумерованного списка #2
- Элемент ненумерованного списка #3
- Java
- .NET
- C++
- PHP
- Picasa
- Feedburner
- Youtube
- Microsoft
- Corel Corporation
- Zignals
- ByteTaxi
- Yahoo!
- Xoopit
- BuzzTracker
- MyBlogLog
- Lorem ipsum dolor sit amet, ...
- Aenean placerat lectus tristique...
- Mauris eget sapien arcu, vitae...
- Phasellus feugiat lacus ...
- First inline item
- Second inline item
- Third inline item
- Fourth inline item
- About
- Contact
Браузер Internet Explorer до версии 7 включительно не поддерживает значения armenian , decimal-leading-zero , georgian , lower-greek , lower-latin , upper-latin . Вместо них выводится нумерация арабскими числами. В этом браузере нумерация или маркеры не отображаются для плавающих элементов (ul { float: left; } ).
Internet Explorer 8 дополнительно понимает значение upper-greek , которое устанавливает нумерацию в виде заглавных греческих букв (Α, Β, Γ, Δ,...).
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
Браузеры
none, disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman | 4 | 12 | 1 | 7 | 1 | 1 |
lower-latin, upper-latin, lower-greek, armenian, georgian | 8 | 12 | 1 | 6 | 1 | 1 |
decimal-leading-zero | 8 | 12 | 1 | 8 | 1 | 1 |
23.02.2017
Пока нет
Всем привет!
В сегодняшнем уроке я расскажу о том, как в CSS можно управлять внешним видом , а именно, создавать маркированные и нумерованные списки, оформлять списки маркеров изображением, а также, если нужно, вообще убирать любые обозначение маркированного списка.
Постараюсь этот урок не затягивать и не писать много информации. Но это только постараюсь, а там как получится.
Вид маркера в списке
Свойство «LIST-STYLE-TYPE»
Правилом «list-style-type
» можно задать вид маркера, например, чтобы отображались цифры, буквы, квадратики, кружочки и др.
Свойство:
- маркированные списки:
- нумерованные списки:
Li { list-style-type: circle; /* Маркеры в виде незакрашенного кружочка */ }
Полный пример:
Результат:
Если нужно убрать маркер из списка, тогда воспользуйтесь свойством «none »:
Li { list-style-type: none; /* Убираем маркеры */ }
Результат:
Положение маркера в списке
Свойство «
LIST-STYLE-POSITION
»
Правилом «list-style-position
» можно указать положение маркера.
Свойство:
Li { list-style-position: inside; /* положение маркера */ }
Цвет маркера в списке
Свойство «
COLOR
»
Вам уже известно правило «color
», с помощью которого можно не только менять цвет текста, но и цвет маркера. Посмотрите .
Результат:
Картинка вместо маркера в списке
Свойство «
LIST-STYLE-IMAGE
»
Если вам не нравится стандартный вид нумерованных или маркированных списков, вы можете воспользоваться правилом «list-style-image
» и вместо обычных маркеров поставить картиночные.
Синтаксис:
List-style-image: url(картинка.png);
LI { list-style-image: url("marker1.png"); /* изображение маркера */ }
«marker1.png » - это картинка маркера.
Результат:
Отступ маркера в списке
Свойство «PADDING-LEFT»
Если вам нужно сделать отступ от маркера до текста, воспользуйтесь правилом «padding-left
».
Li { padding-left: 30px; /* Отступ от маркера до текста */ }
Результат:
ПОДАРОК ДЛЯ ТЕХ, КТО ДОЧИТАЛ ДО КОНЦА
Нумерация списка с любой цифры
Это не обязательно знать, но я решил сделать подарок для тех, кто дочитал до этого места. Если вам нужно, задать нумерацию списка не с 1, а, к примеру, с 6, вы можете сделать такой ход:
Li { list-style-type: none; /* Убираем исходную нумерацию у списка */ } ul { counter-reset: list 5; /* Инициируем счетчик */ } ul li:before { counter-increment: list; /* Увеличиваем значение счетчика */ content: counter(list) ". "; /* Выводим число */ }
Результат:
Жду вас на следующих уроках! Не забывайте подписываться!
Предыдущая запись
Следующая запись
Cписки HTML (
-
для нумерованных
,
- для ненумерованных списков) используются очень часто. В этом уроке мы пойдем дальше создания обычных списков, и покажем вам 8 разных эффектных способов оформления списков HTML, используя CSS. Мы будем использовать чистый CSS, чтобы скучный список выглядел здорово и даже приобрел дополнительную функциональность.
Вот как выглядят стандартные нумерованный и ненумерованный списки:
Посмотрите пример, чтобы увидеть, что мы создадим.
Выглядит гораздо лучше, не правда ли? И Вы сможете создать все это, просто добавив немного кода CSS. Хотите знать, как это сделать? Приступим!
Список №1: Простое меню
Наиболее часто списки на веб-сайтах используются, чтобы создать меню. В этом примере показан код, который создаст простое, минималистичное, но в то же время элегантное меню.
HTML
CSS
/* Список #1 */ #list1 { } #list1 ul { list-style:none ; text-align:center ; border-top:1px solid #eee ; border-bottom:1px solid #eee ; padding:10px 0 ; } #list1 ul li { display:inline ; text-transform:uppercase ; padding:0 10px ; letter-spacing:10px ; } #list1 ul li a { text-decoration:none ; color :#eee ; } #list1 ul li a:hover { text-decoration:underline ; }
Список №2: Другой шрифт для цифр
Сложность со списками заключается в том, что все в списке должно выглядеть одинаково. Числа в списке должны иметь тот же цвет и шрифт, что и текст.
Но добавив дополнительный элемент list-item, Вы сможете обойти эти ограничения и создать очень необычный список. Вот как это сделать:
HTML
The Netherlands is a country in ...
The United States of America is a federal constitutional ...
The Philippines officially known as the Republic ...
The United Kingdom of Great Britain and ...
CSS
/* Список #2 */ #list2 { width:320px ; } #list2 ol { font-style:italic ; font-family:Georgia , Times, serif ; font-size:24px ; color :#bfe1f1 ; } #list2 ol li { } #list2 ol li p { padding:8px ; font-style:normal ; font-family:Arial ; font-size:13px ; color :#eee ; border-left : 1px solid #999 ; } #list2 ol li p em { display:block ; }
Список №3: Список с указателями
Вы можете изменить стиль указателей для ненумерованного списка на некоторые встроенные виды, но Вы также можете изменить его и на изображение. Этот способ сделает список еще привлекательней. Давайте рассмотрим, как это сделать.
HTML
CSS
/* Список #3 */ #list3 { } #list3 ul { list-style-image : url ("../images/arrow.png" ) ; color :#eee ; font-size:18px ; } #list3 ul li { line-height:30px ; }
Список №4: Список в стиле iPhone
Этот список взят из статьи «Приложение «Контакты» iPhone с использованием CSS и Jquery ». Он выглядит, как список из приложения «Контакты» iPhone. Еще немного стиля для Вашего веб-сайта.
HTML
CSS
/* Список #4 */ #list4 { width:320px ; font-family:Georgia , Times, serif ; font-size:15px ; } #list4 ul { list-style : none ; } #list4 ul li { } #list4 ul li a { display:block ; text-decoration:none ; color :#000000 ; background-color :#FFFFFF ; line-height:30px ; border-bottom-style:solid ; border-bottom-width:1px ; border-bottom-color :#CCCCCC ; padding-left:10px ; cursor:pointer ; } #list4 ul li a:hover { color :#FFFFFF ; background-image:url (../images/hover.png ) ; background-repeat:repeat-x ; } #list4 ul li a strong { margin-right:10px ; }
Список №5: Древовидные списки
Древовидные списки, т. е., вложенные списки, могут быть очень полезными и красивыми. С помощью третьего примера, списка с указателями, мы можем создать развернутый список. Конечно, Вы можете даже сделать списки сворачиваемыми и разворачиваемыми с помощью jQuery , но тут мы рассмотрим только CSS.
HTML
CSS
/* Список #5 */ #list5 { color :#eee ; } #list5 ol { font-size:18px ; } #list5 ol li { } #list5 ol li ol { list-style-image : url ("../images/nested.png" ) ; padding:5px 0 5px 18px ; font-size:15px ; } #list5 ol li ol li { color :#bfe1f1 ; height:15px ; margin-left:10px ; }
Список №6: Римские цифры и многострочный текст
По умолчанию нумерованный список использует арабские цифры (1, 2, 3, 4 и т. д.) для нумерации. Изменяя значение свойства list-style-type, Вы можете выбрать другие стили нумерации, например, римские цифры.
Также по умолчанию указатели списка размещены за пределами списка, Вы можете увидеть это во втором примере, другом шрифте для цифр. Чтобы обойти это ограничение, Вы можете изменить значение свойства list-style-position, чтобы нумерация располагалась внутри списка.
HTML
Fusce sit amet ...
Vivamus interdum ...
Phasellus neque risus...
Duis rhoncus ...
CSS
/* Список #6 */ #list6 { font-family : "Trebuchet MS" , "Lucida Grande" , Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif ; } #list6 ol { list-style-type : upper-roman ; color :#eee ; font-size:14px ; list-style-position : inside ; } #list6 ol li { }
Список №7: Разделенный запятыми и расположенный в одну строку список
Списки наиболее часто используются, чтобы показать элементы один под другим. Но что, если Вы хотите создать расположенный в одну строку список? Вы можете добиться этого, установив значение свойства display в inline. Но если Вы используете текст, Вы можете предпочесть создать разделенный запятыми список. Как добиться этого? С помощью псевдокласса:after.
HTML
CSS
/* Список #7 */ #list7 { } #list7 ul { color :#eee ; font-size:18px ; font-family:Georgia , Times, serif ; } #list7 ul li { display : inline ; } #list7 ul li:after { content : ", " ; } #list7 ul li.last :after { content : ". " ; }
Список №8: Поворачивающееся меню
Вот последний способ, который работает с CSS3 и поддерживается браузерами Firefox, Safari и Chrome. Когда Вы наводите указатель мыши на блочный элемент, он перейдет в активное повернутое состояние. Этот способ может быть не очень полезным, но на него приятно посмотреть.
CSS
/* Список #8 */ #list8 { } #list8 ul { list-style:none ; } #list8 ul li { font-family:Georgia ,serif ,Times; font-size:18px ; } #list8 ul li a { display:block ; width:300px ; height:28px ; background-color :#333 ; border-left:5px solid #222 ; border-right:5px solid #222 ; padding-left:10px ; text-decoration:none ; color :#bfe1f1 ; } #list8 ul li a:hover { -moz-transform:rotate (-5deg) ; -moz-box-shadow:10px 10px 20px #000000 ; -webkit-transform:rotate (-5deg) ; -webkit-box-shadow:10px 10px 20px #000000 ; transform:rotate (-5deg) ; box-shadow:10px 10px 20px #000000 ; }
Заключение
В этом уроке Вы узнали, как можно делать необычные вещи с обычным списком. И все это, используя только CSS. Надеемся, Вам понравится использование этих списков!
Перевод — Дежурка
CSS дает возможность создавать маркированные и нумерованные списки, оформлять списки маркеров изображением, а также, если нужно, вообще убирать любые обозначения маркированного списка.
CSS стили списка маркера.
list-style-type
list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none ;
Значение :
disk – маркированный список в виде закрашенного кружка
circle – маркированный список в виде не закрашенного кружка
square – маркированный список в виде закрашенного квадратика
decimal – нумерованный список арабскими числами (1,2,3 и т.д.)
upper-roman – нумерованный список большими римскими цифрами (I,II,III,IV и т.д.)
lower-roman – нумерованный список маленькими римскими цифрами (i,ii,iii,iv и т.д.)
upper-alpha – нумерованный список заглавными буквами (A,B,C и т.д.)
lower-alpha – нумерованный список строчными буквами (a,b,c и т. д.)
none – без маркера.
Пример :
- Верь в лучшее, ожидай худшее.
- Жизнь - это болезнь, со смертельным исходом.
- Никогда не говори никогда.
Результат :
Бывают такие случаи, когда отображения маркера в списке нужно убрать. Для этого в коде CSS пропишите
list-style-type: none;
Пример :
- Верь в лучшее, ожидай худшее.
- Никогда не говори никогда.
Результат :
Можно обычные маркеры в списке заменить собственными изображениями. Это можно сделать с помощью свойства list-style-image .
list-style-image
list-style-image: url(картинка.png);
Пример :
- Верь в лучшее, ожидай худшее.
- Жизнь - это болезнь со смертельным исходом.
- Никогда не говори никогда.
Результат :
Можно также задать маркированному списку расстояние от текста. Это можно сделать с помощью свойства padding-left для селектора li.
Пример :
- Верь в лучшее, ожидай худшее.
- Жизнь - это болезнь со смертельным исходом.
- Никогда не говори никогда.
Результат :
Следующая задача состоит в том, чтобы изменить цвет маркера, но при этом не изменять цвет текста. Как это возможно сделать? Цвет маркера можно изменить, если к тесту добавить тег .
Это выглядит вот так:
Пример :
- Верь в лучшее, ожидай худшее.
- Жизнь - это болезнь со смертельным исходом.
- Никогда не говори никогда.
Результат :
Дополнение к общей теме.
Если вам нужно, по каким-либо причинам, задать нумерацию списка маркера не с нуля, а, допустим, с 8, вы можете сделать такой ход.
Пример :
- Верь в лучшее, ожидай худшее.Пункт 1
- Жизнь - это болезнь со смертельным исходом.Пункт 2
- Никогда не говори никогда.Пункт 3
- Это все что я знал. Пункт 4
Результат :
Вот и подошла к завершению тема .
Списки - важный элемент веб-страницы. Они помогают структурировать информацию и преподносить ее в удобном для пользователя виде. Кроме того, в виде списков часто оформляются меню и навигационные панели. Управлять положением и внешним видом маркирующего элемента позволяет группа свойств
Виды списков
Различают упорядоченные и неупорядоченные списки. В первых маркером может служить любой символ, не изменяющийся от пункта к пункту, во вторых каждый элемент списка имеет собственный маркер, определяющий его местоположение среди остальных.
В упорядоченных списках для маркировки обычно используют цифры или буквы разных систем и алфавитов.
В зависимости от степени вложенности различают одноуровневые и Каждый уровень часто имеет собственный маркирующий элемент.
Использование списков при создании меню или панелей навигации поощряется последней версией стандарта HTML, так как этот элемент обладает важным семантическим значением.
Отображение в CSS
Каждый пункт является блочным контейнером с особым типом отображения display: list-item. По умолчанию это значение устанавливается для элементов li, расположенных внутри контейнеров ul и ol, и обеспечивает отображение маркера перед блоком.
При необходимости такой тип отображения можно установить для любого HTML-контейнера. Появившийся маркирующий элемент стилизуется с помощью группы свойств CSS list-style.
P { display: list-item; list-style-type: decimal; }
Все три перечисленные ниже свойства наследуются дочерними элементами, имеющими display: list-item, и в случае необходимости требуют явного переопределения.
Положение маркера списка
Первое свойство группы - list-style-position. Оно определяет, остается ли маркер в блоке текста или выносится за его пределы.
Свойство принимает одно из двух значений:
- inside,
- outside.
Разница между ними особенно хорошо заметна на многострочных пунктах.
List1 { list-style-position: outside; } .list2 { list-style-position: inside; }
По умолчанию установлено значение outside, и маркер списка выносится за границу блока.
Внешний вид маркера
Второе свойство - list-style-type - управляет типом маркирующего элемента и может принимать больше пятнадцати значений.
По умолчанию для нумерованного списка используются арабские цифры, а для маркированного - точки. Но свойства list-style в CSS позволяют изменить эти установки и даже вовсе удалить маркеры.
Маркеры неупорядоченных списков:
- disc - обычная точка, закрашенная цветом текста;
- circle - незаполненный кружок с обводкой в цвет текста;
- square - закрашенный квадрат.
Для упорядоченных списков вариантов гораздо больше:
Значение свойства list-style-type | Описание |
decimal | стандартная арабская нумерация, с единицы и далее: 1, 2, ..., 10, ... |
decimal-leading-zero | использует арабские цифры, значения состоящие из одного символа дополняет незначащим нулем слева: 01, 02, ... , 10, ... |
латинского алфавита: a, b, ... , e, ... | |
заглавные алфавита: A, B, ... , E, ... | |
lower-greek | греческий алфавит, строчные символы |
lower-roman | римские цифры, обозначенные строчными символами: i, ii, ... , vi, ... |
upper-roman | римские цифры, обозначенные заглавными символами: I, II, ... , VI, ... |
armenian | армянский стиль нумерации |
georgian | грузинский стиль нумерации |
hebrew | еврейский стиль нумерации |
различные японские стили нумерации, строчные символы | |
различные японские стили нумерации, заглавные символы | |
cjk-ideographic | восточная идеографическая нумерация |
Некоторые значения дублируют друг друга, например lower-alpha и lower-latin, а другие не поддерживаются рядом браузеров и шрифтов.
При необходимости маркеры упорядоченного типа могут быть применены к неупорядоченным спискам ul и наоборот.
Отдельно следует выделить значение none, которое скрывает маркеры у списка любого типа. Оно особенно полезно при создании навигационных панелей, когда требуется сохранить семантику списка, но маркирующие элементы не вписываются в дизайн. Также свойство часто используется для пользовательской стилизации.
List { list-style-type: none; }
Пользовательский маркер
Вместо определенных CSS видов маркирующих элементов можно использовать любое изображение. Для этого необходимо передать ссылку на него свойству list-style-image.
Можно использовать даже изображения в формате gif - анимация будет сохранена. Важно помнить, что отображает изображение в натуральную величину.
List { list-style-image: url(image.jpg); line-height: 25px; }
Например:
Помимо файлов изображений, можно использовать CSS-функции радиальных или линейных градиентов:
List { list-style-image: radial-gradient(lightblue, aqua, blue); }
Форма маркера при этом остается квадратной.
Объединенный синтаксис
Все свойства, определяющие отображение маркера списка, могут быть объединены в одном - CSS list-style.
List-style: list-style-type list-style-position list-style-image
Конкретные свойства перечисляются через пробел, нарушать их порядок нельзя, но любое из них можно опустить:
List1 { list-style: none; } .list2 { list-style: upper-roman inside; } .list3 { list-style: inside url(/images/img1.png); }
Для сброса стилей к исходным параметрам существует значение initial , которое может быть передано любому из четырех перечисленных свойств.
Используя группу в сочетании с эффектами наведения, можно создавать красивые уникальные списки, привлекающие внимание пользователя.