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

Еще одна группа атрибутов стиля управляет тем, как элемент будет отображаться на 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-страницы: будет он блочным, встроенным или вообще пунктом списка.

Пример:

inline-table|table-caption|table-column|table-column-group|

table-header-group|table-row-group|table-footer-group|table-row|

table-cell|inherit

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

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

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

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

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

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

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

- table — таблица.

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

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

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

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

- table-header-group — секция заголовка таблицы.

- table-row-group — секция тела таблицы.

- table-footer-group — секция завершения таблицы.

- table-row — строка таблицы.

- table-cell — ячейка таблицы.

ВНИМАНИЕ!

Некоторые значения атрибута стиля display определенные Web-обозреватели могут не поддерживать.

Значение по умолчанию атрибута стиля display зависит от конкретного элемента Web-страницы. Так, для абзаца значением по умолчанию будет block, а для графического изображения (которое, как мы знаем из главы 4, является встроенным элементом) — inline.

Вот пример комбинированного стиля, позволяющего определенным графическим изображениям отображаться как блочные элементы:

IMG.block { display: block }

А вот стиль, после применения которого пункты списков станут встроенными элементами и будут выводиться в одну строку:

Пример:

LI { display: inline }

Еще один пример:

.hidden { display: none }

Применение к элементу Web-страницы данного стиля делает элемент невидимым. Более того, на самой Web-странице даже не останется никакого признака того, что данный элемент на ней присутствовал.

В большинстве практических случаев достаточно значений none, block и inline атрибута стиля display. Остальные значения слишком специфичны, чтобы часто их применять.