Параметр 'list-style'
Данный параметр определяет все характеристики списка в одном объявлении.
Наследование:да.
Может принимать следующие значения:
| list-style | Задает характеристики списка |
| list-style-type | |
| list-style-position | |
| list-style-image |
Примеры:
ol { list-style: square inside url("www.intuit.ru/departament/image.gif") }
ul { list-style: circle inside }
Параметр 'list-style-image'
Данный параметр позволяет заменить маркер элемента списка указанным изображением. Необходимо определять параметр "list-style-type" на тот случай, если изображение будет недоступно.
Наследование:да.
Может принимать следующие значения:
| url | Путь доступа к изображению |
| None | Изображение не выводится |
Пример:
ul { list-style-image: url("www.intuit.ru/speciality/image.gif"); list-style-type: square }
Параметр 'list-style-position'
Параметр определяет способ размещения маркера элемента списка.
Наследование:да.
Может принимать следующие значения:
| inside | Маркер смещен внутрь текста |
| outside | Маркер располагается слева от текста |
Пример:
ul { list-style-position: outside }
Параметр 'list-style-type'
Данный параметр задает тип маркера элемента списка.
Наследование:да.
Может принимать следующие значения:
| none | Без маркера |
| disc | Маркер — закрашенный круг |
| circle | Маркер — окружность |
| square | Маркер — закрашенный квадрат |
| decimal | Маркер — число |
| decimal-leading-zero | Маркер — число с добавленным ведущим нулем (01, 02, 03 b и т.д.) |
| lower-roman | Маркер — римские цифры, представленные строчными буквами (i, ii, iii, iv, v и т.д. ) |
| upper-roman | Маркер — римске цифры, представленные прописными буквами (I, II, III, IV, V и т.д.) |
| lower-alpha | Маркер — латинские строчные буквы (a, b, c, d, e и т.д.) |
| upper-alpha | Маркер —- латинские прописные буквы (A, B, C, D, E и т.д.) |
| lower-greek | Маркер — греческие прописные буквы (альфа, бета, гамма и т.д.) |
| lower-latin | Маркер — латинские строчные буквы (a, b, c, d, e и т.д.) |
| upper-latin | Маркер — латинские прописные буквы (A, B, C, D, E и т.д.) |
| hebrew | Традиционная еврейская нумерация |
| armenian | Традиционная армянская нумерация |
| georgian | Традиционная грузинская нумерация (an, ban, gan, и т.д.) |
| cjk-ideographic | Маркер — простые идеографические числа |
| hiragana | Маркер — a, i, u, e, o, ka, ki, и т.д. |
| katakana | Маркер — A, I, U, E, O, KA, KI и т.д. |
| hiragana-iroha | Маркер — i, ro, ha, ni, ho, he, to и т.д. |
| katakana-iroha | Маркер — I, RO, HA, NI, HO, HE, TO и т.д. |
Примеры:
ol { list-style-type: circle }
ul { list-style-type: decimal }
Параметры списков в CSS
Как было отмечено выше, параметры списков в CSS позволяют разместить и изменять маркеры элементов списка, задавать изображение в качестве маркера элемента списка.
Поддерживаются следующими браузерами: Internet Explorer, Firefox, Netscape.
| list-style | Параметр для задания всех характеристик списка в одном объявлении | list-style-type | 4 | 1 | 6 | 1 |
| list-style-position | ||||||
| list-style-image | ||||||
| list-style-image | Задает изображение в качестве маркера элемента списка | none | 4 | 1 | 6 | 1 |
| url | ||||||
| list-style-position | Задает размещение в списке маркера элемента списка | inside | 4 | 1 | 6 | 1 |
| outside | ||||||
| list-style-type | Задает тип маркера элемента списка | none | 4 | 1 | 4 | 1 |
| disc | ||||||
| circle | ||||||
| square | ||||||
| decimal | ||||||
| decimal-leading-zero | ||||||
| lower-roman | ||||||
| upper-roman | ||||||
| lower-alpha | ||||||
| upper-alpha | ||||||
| lower-greek | ||||||
| lower-latin | ||||||
| upper-latin | ||||||
| hebrew | ||||||
| armenian | ||||||
| georgian | ||||||
| cjk-ideographic | ||||||
| hiragana | ||||||
| katakana | ||||||
| hiragana-iroha | ||||||
| katakana-iroha | ||||||
| marker-offset | auto | 1 | 7 | 2 | ||
| length |
Этот пример показывает, как задать
- Этот пример показывает, как задать различные маркеры элементов списка. <html> <head> <style type="text/css"> ol.no {list-style-type: none} ul.ds {list-style-type: disc} ol.sqr {list-style-type: square} ul.crl {list-style-type: circle} </style> </head>
<body> <ol class="no"> <li>Первый элемент</li> <li>Второй элемент</li> <li>Третий элемент</li> </ol>
<ul class="ds"> <li>Первый элемент</li> <li>Второй элемент</li> <li>Третий элемент</li> </ul>
<ol class="sqr"> <li>Первый элемент</li> <li>Второй элемент</li> <li>Третий элемент</li> </ol>
<ul class="crl"> <li>Первый элемент</li> <li>Второй элемент</li> <li>Третий элемент</li> </ul>
</body>
</html> Этот пример показывает, как задать различные маркеры элементов списка. <html> <head> <style type="text/css"> ul.dec {list-style-type: decimal} ol.lwrm {list-style-type: lower-roman} ul.uprm {list-style-type: upper-roman} ol.lwalph {list-style-type: lower-alpha} ul.upalph {list-style-type: upper-alpha} </style> </head>
<body>
<ol class="lwalph"> <li>Первый элемент</li> <li>Второй элемент</li> <li>Третий элемент</li> </ol>
<ul class="upalph"> <li>Первый элемент</li> <li>Чай</li> <li>Третий элемент</li> </ul>
<ol class="lwrm"> <li>Первый элемент</li> <li>Второй элемент</li> <li>Третий элемент</li> </ol>
<ul class="uprm"> <li>Первый элемент</li> <li>Второй элемент</li> <li>Третий элемент</li> </ul>
<ul class="dec"> <li>Первый элемент</li> <li>Второй элемент</li> <li>Третий элемент</li> </ul>
