2.9. CSS-списки
CSS-списки — набор свойств, отвечающих за оформление списков. Использование HTML-списков очень распространено при создании панелей навигации по сайту. Элементы списка представляют набор блочных элементов.
С помощью стандартных CSS-свойств можно изменить внешний вид маркера списка, добавить изображение для маркера, а также изменить местоположение маркера. Высоту блока маркера можно задать свойством line-height.
Оформление списков с помощью CSS-стилей
- Содержание:
- 1. Тип маркера списка list-style-type
- 2. Изображения для элементов списка list-style-image
- 3. Местоположение маркера списка list-style-position
- 4. Краткая форма задания стилей списка list-style
- 5. Примеры красивого оформления списков
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 | Наследует значение свойства от родительского элемента. |
Синтаксис
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: decimal-leading-zero;
list-style-type: lower-roman;
list-style-type: upper-roman;
list-style-type: lower-greek;
list-style-type: lower-latin;
list-style-type: upper-latin;
list-style-type: armenian;
list-style-type: georgian;
list-style-type: lower-alpha;
list-style-type: upper-alpha;
list-style-type: none;
list-style-type: inherit;
list-style-type: initial;
2. Изображения для элементов списка list-style-image
В качестве маркера элементов списка можно использовать изображения и градиентые заливки.
Свойство наследуется.
| list-style-image | |
|---|---|
| Значения: | |
| url(url) | Путь к изображению. |
| none | значение по умолчанию, означает отсутствие изображения. Также убирает изображение для элемента из группы элементов с установленным изображением-маркером. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
list-style-image: url("images/romb.png");
list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);
list-style-image: none;
list-style-image: inherit;
list-style-image: initial;
3. Местоположение маркера списка list-style-position
Данное свойство предоставляет возможность располагать маркер вне или внутри содержимого элемента списка.
Свойство наследуется.
| list-style-position | |
|---|---|
| Значения: | |
| outside | Значение по умолчанию. Маркер располагается вне блока с текстом. |
| inside | Маркер списка изображается в одном блоке с текстом. Последующие строки текста будут располагаться под значком маркера, т.е. маркер будет обтекаться текстом. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
list-style-position: inside;
list-style-position: outside;
list-style-image: inherit;
list-style-image: initial;
4. Краткая форма задания стилей списка
Можно объединить все три свойства форматирования списка в одно с помощью list-style. Значения свойств могут быть расположены в произвольном порядке, а часть значений может быть опущена. Если присутствует одно значение, то другие свойства примут значения браузера по умолчанию.
Синтаксис
ul {
list-style: url("images/romb.png") inside;
}4. Примеры красивого оформления списков
Перейти на страницу с примерами
По материалам CSS 2
