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

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

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

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

• none. Браузер не отображает элемент. Эту установку можно использовать для элементов, несущих информацию, которую вы не хотели бы помещать на экране.

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

Предположим, вы используете следующую таблицу стилей для отображения XML-документа, представленного в Листинге 1.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, браузер не отобразит этот элемент.