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

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

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

Пример:

display: none|inline|block|inline-block|list-item|run-in|table|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. Остальные значения слишком специфичны, чтобы часто их применять.

Поделитесь на страничке

Следующая глава >

Похожие главы из других книг

6.5.2 Другие режимы отображения

Из книги Linux для пользователя автора Костромин Виктор Алексеевич

6.5.2 Другие режимы отображения Помимо того, что может задаваться формат вывода на панель списка файлов, любую панель можно перевести в один из следующих режимов. • Режим "Информация". В этом режиме (рис. 6.3) на панель выводится информация о подсвеченном в другой панели файле


Масштабирование отображения данных

Из книги Sound Forge 9 автора Квинт Игорь

Масштабирование отображения данных Данные, отображаемые в области просмотра окна данных, можно масштабировать – уменьшать или увеличивать диаграмму, что позволит более детально рассматривать шумы, помехи и сделает работу более удобной.В нижней части окна данных (см.


Включение отображения

Из книги Язык программирования С# 2005 и платформа .NET 2.0. [3-е издание] автора Троелсен Эндрю

Включение отображения В этот момент обработчик событий Tick должен отобразить в панели toolStripStatusLabelClock текущее время, если значением по умолчанию члена-переменной DateTimeFormat является DateTimeFormat.ShowClock. Чтобы позволить пользователю переключаться между отображением даты и времени,


Настройки отображения

Из книги Adobe InDesign CS3 автора Завгородний Владимир

Настройки отображения В силу того что на одной странице документа может быть большое количество текста, графики, иллюстраций, изначально InDesign отображает документ со слегка заниженным качеством – с уменьшенной детализацией графики и т. д.Для удобства пользования


Настройка стиля отображения

Из книги AutoCAD 2009 для студента. Самоучитель автора Соколова Татьяна Юрьевна

Настройка стиля отображения Стиль отображения можно выбрать в любой момент и при необходимости изменить его параметры или создать собственный стиль, изменяя настройки граней и кромок и используя затенение и фон. Команда VISUALSTYLES загружает Диспетчер визуальных стилей


ГЛАВА 9. Параметры абзацев, списков и отображения

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

ГЛАВА 9. Параметры абзацев, списков и отображения В предыдущей главе мы рассмотрели атрибуты стиля, предназначенные для задания параметров текста (шрифта, его размера, начертания, тени и пр.) и фона эле- ментов Web-страниц. Изучили новый элемент Web-страницы — встроенный


ГЛАВА 9. Параметры абзацев, списков и отображения 

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

ГЛАВА 9. Параметры абзацев, списков и отображения  В предыдущей главе мы рассмотрели атрибуты стиля, предназначенные для задания параметров текста (шрифта, его размера, начертания, тени и пр.) и фона элементов Web-страниц. Изучили новый элемент Web-страницы — встроенный


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

Из книги Разработка приложений в среде Linux. Второе издание автора Джонсон Майкл К.

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


13.2.2. Установка отображения в памяти

Из книги Руководство по переходу на Ubuntu 10.04 LTS «Lucid Lynx» автора Неворотин Вадим

13.2.2. Установка отображения в памяти Новые карты памяти создаются с помощью системного вызова mmap().#include <sys/mman.h>caddr_tmmap(caddr_t address, size_t length , int protection, int flags, int fd, off_t offset);Параметр address указывает, где именно в памяти необходимо отображать данные. Обычно address — это NULL, который


12.3 Способ отображения содержимого

Из книги AutoCAD 2008 для студента: популярный самоучитель автора Соколова Татьяна Юрьевна

12.3 Способ отображения содержимого Есть одна очень полезная функция, про которую некоторые пользователи, как показывает практика, даже не догадываются: изменение способа отображения содержимого папок. Попробуйте понажимать следующие сочетания кнопок, находясь в


Настройка стиля отображения

Из книги C++ для начинающих автора Липпман Стенли

Настройка стиля отображения Стиль отображения можно выбрать в любой момент и, при необходимости, изменить его параметры или создать собственный стиль, изменяя настройки граней и кромок и используя затенение и фон. Команда VISUALSTYLES загружает Диспетчер визуальных стилей


7.3.2. Параметры-ссылки и параметры-указатели

Из книги автора

7.3.2. Параметры-ссылки и параметры-указатели Когда же лучше использовать параметры-ссылки, а когда – параметры-указатели? В конце концов, и те и другие позволяют функции модифицировать объекты, эффективно передавать в функцию большие объекты типа класса. Что выбрать:


27.5. Параметры транзитных узлов и параметры получателя IPv6

Из книги автора

27.5. Параметры транзитных узлов и параметры получателя IPv6 Параметры для транзитных узлов и параметры получателя IPv6 имеют одинаковый формат, показанный на рис. 27.3. Восьмиразрядное поле следующий заголовок (next header) идентифицирует следующий заголовок, который следует за