HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов, Дронов Владимир

HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

на обложку

Дронов Владимир

Шрифт:

— lower-roman — нумерация маленькими римскими цифрами. upper-roman — нумерация большими римскими цифрами.

— lower-greek — нумерация маленькими греческими буквами.

— lower-alpha и lower-latin — нумерация маленькими латинскими буквами.

— upper-alpha и upper-latin — нумерация большими латинскими буквами.

— armenian — нумерация традиционными армянскими цифрами.

— georgian — нумерация традиционными грузинскими цифрами.

— none — маркер и нумерация отсутствуют (обычное поведение для не-списков).

НА

ЗАМЕТКУ

Мы рассмотрели только значения атрибута стиля list-style-type, предлагаемые стандартом CSS 3. Однако стандарт CSS 2 предусматривал еще несколько значений, которые до сих пор поддерживаются Web-обозревателями. Вы можете найти их на Web-странице https://developer.mozilla.org/en/CSS/list-style-type.

Атрибут стиля list-style-type можно задавать как для самих списков, так и для отдельных пунктов списков. В последнем случае создается список, в котором пункты имеют разные маркеры или нумерацию. Иногда это может пригодиться.

Вот определение маркированного списка с маркером в виде квадратика:

UL { list-style-type: square }

А в листинге 9.1 мы задали такой же маркер для одного из пунктов маркированного списка.

Листинг 9.1

squared { list-style-type: square }

<UL>

<LI>Первый пункт</LI>

<LI CLASS="squared">Второй пункт (с другим маркером)</LI>

<LI>Третий пункт</LI>

</UL>

Атрибут стиля list-style-image позволяет задать в качестве маркера пунктов списка какое-либо графическое изображение (создать графический маркер).

В этом случае значение атрибута стиля list-style-type, если таковой задан, игнорируется:

list-style-image: none|<интернет-адрес файла изображения>|inherit

Интернет-адрес файла с графическим маркером задается в таком же формате, что и интернет-адрес файла фонового изображения (см. главу 8):

UL { list-style-image: url(/markers/dot.gif) }

Значение none убирает графический маркер и возвращает простой, неграфический. Это обычное поведение.

Атрибут стиля list-style-image также можно задавать как для самих списков, так и для отдельных их пунктов.

Атрибут стиля list-style-position позволяет указать местоположение маркера или нумерации в пункте списка:

list-style-position: inside|outside|inherit

Доступных значений здесь два:

— inside — маркер или нумерация находятся как бы внутри пункта списка, являются его частью;

— outside — маркер или нумерация вынесены за пределы пункта списка (это обычное поведение).

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

Пример:

OL { list-style-position: inside }

Параметры отображения

Еще

одна группа атрибутов стиля управляет тем, как элемент будет отображаться на Web-странице, т. е. будет он блочным или встроенным, и будет ли он отображаться вообще. Эти атрибуты стиля применимы к любым элементам Web-страниц.

Атрибут стиля visibility позволяет указать, будет ли элемент отображаться на Web-странице:

visibility: visible|hidden|collapse|inherit

Он может принимать три значения:

— visible — элемент отображается на Web-странице (это обычное поведение);

— hidden — элемент не отображается на Web-странице, однако под него все еще выделено на ней место. Другими словами, вместо элемента на Web-странице видна пустая "прореха";

— collapse — применим только к строкам, секциям, столбцам и группам столбцов таблицы (о столбцах и группах столбцов пойдет речь в главе 13). Элемент не отображается на Web-странице, и под него не выделяется место на ней (т. е. никаких "прорех"). Однако Web-обозреватель считает, что данный элемент Web- страницы все еще на ней присутствует. Данное значение поддерживают не все Web-обозреватели.

Атрибут стиля visibility применяется довольно редко и только для создания специальных эффектов, наподобие исчезающего или появляющегося элемента Web-страницы. Используется он всегда совместно с соответствующим поведением (о поведении Web-страниц пойдет речь в части III).

Атрибут стиля display весьма примечателен. Он позволяет задать вид элемента Web-страницы: будет он блочным, встроенным или вообще пунктом списка.

Пример:

Доступных значений у этого атрибута стиля очень много.

— none — элемент вообще не будет отображаться на Web-странице, словно он и не задан в ее HTML-коде.

— inline — встроенный элемент.

— block — блочный элемент.

— inline-block — блочный элемент, который будет "обтекаться" содержимым соседних блочных элементов.

— list-item — пункт списка.

— run-in — встраивающийся элемент. Если за таким элементом следует блочный элемент, он становится частью данного блочного элемента (фактически — встроенным в него элементом), в противном случае он сам становится блочным элементом.

— table — таблица.

— inline-table — таблица, отформатированная как встроенный элемент. (Оказывается, мы все-таки можем поместить таблицу в абзац! Только кому это нужно…)

— table-caption — заголовок таблицы.

— table-column — столбец таблицы (подробнее о столбцах таблицы и формирующих их тегах мы поговорим в главе 13).

— table-column-group — группа столбцов таблицы (подробнее о группах столбцов и формирующих их тегах мы поговорим в главе 13).