Последние штрихи

Единственное, над чем нам осталось поработать, — это дизайн содержимого. Для этого определим стили еще нескольких элементов HTML5.

Листинг 2.35. Добавляем последние штрихи к базовому дизайну

Article {

Background: #FFFBCC; border: 1px solid #999999; padding: 20px; margin-bottom: 15px;

}

Article footer { text-align: right;

}

Time {

Color: #999999;

}

Figcaption {

Font: italic 14px verdana, sans-serif;

}

Первое правило в листинге 2.35 ссылается на все элементы <article> и определяет для них несколько стилей (фоновый цвет, сплошная рамка шириной 1 пиксел, забивка, поле снизу). Нижнее поле шириной 15 пикселов предназначено для того, чтобы визуально отделять статьи друг от друга по вертикали.

Кроме того, в каждой статье есть элемент <footer>, показывающий количество полученных комментариев. Для того чтобы сослаться на <footer>, находящийся внутри элемента <article>, мы использовали селектор article footer, означающий, что каждый <footer>, находящийся внутри <article>, будет оформлен с использованием следующих стилей. Мы применили здесь этот прием, чтобы выровнять текст нижнего колонтитула каждой статьи по правому краю блока.

В конце кода в листинге 2.35 мы поменяли цвет содержимого для всех элементов <time> и определили новый стиль для подписи под изображением. Это необходимо для того, чтобы шрифт текста, добавляемого с помощью элемента <figcaption>, отличался от шрифта остального текста статьи.

Если вы еще этого не сделали, последовательно скопируйте все приведенные в этой главе правила, начиная с листинга 2.26, и вставьте их в файл mystyles. css. Затем откройте файл HTML, содержащий шаблон из листинга 2.25. Так вы сможете увидеть, как работает традиционная блочная модель и как структурные элементы организованы на экране.

Вы можете загрузить эти фрагменты кода и запустить их выполнение одним щелчком мыши на нашем веб-сайте. Заходите на http://www. minkbooks.com.