Перейдем теперь к настройке остальных структурных элементов. За открывающим тегом обертки <div> следует первый структурный элемент HTML5, <header>. Этот элемент описывает главный заголовок нашей веб-страницы, который выводится вверху экрана. Для идентификации заголовка в коде используется атрибут id="main_header".
По умолчанию ширина каждого блочного элемента, включая тело документа, составляет 100 %. Это означает, что элемент растягивается по горизонтали, занимая все доступное пространство. Как уже говорилось, для тела документа это вся видимая область экрана, однако для остальных элементов максимальная доступная ширина определяется размером родительского элемента. В нашем примере элементам внутри главного блока выделяется не более 960 пикселов, так как ранее мы установили для главного блока максимальную ширину, равную этому значению.
Листинг 2.31. Добавление стилей для элемента <header>
#main_header {
Background: #FFFBB9; border: 1px solid #999999; padding: 20px;
}
Поскольку элемент <header> будет занимать в главном блоке все доступное по горизонтали пространство и поскольку он и так считается блочным элементом и располагается вверху страницы, нам остается только связать с ним стили, которые помогут узнать его на экране. В правиле из листинга 2.31 мы создаем для элемента <header> желтый фон, сплошную рамку толщиной 1 пиксел, а также внутренние поля шириной 20 пикселов (для этого используется свойство padding).
Добавить комментарий