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

Результат :

Вот и подошла к завершению тема .

23.02.2017

Пока нет

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

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

Свойство «LIST-STYLE-TYPE»
Правилом «list-style-type » можно задать вид маркера, например, чтобы отображались цифры, буквы, квадратики, кружочки и др.

Свойство:

• 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 и т.д.)

Li { list-style-type: circle; /* Маркеры в виде незакрашенного кружочка */ }

Полный пример:

• текст №1
• текст №2

Результат:

Если нужно убрать маркер из списка, тогда воспользуйтесь свойством «none »:

Li { list-style-type: none; /* Убираем маркеры */ }

Результат:

Положение маркера в списке

Свойство « LIST-STYLE-POSITION »
Правилом «list-style-position » можно указать положение маркера.

Свойство:

• outside – за пределами основного блока списка;
• inside – внутри основного блока списка.

Li { list-style-position: inside; /* положение маркера */ }

Цвет маркера в списке

Свойство « COLOR »
Вам уже известно правило «color », с помощью которого можно не только менять цвет текста, но и цвет маркера. Посмотрите .

• Текст №1
• Текст №2

Результат:

Картинка вместо маркера в списке

Свойство « 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) ". "; /* Выводим число */ }

Результат:

Жду вас на следующих уроках! Не забывайте подписываться!

Предыдущая запись
Следующая запись

Синтаксис

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 Отменяет маркеры для списка.

Песочница

1. Четыре

ul { list-style-type: decimal ; }

Пример

1. Gaius Octavius Thurinus
2. Tiberius Claudius Nero
3. Gaius Iulius Caesar Augustus Germanicus
4. Tiberius Claudius Drusus
5. Lucius Arruntius Camillus Scribonianus
6. Nero Claudius Caesar Drusus Germanicus
7. Lucius Clodius Macer

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

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

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

Объект .style.listStyleType

Примечание

В браузере Internet Explorer 6 при использовании нумерованного списка

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

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

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

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации ) - первая черновая версия стандарта.
×

Браузеры

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