Изучаем HTML 5-Б. Лоусон, Р. Шарп - 2011

Печать

Оформление нтм1.5-документа с помощью ess

Во всех браузерах (за исключением одного) создавать стили для этих элементов очень просто:CSS можно применять к произвольному элементу, поскольку, как сказано в спецификации, CSS — это «язык таблиц стилей, позволяющий авторам и пользователям добавлять оформление... к структурированным документам (таким как HTML-документы и XML-приложения)», а в XML-приложениях могут использоваться любые элементы.

Хотя новые HTMLS-элементы можно использовать уже сейчас, они не всегда понятны современным браузерам. В таком случае они рассматриваются как неизвестные элементы и никак особо не обрабатываются.

Таким образом, с помощью CSS можно сделать элемент <nav> плавающим, добавить границы для элементов <header> и <footer>H оформить поля и отступы для <article>, причем это почти так же просто, как и оформление элементов <div>.

Необычным может показаться то, что в CSS все элементы по умолчанию ЯВЛЯЮТСЯ строковыми (display:inline), ПОЭ-тому если просто задать ширину и высоту для структурного элемента (как мы это обычно делаем для элементов <div>), в современных браузерах он будет отображаться неправильно, и нам придется явно указать, что элемент является блочным (display:block). В нынешних браузерах до сих пор используется встроенная таблица стилей, где определены элементы, являющиеся, по нашему мнению, исконно блочными (пример такой таблицы стилей можно найти на httpy/www.w3.org^VCSS2/ sample.html). Однако в них еще нет таких правил для элементов <header>, <footer>, <nav>jj <article>, поэтому ДЛЯ НИХ способ отображения должен быть задан вручную в таблице стилей. Когда в браузеры будут добавлены соответствующие правила, эти строки кода не только будут безвредными, но и послужат резервным вариантом для старых браузеров, которые, как показывает практика, могут использоваться еще довольно долго.

Итак, чтобы оформить наш HTMLS-документ в соответствии с дизайном HTML 4, нам понадобятся следующие стили.

header, nav, footer, article {display:block;} nav {float:left; width:20%;} article {float:right; width:79%;} footer {clear:both;}

И вот на свет появляется прекрасная HTMLS-страница. Во всех браузерах, кроме одного.