Каскадные таблицы стилей CSS верстка
Универсальный стилевой файл с расширением *.css, в котором сохраняются стили отображения абзацев, форм, изображений, таблиц и прочих элементов, мы помещаем между тэгами <head> и </head> включить следующую строку: <link rel="stylesheet" href="style.css" type="text/css" media="screen" title="Основная таблица стилей" />
Тэг <link> не парный, поэтому в конце в данном примере стоит завершающая косая черта (в HTML 4 она не является обязательной). Параметр rel определяет тип взаимосвязи со включаемым документом и говорит, что это таблица стилей. Параметр href сообщает адрес включаемого стилевого файла. Тип данных определяется параметром type. Стиль отображения задается параметром media: если это screen, то стили будут применены к объектам, отображаемым на экране; если print, то при распечатке на принтере; если all, то везде. Заголовок title используется скорее для удобства.
В итоге единственная строчка в каждом документе включает универсальный стилевой файл. Теперь для того, чтобы поменять стили отображения абзацев, форм, изображений, таблиц и прочих элементов, достаточно отредактировать единственный css-файл, а не вносить утомительную правку в сотни документов. Я хочу коротко описать основные его элементы и значения.
Цвет текста задается элементом color, после двоеточия следуют допустимые названия цветов (yellow, black, blue, red, purple, olive, orange, white, green и другие) или их RGB-представление, предваряемое знаком #, например: #ffffff (белый), #000000 (черный), #ff0000 (красный), #00ff00 (зеленый), #0000ff (синий), #ffff00 (желтый), #00ffff (морская волна), #ff00ff (фиолетовый).
Составлять такие значения несложно. Первая пара символов после знака диеза отвечает за красное излучение, вторая за зеленое, третья — за синее. Сочетания разных пучков света с экрана дают совмещенные цвета: из красного и зеленого получается желтый, из красного и синего — фиолетовый. Значений может быть 16, от нуля до буквы F (то есть 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E и F). Нуль — отсутствие излучения данного цвета, буква F — максимальное излучение. Максимум всех трех цветов (#FFFFFF) дает белый цвет, отсутствие излучения (#000000) —
черный цвет. Различное совмещение этих значений дает более 16 миллионов цветов. Экспериментируйте! Несколько параметров шрифта сразу позволяет установить параметр font, например: font:200% serif; /* Текст в 2 раза крупнее стандартного, с засечками — типа Times */
font:12pt sans-serif; /* Кегль: 12 пунктов, шрифт без засечек — типа Arial */ font:italic bold 14pt monospace; /* Курсивный полужирный текст кеглем 14 пунктов, моноширинный —типа Courier */
По отдельности из параметров шрифта можно устанавливать название гарнитуры (font-family), размер шрифта (font-size), начертание (font-style — обычное, курсивное или наклонное,
соответственно normal, italic или oblique), капители (fontvariant — значения normal и small-caps), полужирное начертание (font-weight:bold). Из прочих параметров текста можно устанавливать:
— межбуквенное расстояние (letter-spacing:5; возможны и отрицательные значения);
— интерлиньяж (высоту строки в пределах абзаца, или расстояние между строками, line-height);
— выключку, или выравнивание текста (text-align, значения left, center, right, justify — влево, от центра, вправо, по ширине);
— оформление текста (text-decoration, чаще всего применяется значение underline — подчеркивание, но есть еще blink, line-through, overline и none — мигание, перечеркивание, надчеркивание и отсутствие оформления);
— отступ первой строки абзаца, или «красную строку» (textindent);
— преобразование символов текста в верхний или нижний регистр (text-transform:capitalize, lowercase, uppercase или none);
— вертикальное выравнивание в пределах блока (verticalalign);
— отображение пробелов (white-space) — как в HTML, то есть все пробелы сливаются в один (значение normal), с запретом разрыва строки (nowrap), с сохранением количества пробелов и
переносов строк, то есть как с тэгом <pre> (значение pre);
— интервал между словами (word-spacing).
Фон любого блочного элемента (блочные элементы, как <p>, <div>, <table>, в отличие от линейных, не могут собираться в одну строку и образуют отдельные абзацы) и всего документа задается общим параметром background. Частные правила задаются параметрами background-attachment (прокручивание фона вместе с содержимым при background-attachment:scroll или его фиксированное положение при background-attachment:fixed), background-color (цвет фона), background-image (фоновое изображение: background-image:URL(адрес изображения)),
background-position (позиционирование фона, задается выравниванием, например top right, или числовым значением, в том числе и в процентах), background-repeat (повторение фонового изображения: без повторения no-repeat, с обычным размножением по вертикали и горизонтали repeat, с повторением по горизонтали repeat-x, по вертикали — repeat-y).
Использование свойств фона породило новую возможность для веб-дизайнеров. Ранее для смены изображения при наведении на него курсора мыши нужно было использовать два изображения и сценарий на JavaScript с использованием событий onMouseOver и onMouseOut и быть уверенным, что у посетителя включена поддержка языков активных сценариев (в чем, вообще говоря, никогда нельзя быть уверенным).
Теперь есть такой выход: вы готовите одно изображение, в которое включены сразу два состояния (картинка состоит из двух половинок), заключаете его в качестве фона в ссылку внутри какого-то блока и используете псевдокласс :hover для отображения состояния ссылки при наведении
мыши. В нормальном состоянии отображается только половина картинки, потому что блоку нужно прописать точные размеры, соответствующие половине размеров изображения по одному из измерений, а в «наведенном» состоянии для фона пишется позиционирование со смещением.
Например:
<style>
div#banners {
margin: 0;
padding: 13px 0 0 0;
background: transparent url(/i04/enjoy.gif) top
left no-repeat;
}
div#banners h5 {
margin: 0 0 10px 0;
padding: 0;
}
div#banners h5#hcban {
margin: 10px 0 0 0;
padding: 0;
text-indent: -9999px;
width: 230px;
height: 45px;
}
div#banners h5#hcban a {
display: block;
margin: 3px 0 0 0;
padding: 0;
width: 100%;
height: 100%;
text-decoration: none;
background: transparent url(/i04/hcban2.gif)
top left no-repeat;
}
div#banners h5#hcban a:hover {
background: transparent url(/i04/hcban2.gif) 0
-45px no-repeat;
}
</style>
<div id="banners">
…
<h5 id="hcban"><a href="http://www.happycog.com/"
title="Happy Cog Studios. Web design, consulting, and
publishing.">Happy Cog </a></h5>
</div>
Требуются некоторые пояснения. В блоке с идентификатором «banners» помещается несколько баннеров (изображений — ссылок на другие сайты). Структура баннера такова: заголовок пятого уровня с идентификатором (например, «hcban»), в который включается ссылка. Заголовок формируется как блок точно заданных размеров, причем для отступа текста внутри этого заголовка пишется больше отрицательное число, чтобы самого текста не было видно на странице даже в случае длинного заголовка: вместо него функцию ссылки будет выполнять…
пустое место. Но это пустое место снабжено фоном.
Обратите внимание, что в стилевых описаниях используется вложенность элементов (читается с конца: запись div#banners h5#hcban a:hover следует читать как «наведенное состояние ссылки внутри заголовка пятого уровня с идентификатором „hcban“, находящегося внутри блока с идентификатором „banners“»). В этом случае гарантируется, что ссылка будет приобретать такой вид только внутри этих элементов, вложенных в такой последовательности, и ни в каких других случаях.
Итак, для блока «banners» пишется стили, для вложенного в него заголовка пятого уровня — свои, но общие для всех конкретных заголовков пятого уровня, затем происходит конкретизация: для каждого из <h5> со своим идентификатором назначаются индивидуальные стили. И только после этого описываются параметры ссылки, вложенной в заголовок, которая вложена в блок.
Для обычного состояния ссылки описываются все параметры, включая тот фрагмент фона, который будет виден посетителю как графическая ссылка. Для состояния при наведении мыши описывается только фон, смещенный относительно условных границ блока, потому что все ос-
тальные свойства ссылки наследуются от записи для обычного состояния ссылки.
Рекомендуем почитать
