Нумерованный список css list style. Правила CSS для настройки внешнего вида списка на html странице
Свойство 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 , сложный пример с тенями.
Здравствуйте, уважаемые читатели блога сайт. Сегодня будет очередная статья о свойствах каскадных таблиц стилей. В ней речь пойдет об оформлении с помощью правил CSS.
Вообще списки среди блочных элементов стоят особняком. Это связано с тем, что они включают в себя маркеры и нумерацию, которые расставляет сам браузер.
Свойство List style — оформление списка на html странице
В языке CSS существует три свойства начинающихся с list-style, которые отвечают за оформление маркированных и нумерованных списков. Плюс еще есть сборное правило list-style, позволяющее сократить количество кода.
Все эти свойства допустимо использовать как для html элементов li, так и для элементов ul и ol. Единственное отличие, если правила прописать для конкретного значения списка li, то оно только для него и применится. А если эти же css правила прописать для контейнеров ul или ul, то они применятся для всех элементов li заключенных в этих контейнерах.
Начнем с атрибута list-style-type , который задает вид маркеров или нумерации у пунктов списка:
list-style-type: disc|circle|square|decimal|decimal-leading-zero|lower-roman|upper-roman|lower-greek|lower-alpha|lower-latin|upper-alpha|upper-latin|armenian|georgian|none|inherit
Как видно, свойство list-style-type имеет много доступных значений, которые могут задавать как вид маркера, так и различные виды нумерации.
- disc - маркер в виде черного кружка (значение по умолчанию для маркированных списков).
- circle - маркер в виде не закрашенного кружка.
- square - маркер в виде квадратика. Он может быть светлым или темным, в зависимости от браузера.
- decimal - нумерация арабскими цифрами (значение по умолчанию для нумерованных списков).
- decimal-leading-zero - нумерация арабскими цифрами от 01 до 99 с начальным нулем.
- lower-roman - нумерация маленькими римскими цифрами.
- upper-roman - нумерация большими римскими цифрами.
- lower-greek - нумерация маленькими греческими буквами.
- lower-alpha и lower-latin - нумерация маленькими латинскими буквами.
- upper-alpha и upper-latin - нумерация большими латинскими буквами.
- armenian - нумерация традиционными армянскими цифрами.
- georgian - нумерация традиционными грузинскими цифрами.
- none - маркерация и нумерация осуществляться вообще не будет.
Так примерно будут выглядеть элементы списка в браузере с различными значениями list-style-type:
При использовании CSS стилей не важно какой элемент (OL или UL) используется для создания списка. OL и UL отличаются только поведением по умолчанию и с помощью свойства list-style-type вы можете легко превратить один вид списка в другой.
Атрибут стиля list-style-image позволяет задавать в качестве маркера пунктов списка графическое изображение . При использовании атрибута list-style-image значение атрибута list-style-type игнорируется:
list-style-image: none|<интернет-адрес файла изображения>|inherit
Значение none убирает маркер изображение и устанавливает обычный, не графический. Это поведение по умолчанию.
При указании адреса файла изображения, на место маркера будет вставлена картинка. Как и при использовании , в качестве адреса картинки можно использовать как абсолютные так и относительные адреса. В случае если браузер не сможет подгрузить изображение, то будет использоваться маркер или нумерация по умолчанию или то, что прописано в свойстве в list-style-type.
Пример списка с картинкой в качестве маркера:
- первый пункт списка;
- второй пункт списка;
- третий пункт списка.
А вот как это выглядит:
- первый пункт списка;
- второй пункт списка;
- третий пункт списка.
Понятно, что при выборе картинки в качестве маркера лучше подбирать небольшое изображение.
И последнее свойство CSS из серии list-style — list-style-position, которое позволяет указать местоположение маркера или нумерации в пункте списка. В качестве значения может быть два варианта:
list-style-position: inside|outside
В случае значения inside маркер или нумерация помещается как бы внутри списка, а в случае outside за пределами элементов li. По умолчанию используется значение outside и маркер выносится за пределы.
Пример списка с различными значениями list-style-position:
- в первом пункте все по умолчанию;
- во втором пункте list-style-position установлен в inside. В этом случае, обратите внимание, вторая строка размещается на одном уровне с маркером;
- в этом пункте list-style-position равен outside.
Сборное CSS правило list-style
Следующее свойство CSS list-style является сборным для оформления списков. Оно позволяет записать все три рассмотренных выше CSS правила в одно единое. Порядок указания значений в нем может быть любым и параметры, которые вы не зададите в list-style браузер возьмет принятые по умолчанию.
Разделять значения в сборном правиле list-style следует пробелами:
list-style: list-style-type list-style-image list-style-position;
Реальное CSS правило для оформления списков может выглядеть примерно вот так:
list-style: circle url (http://сайт/images/marker.png) outside;
Таким образом свойство list-style позволяет значительно сократить объем кода, ведь вместо трех правил достаточно задать лишь одно.
Как уже говорилось выше, значения можно указывать в любом порядке и любом количестве. Так, например, для того чтобы убрать маркеры из списка меню достаточно записи:
list-style: none;
Тоже самое можно сделать используя свойство list-style-type:
list-style-type: none;
На этом рассказ об оформлении html списков при помощи каскадных таблиц стилей я закончу. Чтобы узнать о других CSS свойствах вы можете почитать статьи из раздела « » и не забудьте подписаться на обновления блога . До новых встреч!
Сегодня нет практически ни одного сайта, где бы не использовались HTML списки (
- представляет упорядоченный список,
- Home
- Blog
- About
- Contact
- Java
- .NET
- Toronto2004
- Beijing2008
- London2012
- Rio de Janeiro2016
- Google
- Picasa
- Feedburner
- Youtube
- Microsoft
- Corel Corporation
- Zignals
- ByteTaxi
- Yahoo!
- Xoopit
- BuzzTracker
- MyBlogLog
- Lorem ipsum dolor sit amet, ...
Fusce sit amet ... - Aenean placerat lectus tristique...
Vivamus interdum ... - Mauris eget sapien arcu, vitae...
Phasellus neque risus... - Phasellus feugiat lacus ...
Duis rhoncus ... - First inline item
- Second inline item
- Third inline item
- Fourth inline item
- Home
- Blog
- About
- Contact
-
наследует стилевые свойства
тега
-
или
- Заголовок должен быть короче трех строк.
- При названии разделов используйте уже устоявшиеся термины, такие как гостевая книга, чат, ссылка, главная страница и другие.
- Перед использованием специального термина или слова, решите, будет ли оно понятно читателю.
- работоспособность всех ссылок
- поддержку разных браузеров
- читабельность текста
- работоспособность всех ссылок
- поддержку разных браузеров
- читабельность текста
- работоспособность всех ссылок
- поддержку разных браузеров
- читабельность текста
- первый
- второй
- третий
- первый
- второй
- третий
- первый
- второй
- третий
- первый
- второй
- третий
- первый
- второй
- третий
-
,
который выступает в качестве его родителя, то можно устанавливать стиль как
для селектора UL
, так и для селектора LI
.
Так, в примере 1 используется селектор UL
, для
него и задаются стилевые параметры.
Пример 1. Создание маркированного списка
Списки Результат данного примера показан на рис. 1. Используются квадратные маркеры и их внешнее размещение относительно текста.
Рис. 1. Вид списка, измененого с помощью стилей
Чтобы установить свое собственное изображение в качестве маркера применяется свойство list-style-image , как показано в примере 2.
Пример 2. Использование изображений в качестве маркера
Списки Результат данного примера показан на рис. 2. В качестве маркеров используется маленькая картинка.
Рис. 2. Изображения в качестве маркеров
Некоторые примеры создания различных списков приведен в табл. 2.
Табл. 2. Возможные виды списков
Код HTML Пример Что следует учитывать при тестировании сайта: Что следует учитывать при тестировании сайта: Нумерованный список с арабскими цифрами:
Нумерованный список со строчными римскими цифрами:
Нумерованный список с заглавными римскими цифрами:
Нумерованный список со строчными буквами латинского алфавита:
Нумерованный список с заглавными буквами латинского алфавита:
- - неупорядоченный список). В этом уроке я покажу вам 8 отличных способов, позволяющих сделать обычные скучные html-списки привлекательными. Мы лишь добавим несколько простых CSS техник и наши списки не только приобретут потрясающий вид, но и несколько дополнительных возможностей.
А теперь посмотрите демо-версию, чтобы увидеть, что же мы с вами будем создавать.
Выглядят гораздо лучше, не так ли? И вы тоже можете создать такие списки при помощи простого CSS кода. Хотите знать как? Читайте!
Список #1: Простая система навигации
Чаще всего списки используются при создании навигационного меню. Код данного HTML/CSS примера позволяет создать простую, даже немного скромную, но привлекательную систему навигации.
/* LIST #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: Использование различного шрифта при нумерации
Проблема при использовании списка в том, что он сливается с текстом. А цифры всегда того же цвета, что и текст.
Но стоит добавить немного стилей, и вы забудете о вышеперечисленных ограничениях, а ваши списки станут гораздо привлекательнее. Вот как это делается: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 ...
/* LIST #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: Изображения-маркеры
Вы легко можете поменять вид маркеров неупорядоченного списка, указав одно из стандартных значений, но ведь можно в качестве маркеров использовать и изображения. Такое решение поможет сделать ваши списки более оригинальными. А вот и код:
/* LIST #3 */ #list3 { } #list3 ul { list-style-image: url("../images/arrow.png"); color:#eee; font-size:18px; } #list3 ul li { line-height:30px; }
Список #4: iPhone-стиль
Данный список взят из статьи the iPhone Contacts App, созданный при помощи CSS и jQuery. Так выглядят списки на iPhone. Очень привлекательно, не так ли? Хотите такой на свой сайт?
/* LIST #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:
/* LIST #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 и т.д.). Изменив значение в CSS, вы можете задать другой тип нумерации, к примеру, римский.
Так же по умолчанию, нумерация и маркеры располагаются вне списка (отличный пример тому - наш список под номером 2). Но и это исправимо, всего лишь нужно изменить значение list-style-position свойства на inside./* LIST #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 символического кода.
/* LIST #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). При наведении курсора на один из элементов блока включается эффект - вращение. Конечно не самый удобный способ, но очень красивый.
/* LIST #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; }
Заключение
Как видите, реально создать уникальные вещи из обычного html-списка. И все это силами CSS. Очень рад, если вы узнали много интересного для себя.
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
Данное свойство предоставляет возможность располагать маркер вне или внутри содержимого элемента списка. Наследуется.
С помощью CSS можно создать маркированные и нумерованные списки, а также использовать в качестве маркера подходящее изображение.
В табл. 1 перечислены свойства элементов, предназначенных для создания и изменения списков.
Табл. 1. Свойства CSS для управления видом списка
Свойство Значение Описание Пример 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 Универсальное свойство, включает одновременно все вышеперечисленные свойства. Поскольку тег
Форматируем список. Вот что мы получим:
Рисунок 4. Форматируем блок- .
Теперь маркеры списка вышли за пределы контейнера
-
. Таким образом маркеры могут выйти и за пределы контейнера статьи, к которой принадлежит список, что нарушит внешний вид сайта.
Лучше бы поместить их внутрь контейнера
Рисунок 1. Свойство list-style-type.
Обязательно обратите внимание на значение none , это значение убирает маркеры вообще. Это свойство часто используется для форматирования списков при помощи CSS.
Свойство list-style-type достаточно простое, как и остальные свойства по работе со списками.
Свойство list-style-image устанавливает символом маркера графический файл.
Вот результат работы этого кода:
Рисунок 2. Свойство list-style-image.Мы видим, что теперь маркеры списка отмечены графическим файлом .
Свойство list-style-position
Перед тем, как приступить к изучению этого свойства, более детально изучим модель форматирования элемента
-
.
Вот что мы видим:
Рисунок 3. Форматируем блок- .
Тут важно обратить внимание на то, что маркеры списка выходят за границу блока элемента