Листинг 8.2
BODY { color: #3B4043; background-color: #F8F8F8; font-family: Verdana, Arial, sans-serif }
P { font-size: 12pt }
H1, H2, H6 { font-weight: normal; font-family: Arial, sans-serif }
H1 { font-size: 20pt }
H2 { font-size: 18pt }
H6 { font-size: 12pt }
TABLE { font-size: 10pt }
BLOCKQUOTE P, ADDRESS { font-size: 10pt; font-style: italic }
Таблица стилей готова. Рассмотрим все созданные в ней стили один за другим.
Первым идет стиль переопределения тега <BODY>. Он задает параметры, общие для всей Web-страницы: шрифт для обычного текста (абзацев, цитат и содержимого таблиц), цвет текста и цвет фона. Все элементы Web-страницы будут использовать данные параметры, если, конечно, мы не переопределим их далее, в более конкретных тегах:
BODY { color: #3B4043; background-color: #F8F8F8; font-family: Verdana, Arial, sans-serif }
Следующим идет стиль переопределения тега <P>. Он задает размер шрифта для текста абзацев. Фактически он дополняет стиль переопределения тега <BODY>, созданный ранее:
P { font-size: 12pt }
А теперь — внимание! Мы создали три одинаковых стиля, переопределяющих теги заголовков <H1>, <H2> и <H6>:
H1, H2, H6 { font-weight: normal; font-family: Arial, sans-serif }
Они задают параметры, общие для всех заголовков: шрифт и его "жирность" (точнее, отсутствие "жирности"). Поскольку эти стили более конкретные, чем созданный ранее стиль переопределения тега <BODY>, заданные в них параметры будут иметь больший приоритет. Следовательно, заголовки будут набраны шрифтом, который мы указали в этих стилях, а не тем, что упомянут в стиле переопределения тега <BODY>.
Далее мы создали три стиля переопределения тегов <H1>, <H2> и <H6>, задающие разные размеры шрифта для заголовков разного уровня. Эти стили дополнят те, что мы создали чуть раньше. В результате заголовки разного уровня будут набраны шрифтом разного размера:
H1 { font-size: 20pt }
H2 { font-size: 18pt }
H6 { font-size: 12pt }
Следующим идет стиль переопределения тега <TABLE>, задающий размер шрифта и дополняющий созданный ранее стиль переопределения тега <BODY>. Шрифтом данного размера будет набран текст, присутствующий во всех элементах таблицы (обычных ячейках, ячейках заголовка и заголовке таблицы):
TABLE { font-size: 10pt }
Последними мы определили два одинаковых стиля: комбинированный стиль
BLOCKQUOTE P и стиль переопределения тега <ADDRESS>:
BLOCKQUOTE P, ADDRESS { font-size: 10pt; font-style: italic }
Они задают одинаковые параметры для шрифта большой цитаты и тега адреса. Поскольку для создания большой цитаты мы использовали тег <P>, вложенный в тег <BLOCKQUOTE>, то параметры текста цитаты мы определили посредством комбинированного стиля BLOCKQUOTE P. Оба этих стиля дополняют созданный в самом начале стиль переопределения тега <BODY>.
Как видим, все довольно просто и наглядно. Стили объединяются друг с другом, переопределяя заданные в них параметры, согласно приоритету. А приоритет зависит от конкретности данного стиля, от "близости" его к тегу.
Сохраним таблицу стилей и откроем в Web-обозревателе Web-страницу index.htm. Совсем другой вид! Вот что можно сделать с Web-страницей с помощью стилей CSS! И ведь нам совсем не пришлось править ее HTML-код (если не считать внесение тега <LINK>, выполняющего привязку таблицы стилей). Разделение содержимо- го и представления, предписываемое концепцией Web 2.0, налицо!
Что бы нам еще такое сделать?.. Давайте немного разредим текст заголовков, чтобы сделать их более заметными. Для этого достаточно добавить к изначальному пространству между его символами дополнительное, равное 1 мм.
Но куда поместить соответствующий атрибут стиля? В CSS-код, создающий три одинаковых стиля переопределения тегов <H1>, <H2> и <H6>. Вот он:
H1, H2, H6 { font-weight: normal; font-family: Arial, sans-serif }
А так он будет выглядеть после соответствующей правки:
H1, H2, H6 { font-weight: normal; font-family: Arial, sans-serif; letter-spacing: 1mm }
Вот и все, что нам понадобилось сделать! Сохраним таблицу стилей, выбрав кодировку UTF-8 (см. главу 1 ), и обновим Web-страницу index.htm, открытую в Web-обозревателе, нажав клавишу <F5>. А что, получилось стильно!
А чтобы совсем уж ошарашить будущих посетителей, давайте задействуем возможности CSS 3 и создадим для текста заголовков тень. Добавим соответствующий атрибут стиля, опять же, в CSS-код, создающий три одинаковых стиля переопределения тегов <H1>, <H2> и <H6> (листинг 8.3).
Дата добавления: 2015-05-08; просмотров: 542;