Вы здесь

Типы представления

Ключом к успешному манипулированию элементами HTML является понимание того, что в том, как большинство из них работает, нет ничего особенного. Большинство веб-страниц могут быть созданы при помощи всего нескольких тегов, которым затем можно назначить любой стиль. По умолчанию, визуальное отображение браузерами большинства элементов HTML состоит из варьирования стилей шрифтов, отступов, полей и, главным образом, типов представления.

Основополагающими типами представления являются строчный, блоковый и невидимый. Маипулировать типами представления можно при помощи свойства display и его значений inline, block и none. Сюда же относится и свойство visibility со значениями hidden и visible

Элементы, отображаемые по типу inline (строчный тип), следуют ходу строки. Примерами элементов, отображаемых по строчному типу, являются тег strong, тег em, тег a.

Перед элементами, отображаемыми по типу block (блоковый тип), и после них всегда вставляется разрыв строки. В качестве примера элементов, традиционно отображаемых по блоковому типу, можно привести заголовки и параграфы.

Невидимый тип представления none вовсе не отображает элемент. Он может показаться совершенно бесполезным, однако используется для создания интересных эффектом (с учетом, конечно, доступности; см. Доступные ссылки), альтернативных стилей или расширенных эффектов наведения курсора мыши.

Следующий пример изменяет тип представления некоторых элементов, чтобы отображение соответствовало задуманному дизайну.

h1 {
   display: inline;
   font-size: 2em;
}

#header p {
   display: inline;
   font-size: 0.9em;
   padding-left: 2em;
}

Это позволяет отображать название и пояснение в одну строку, а не друг над другом, сохраняя при этом прежнюю доступность.

Следующий код можно использовать в стилях для принтера для "отключения" некоторых элементов страницы (например, блока навигации), которые совершенно не важны в напечатанной одиночной странице.

#navigation, #seeAlso, #comments, #standards {
   display: none;
}

Свойства display: none и visibility: hidden отличаются друг от друга тем, что первое совершенно изымает элемент из потока, а второе сохраняет элемент на соответствующем месте, отключая лишь его визуальное отображение. Например, если есть три параграфа – 1, 2, 3, и к параграфу 2 применить display: none, то параграф 3 будет отображаться сразу же за параграфом 1, а если к нему применить visibility: hidden, то параграф 3 будет отображаться за параграфом 1, но через промежуток, равный размеру параграфа 2.

Таблицы

Возможно, лучший способ понять табличные типы представления, это вспомнить о HTML таблицах. Значение table свойства display задает начальный тип представления, а строки и ячейки можно имитировать при помощи значений table-row и table-cell.

Но CSS идет еще дальше, позволяя свойству display принимать значения table-column, table-row-group, table-column-group, table-header-group, table-footer-group и table-caption, которые, если к ним присмотреться как следует, говорят сами за себя. Здесь сразу же можно заметить вполне очевидную пользу – у нас появляется возможность конструировать таблицы, основой которых будут столбцы, а не строки, как в HTML.

И, наконец, значение inline-table по существу устанавливает "строчную" таблицу, т.е. без перевода строки перед и после нее.

Тем не менее, чрезмерное увлечение CSS таблицами может самым серьезным образом разрушить доступность вашего сайта. HTML должен использоваться для определения значения контента, а значит если у вас есть табличные данные, то и размещаться они должны в HTML таблицах. Использование исключительно CSS таблиц может привести к месиву из данных, совершенно не читаемых без CSS. А это очень плохо.

Другие типы представления

Значение list-item свойства display представляет элемент так, как делает HTML тег li. Чтобы все работало как следует, элемент должен быть вложен в элемент ul или элемент ol.

Значение run-in устанавливает элемент как блочный или строчный в зависимости от типа представления его родителя. Это значение не работает в браузерах IE и Mozilla.

Значение compact также устанавливает элемент как блочный или строчный в зависимости от контекста. Также не везде работает.

Значение marker используется исключительно с псевдоэлементами :before и :after для определения представления для значения свойства content. Представление свойства content по умолчанию уже имеет значение marker, так что использование его имеет смысл только в том случае, если ранее переопределялось свойство display для псевдоэлементов.