htmlbook.ru - Для тех, кто делает сайты
Статьи Книги Шаг за шагом Рецепты Форум
Главная страница > Свойства CSS > list-style
Свойства CSS
!important
@charset
@import
@font-face
@media
@page
active
after
background
background-attachment
background-color
background-image
background-position
background-repeat
before
border
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-collapse
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-style
border-top-width
border-width
bottom
caption-side
clear
clip
color
content
cursor
counter-increment
counter-reset
direction
display
empty-cells
first-child
first-letter
first-line
float
focus
font
font-family
font-size
font-style
font-variant
font-weight
height
hover
lang
left
letter-spacing
line-height
link
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
orphans
outline
outline-color
outline-style
outline-width
overflow
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
position
quotes
right
table-layout
text-align
text-decoration
text-indent
text-shadow
text-transform
top
unicode-bidi
vertical-align
visibility
visited
white-space
widows
width
word-spacing
z-index
CSS по типам
@-правила
Цвет и фон
Границы
Позиционирование
Размеры
Форматирование
Шрифт
Текст
Список
Отступы
Поля
Таблица
Интерфейс
Контент
Печать
Псевдоклассы
Псевдоэлементы
CSS 3
background-size
border-bottom-left-radius
border-bottom-right-radius
border-radius
border-top-left-radius
border-top-right-radius
box-sizing
opacity
overflow-x
overflow-y
text-overflow
word-wrap
writing-mode
:empty
:first-of-type
:last-child
:last-of-type
:not
:nth-child
:nth-last-child
:nth-of-type
:only-of-type
:root
:target

list-style

Internet ExplorerInternet Explorer ChromeChrome OperaOpera SafariSafari FirefoxFirefox
6.0 7.0 8.0 2.0 3.0 4.0 9.2 9.6 10 2.0 3.1 4.0 2.0 3.0 3.6
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Да

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

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

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3
Да Да Да Да

Описание

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

Синтаксис

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

Значения

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

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

Пример

HTML 4.01CSS 2.1CSS 3IE 6IE 7IE 8Op 9.6Op 10Sa 3.1Sa 4Cr 3Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>list-style</title>
  <style type="text/css">
   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

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

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

[window.]document.getElementById("elementID").style.listStyle

Браузеры

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

Copyright 2002–2010 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru

О сайте | Планы на будущее | Использование сайта | Борьба с ошибками | Технологии | Поддержать проект