Стили для маркированного списка css. Обычный вид маркера. Отступ маркера в списке
С помощью CSS можно создать маркированные и нумерованные списки, а также использовать в качестве маркера подходящее изображение.
В табл. 1 перечислены свойства элементов, предназначенных для создания и изменения списков.
Свойство | Значение | Описание | Пример |
---|---|---|---|
list-style-type | disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none |
Вид маркера. Первые три используются для создания маркированного списка, а остальные — для нумерованного. | LI {list-style-type: circle}
LI {list-style-type: upper-alpha} |
list-style-image | none
URL |
Устанавливает символом маркера любую картинку. | LI {list-style-image: url(check.gif)} |
list-style-position | outside inside |
Выбор положения маркера относительно блока строк текста. | LI {list-style-position: inside} |
list-style | Универсальное свойство, включает одновременно все вышеперечисленные свойства. |
Поскольку тег
-
или
- Заголовок должен быть короче трех строк.
- При названии разделов используйте уже устоявшиеся термины, такие как гостевая книга, чат, ссылка, главная страница и другие.
- Перед использованием специального термина или слова, решите, будет ли оно понятно читателю.
- работоспособность всех ссылок
- поддержку разных браузеров
- читабельность текста
- работоспособность всех ссылок
- поддержку разных браузеров
- читабельность текста
- работоспособность всех ссылок
- поддержку разных браузеров
- читабельность текста
- первый
- второй
- третий
- первый
- второй
- третий
- первый
- второй
- третий
- первый
- второй
- третий
- первый
- второй
- третий
- Элемент нумерованного списка #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
-
,
который выступает в качестве его родителя, то можно устанавливать стиль как
для селектора UL
, так и для селектора LI
.
Так, в примере 1 используется селектор UL
, для
него и задаются стилевые параметры.
Пример 1. Создание маркированного списка
Результат данного примера показан на рис. 1. Используются квадратные маркеры и их внешнее размещение относительно текста.
Рис. 1. Вид списка, измененого с помощью стилей
Чтобы установить свое собственное изображение в качестве маркера применяется свойство list-style-image , как показано в примере 2.
Пример 2. Использование изображений в качестве маркера
Результат данного примера показан на рис. 2. В качестве маркеров используется маленькая картинка.
Рис. 2. Изображения в качестве маркеров
Некоторые примеры создания различных списков приведен в табл. 2.
Код HTML | Пример |
---|---|
|
|
Что следует учитывать при тестировании сайта:
|
|
Что следует учитывать при тестировании сайта:
|
|
Нумерованный список с арабскими цифрами: |
|
Нумерованный список со строчными римскими цифрами: |
|
Нумерованный список с заглавными римскими цифрами: |
|
Нумерованный список со строчными буквами латинского алфавита: |
|
Нумерованный список с заглавными буквами латинского алфавита: |
CSS-списки — набор свойств, отвечающих за оформление списков. Использование HTML-списков очень распространено при создании панелей навигации по сайту. Элементы списка представляют набор блочных элементов.
С помощью стандартных CSS-свойств можно изменить внешний вид маркера списка , добавить изображение для маркера , а также изменить местоположение маркера . Высоту блока маркера можно задать свойством line-height .
Оформление списков с помощью CSS-стилей
1. Тип маркера списка list-style-type
Свойство изменяет типа маркера или удаляет маркер для маркированного и нумерованного списков. Наследуется.
list-style-type | |
---|---|
Значения: | |
disc | Значение по умолчанию. В качестве маркера элементов списка выступает закрашенный кружок. |
armenian | Традиционная армянская нумерация. |
circle | В качестве маркера выступает незакрашенный кружок. |
cjk-ideographic | Идеографическая нумерация. |
decimal | 1, 2, 3, 4, 5, … |
decimal-leading-zero | 01, 02, 03, 04, 05, … |
georgian | Традиционная грузинская нумерация. |
hebrew | Традиционная еврейская нумерация. |
hiragana | Японская нумерация: a, i, u, e, o, … |
hiragana-iroha | Японская нумерация: i, ro, ha, ni, ho, … |
katakana | Японская нумерация: A, I, U, E, O, … |
katakana-iroha | Японская нумерация: I, RO, HA, NI, HO, … |
lower-alpha | a, b, c, d, e, … |
lower-greek | Строчные символы греческого алфавита. |
lower-latin | a, b, c, d, e, … |
lower-roman | i, ii, iii, iv, v, … |
none | Маркер отсутствует. |
square | В качестве маркера выступает закрашенный или незакрашенный квадрат. |
upper-alpha | A, B, C, D, E, … |
upper-latin | A, B, C, D, E, … |
upper-roman | I, II, III, IV, V, … |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
Ul {list-style-type: none;}
ul {list-style-type: square;}
ol {list-style-type: none;}
ol {list-style-type: lower-alpha;}
Рис. 1. Пример оформления маркированного и нумерованного списков
2. Изображения для элементов списка list-style-image
В качестве маркера элементов списка можно использовать изображения и градиентые заливки. Наследуется.
Синтаксис
Ul {list-style-image: url("images/romb.png");}
ul {list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);}
Рис. 2. Оформление маркированного списка с помощью изображения
Рис. 3. Оформление маркированного списка с помощью градиента
3. Местоположение маркера списка list-style-position
Данное свойство предоставляет возможность располагать маркер вне или внутри содержимого элемента списка. Наследуется.
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. Надеемся, Вам понравится использование этих списков!
Перевод — Дежурка
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 устанавливает вид маркера. Вот таблица допустимых значений для этого свойства:
Значение | Пример |
---|---|
disc |
|
circle |
|
square |
|
decimal |
|
decimal-leading-zero |
|
lower-roman |
|
upper-roman |
|
lower-alpha |
|
upper-alpha |
|
georgian |
|
cjk-ideographic |
|
none |
|
В таблице я указал два весьма необычных свойства: georgian и cjk-ideographic . Эти свойства используются регионально. Есть ещё несколько похожих любопытных значений этого свойства, например armenian или hiragana , но все их перечислять нет смысла.
Теперь пример использования этого свойства:
- Первый пункт.
- Второй пункт.
- Третий пункт.
Обратите внимание, мы превратили нумерованный список
-
в маркированный.
- Первый пункт.
- Второй пункт.
- Третий пункт.
- Первый пункт.
- Второй пункт.
- Третий пункт.
-
, обрамлённого красной границей. Это может привести к неожиданным результатам, вот например обнулим внутренние отступы
-
.
- Первый пункт.
- Второй пункт.
- Третий пункт.
-
. Это бы решило данную проблему. Вот для этого и существует свойство list-style-position
.
Свойство list-style-position устанавливает положение маркера относительно блока
-
. Это свойство имеет два значения:
По умолчания используется значение outside .
Применим это свойство к нашему примеру и поместим маркеры в блок
-
, установив этому свойству значение inside
.
Свойство list-style-position. - Первый пункт.
- Второй пункт.
- Третий пункт.
Вот что мы получили:
Рисунок 5. Свойство list-style-position.Теперь маркеры списка вложены в блок
-
.
Свойство list-style
Свойство list-style является сокращённой формой, позволяющей использовать значения всех трёх предыдущих свойств.
Пример: сделаем картинку маркером и поместим маркер внутрь блока пункта списка.
Свойство list-style. - Первый пункт.
- Второй пункт.
- Третий пункт.
Вот результат:
Рисунок 6. Свойство list-style.Мы в одном свойстве list-style указали два значения: положение маркера и путь графичекого файла маркера.
Свойство list-style используют чаще всего, даже для задания одного значения. Оно короткое, его легко написать.
Рецепты CSS по теме
- Как сделать ниспадающее меню на CSS , сложный пример с тенями.
Форматируем список. Вот что мы получим:
Рисунок 4. Форматируем блок- .
Теперь маркеры списка вышли за пределы контейнера
-
. Таким образом маркеры могут выйти и за пределы контейнера статьи, к которой принадлежит список, что нарушит внешний вид сайта.
Лучше бы поместить их внутрь контейнера
Рисунок 1. Свойство list-style-type.
Обязательно обратите внимание на значение none , это значение убирает маркеры вообще. Это свойство часто используется для форматирования списков при помощи CSS.
Свойство list-style-type достаточно простое, как и остальные свойства по работе со списками.
Свойство list-style-image устанавливает символом маркера графический файл.
Вот результат работы этого кода:
Рисунок 2. Свойство list-style-image.Мы видим, что теперь маркеры списка отмечены графическим файлом .
Свойство list-style-position
Перед тем, как приступить к изучению этого свойства, более детально изучим модель форматирования элемента
-
.
Вот что мы видим:
Рисунок 3. Форматируем блок- .
Тут важно обратить внимание на то, что маркеры списка выходят за границу блока элемента