Блоки в документах
Информация - Компьютеры, программирование
Другие материалы по предмету Компьютеры, программирование
/p>
Простой текст
Простой текст оформлять легче всего. Максимум, что можно сделать это задать параметры шрифта и межстрочное расстояние. Мой любимый шрифт для простого текста это Verdana. И обычно я устанавливают размер шрифта 12 пикселей. Так что в тех таблицах стилей, которые пишу я, очень часто можно встретить вот такую строку:
P,TD,UL,LI {font: 12px Verdana}
Часто слегка увеличенное межстрочное расстояние улучшаем восприятие текста, наполняет его воздухом. Стандартное расстояние составляет 120% от высоты шрифта, но можно увеличивать до 140-160%. Однако для таблиц увеличивать межстрочное расстояние нецелесообразно, так что еще чаще в моих таблицах стилей встречаются вот такие объявления:
P,UL,LI {font: 12px/1.4 Verdana}
TD {font: 12px Verdana}
Любые другие способы оформления простого текста обычно совершенно лишние и вредные.
Заголовки
Существует множество способов оформить заголовки: оставить все как есть, изменить шрифт и цвет, использовать разрядку, подчеркивание, цвет фона или же полностью создавать заголовки с помощью картинок (последний способ ужасно негибкий и годится разве что для очень маленьких и редко изменяемых сайтов).
Конечно, надо быть немного дизайнером чтобы прилично оформить заголовки. Но отличный верстальщик всегда немного дизайнер.
Итак, начнем со шрифта. У меня есть любимый шрифт для заголовков это Arial. Заголовки первого уровня должны быть достаточно большими, так что обычным стилем для заголовка является такой:
H1 {font: 22px Arial}
Обычно, в документах используется не более трех уровней заголовков. Так что стили надо писать для их всех. Часто стили отличаются только размером шрифта. Типичная тройка стилей для заголовков вот такая:
H1 {font: 22px Arial}
H2 {font: 18px Arial}
H3 {font: bold 14px Arial}
Обратите внимание, что для заголовков шрифт задан полужирный, потому что иначе они не очень выделяются, что нехорошо.
Иногда очень неплохо смотрится заголовок с подчеркиванием. Подчеркивание представляем собой рамку, которая задается для нижней части блока. Вот так:
H1 {font: 22px Arial; border-bottom: 1px solid #000}
Как выглядит заголовок с подчеркиванием, показано на рис. 20
Рис. 20 Заголовок с подчеркиванием
Бывают случаи, когда надо задать фон для заголовка. Но здесь возникает одна сложность, если задать фон для всего блока заголовка, например, вот так:
H1 {font: 22px Arial; border-bottom: 1px solid #000; background: #DDD}
то весь блок и окрасится, включая пустое пространство справа, как показано на рис. 21
Рис. 21 Окрашивание всего блока заголовка
Дело в том, что существует два типа блоков: строчные и структурные. Структурные блоки образуют элементы есть пять букв, которые и будут определять ширину блока.
Вернемся к нашему фону. Если требуется, чтобы фон окрашивал весь структурный блок, то все в порядке. Но бывают случаи, когда надо, чтобы фон был только под буквами. Этого можно добиться, если в структурный блок , который создан как раз для подобных целей. HTML-код будет таким:
Стили для заголовка будут обычными, но кроме них надо задать фон для элемента . Как вы понимаете, для этого будем использовать контекстный селектор. В итоге получится два объявления стилей:
H1 {font: 22px Arial; border-bottom: 1px solid #000}
H1 SPAN {background: #DDD}
А заголовок будет выглядеть так, как показано на рис. 22.
Рис. 22 Оформление заголовка с помощью фона для строчного элемента и рамки
Есть еще пара параметров заголовка, которые часто приходится изменять. Например, бывает необходимость убрать пространство после заголовка, то есть чтобы он вплотную прилегал к тексту.
На первый взгляд, такое поведение реализовать просто, но только на первый. Кстати говоря, это довольно показательный случай работы с каскадными таблицами стилей в той области, когда приходится касаться блоковой модели, совместимости между браузерами и позиционирования. Здесь будут встречаться вещи, с которыми вы пока не знакомы. Кое-что я буду объяснять, но в целом попытки решения проблемы носят чисто показательный характер. Итак, я прошел примерно следующим путем.
Я знаю, что для блоков можно задавать отрицательные поля. В случае с заголовком можно попробовать задать отрицательно нижнее поле и тогда заголовок подтянется к тексту. Методом подбора я установил, что подходящим размером поля будет 20 пикселей. Объявление стиля будет таким:
H1 {font: 22px Arial; margin-bottom: -20px}
Заголовок прекрасно выглядит в браузерах Internet Explorer и Opera, но когда я посмотрел тестовую страничку в браузере Mozilla, то разочарованно поджал губы. На рис. 23 вид в браузере Mozilla показан справа.
Рис. 23 Несовпадение нижнего поля для заголовка в браузерах Internet Explorer и Mozilla
Лично меня вид заголовка в браузере Mozilla совершенно не устраивает, поэтому начинается поиск обходных путей. Сразу вспоминается такая вещь, как относительное позиционирование. С помощью относительного позиционирования можно сдвигать блоки. Вообще существует два основных вида позиционирования: абсолютное и относительное. Аб?/p>