Предыдущая страница реферата | 7  8  9  10  11  12  13  14  15  16  17 | Следующая страница реферата

Заголовки

Существует множество способов оформить заголовки: оставить все как есть, изменить шрифт и цвет, использовать разрядку, подчеркивание, цвет фона или же полностью создавать заголовки с помощью картинок (последний способ ужасно негибкий и годится разве что для очень маленьких и редко изменяемых сайтов).

Конечно, надо быть немного дизайнером чтобы прилично оформить заголовки. Но отличный верстальщик всегда немного дизайнер.

Итак, начнем со шрифта. У меня есть любимый шрифт для заголовков – это Arial. Заголовки первого уровня должны быть достаточно большими, так что обычным стилем для заголовка <h1> является такой:

H1 {font: 22px Arial}

Обычно, в документах используется не более трех уровней заголовков. Так что стили надо писать для их всех. Часто стили отличаются только размером шрифта. Типичная тройка стилей для заголовков вот такая:

H1 {font: 22px Arial}

H2 {font: 18px Arial}

H3 {font: bold 14px Arial}

Обратите внимание, что для заголовков <h3> шрифт задан полужирный, потому что иначе они не очень выделяются, что нехорошо.

Иногда очень неплохо смотрится заголовок с подчеркиванием. Подчеркивание представляем собой рамку, которая задается для нижней части блока. Вот так:

H1 {font: 22px Arial; border-bottom: 1px solid #000}

Как выглядит заголовок с подчеркиванием, показано на рис. 20

Рис. 20 Заголовок с подчеркиванием

Бывают случаи, когда надо задать фон для заголовка. Но здесь возникает одна сложность, если задать фон для всего блока заголовка, например, вот так:

H1 {font: 22px Arial; border-bottom: 1px solid #000; background: #DDD}

то весь блок и окрасится, включая пустое пространство справа, как показано на рис. 21

Рис. 21 Окрашивание всего блока заголовка

Дело в том, что существует два типа блоков: строчные и структурные. Структурные блоки образуют элементы<p>,<div>,<h1> и т.д. Строчные блоки образуются элементы <b>, <i>, <span> и т.п. Строчные блоки всегда находятся внутри структурных блоков. Главное отличие в том, что структурные блоки имеют вначале и в конце переводы строк и по ширине занимают все предоставляемое им пространство. Ширина строчных блоков строго ограничена содержанием блока. Например, в блоке<b>важно</b> есть пять букв, которые и будут определять ширину блока.

Вернемся к нашему фону. Если требуется, чтобы фон окрашивал весь структурный блок, то все в порядке. Но бывают случаи, когда надо, чтобы фон был только под буквами. Этого можно добиться, если в структурный блок <h1> встроить строчный блок. В HTML имеется специальный строчный блок <span>, который создан как раз для подобных целей. HTML-код будет таким:

<h1><span>Полезные советы</span></h1>

Стили для заголовка будут обычными, но кроме них надо задать фон для элемента <span>, который находится внутри элемента<h1>. Как вы понимаете, для этого будем использовать контекстный селектор. В итоге получится два объявления стилей:

H1 {font: 22px Arial; border-bottom: 1px solid #000}

H1 SPAN {background: #DDD}

Рекомендуем скачать другие рефераты по теме: оформление доклада титульный лист, банк рефератов бесплатно.



Предыдущая страница реферата | 7  8  9  10  11  12  13  14  15  16  17 | Следующая страница реферата

Поделитесь этой записью или добавьте в закладки