Установка свойства display

Свойство display управляет основным способом отображения текста элемента браузером. Вы можете назначить ему три ключевых слова CSS:

block. Браузер всегда помещает пустую строку перед и после текста элемента (который включает и текст, принадлежащий любым дочерним элементам). В результате текст элемента отображается в отдельном "блоке" с предшествующим текстом выше и последующим текстом ниже. Присвоение значения block позволяет вам форматировать текст, с применением различных свойств обрамления к блоку текста, таких как поля, рамки и отступы. Элемент block похож на абзац в программе текстового процессора, который отделен пробелами от предшествующего и последующего текста, и для которого можно задавать отступы, рамки и т.д.;
inline (по умолчанию). Браузер не вставляет пустую строку перед или после текста элемента (если только предшествующий текст достиг правой границы окна, и браузер должен перенести текст на следующую строку). Он будет вставлять пустые строки внутри текста элемента только с целью уместить текст в окне. Текст элемента, таким образом, может быть размещен в той же строке, что и предыдущий или последующий текст. Элемент inline аналогичен группе символов внутри абзаца в программе текстового процессора;
none. Браузер не отображает элемент. Вы можете использовать эту установку для элементов, несущих информацию, которую вы не хотели бы помещать на экране.

Примечание. В спецификации CSS указано, что свойство display не наследуется дочерними элементами. Это так, если вы назначаете установку block для свойства display элемента. Однако элементы вполне эффективно наследуют установку none , поскольку, когда вы назначаете эту установку свойству display элемента-родителя, вы тем самым скрываете и дочерние элементы. Дочерние элементы элемента inline также будут элементами inline , если для них не установлено свойство display , поскольку inline является значением по умолчанию.

Информация относительно назначения ключевых слов CSS свойствам приведена далее на вставке "Задание ключевых слов CSS в качестве значений".

Предположим, вы используете следующую таблицу стилей для отображения XML-документа, представленного в Листинге 7.2 (напомним, что для изменения таблицы стилей, используемой для отображения XML-документа, вам следует отредактировать инструкцию по обработке xml-stylesheet в документе):

BOOK {display:block; margin-top:12pt; font-size:10pt} TITLE {font-style:italic} AUTHOR {font-weight:bold} PAGES {display:none}

Поскольку свойству display элемента BOOK присвоено значение block , браузер всегда будет помещать пустую строку перед и после текста элемента. (Элемент BOOK имеет содержимое. Его текст состоит из текста, принадлежащего всем дочерним элементам.)

Поскольку таблица стилей не присваивает значения свойству display для элементов TITLE , AUTHOR , BINDING и PRICE (и эти элементы не наследуют значение свойства display от их родительских элементов), браузер воспримет их как элементы inline , что является установкой по умолчанию. Следовательно, браузер не будет помещать пустые строки между этими элементами, и – если допустить, что окно браузера имеет достаточную ширину – отобразит их все на одной строке.

Поскольку для свойства display элемента PAGES установлено значение none , браузер не отобразит этот элемент.

На рисунке 7.6 показано, как должен выглядеть результат.

Рис. 7.6.

Задание ключевых слов CSS в качестве значений

Для многих свойств CSS вы можете – или должны – присваивать значение с использованием предопределенных ключевых слов CSS. Специфические ключевые слова, которые вы можете использовать, определяются особенностью свойства. Например, вы можете назначить свойству display одно из трех ключевых слов: block , inline или none . Свойству color вы можете назначить одно из 16 ключевых слов, которые описывают основные цвета, такие как red (красный), green (зеленый), yellow (желтый) или fuchsia (фуксия), как в следующем примере:

PARA {color:fuchsia}

Свойству border-style вы можете назначить одно из девяти ключевых слов: solid, dotted, dashed, double, groove, ridge, inset, outset или none. Пример:

SECTION {border-style:solid}

Содержание раздела