Михаил Мельников

Каскадность стилей

Итак, для начала разберёмся, почему стили называются каскадными. Позволь, дорогой читатель, я ещё раз приведу способы внедрения стилей на страничку:

• использование отдельного стилевого файла и вставка его при помощи тега <link>
• описание стиля в заголовке документа
• применение стиля как параметра в теге.

Каскадность заключается в том, что стили могут переопределяться. Приведённый выше список способов внедрения стилей соответствует порядку переопределения. Нижерасположенный способ может переопределять вышерасположенный.

Например, мы определили во внешнем стилевом файле, что текст в теге <p> должен быть написан при помощи шрифта высотой 10 пунктов. Но если в заголовке странички мы дополнительно укажем, что тот же текст в теге <p> должен быть написан шрифтом в 12 пунктов, то текст будет выведен именно таким кеглем - т.е. стиль в заголовке странички переопределил стиль во внешнем файле.

Для чего это нужно? О, это очень полезная вещь. И сейчас я покажу это на конкретном примере. Предположим, что для всех ссылок в заголовке на нашей страничке определён следующий стиль:

<style type="text/css">
<!--
a.link { text-decoration: none; color:red; }
-->
</style>
</head>

И, следовательно, любой текст, который является гиперссылкой, автоматически становится красным и перестаёт быть подчёркнутым. И вот мы решили в конце странички указать копирайт, но сделать это не сильно заметно, чтобы не акцентировать на этом внимание. Но, тем не менее, мы хотим, чтобы копирайт также был ссылкой. Сделать это нам нужно всего лишь в одном месте странички и определять для этого дополнительный класс нецелесообразно. В этом случае нам на помощь придёт каскадность стилей. Достаточно локально переопределить цвет ссылки:

<a href="#"><span style="color: #000000;">Copyright (C) 1998-2001 Cherry-Design</span></a>

Сделали мы это при помощи параметра style, а он, как Вы помните, действует лишь в пределах того тега, в котором был определён. Что нам и нужно.

Вы наверняка обратили внимание, что в вышеприведённом примере я ввёл в обращение новый тег <span></span>. Он предназначен специально для таких случаев. Всё, что он делает, - это определяет некую область, к которой мы можем применить стиль. Это очень удобный тег, т.к. не вставляет ни до, ни после себя ненужных отбивок (т.е. пустое вертикальное пространство), как это делает тег <p>.

В каких тегах лучше определять стили посредством класса? Чаще всего для этого используется одна из следующих конструкций:

<p class="big">Что-то</p>
<td class="big">Что-то</td>
<div class="big">Что-то</div>
<span class="big">Что-то</span>

Тег <div> подобен <span>, но только с тем отличием, что делает до и после себя отбивку (точно так же, как и <p>). А вот стиль текста, которым набрано основное содержимое странички, лучше всего сделать переопределением тега <p>, а не определением отдельного класса.

И небольшое дополнение, связанное с корректным показом в обоих броузерах, - если Вы используете табличную вёрстку для дизайна сайта, то определять стиль основного текста нужно не только в теге <p>, но и в <td>, т.к. Netscape категорически отказывается наследовать стили, присвоенные до таблицы.

Разобравшись с каскадностью, давайте поговорим о синтаксисе.

Синтаксис CSS

Описание каждого класса делается при помощи конструкции, подобной этой:

.small { font-size: 9pt; }

Сначала указывается имя класса - оно может быть произвольным, но желательно всё-таки давать осмысленное название. Далее, в фигурных скобках {} перечисляются все необходимые параметры для данного класса. Параметры отделяются друг от друга точкой с запятой. Вот ещё один пример, в котором используется более длинное описание:

.small { font-size: 9pt; color: #eeeeee; text-align: center; }

Заметьте, что в обеих конструкциях я начал имя класса с точки и таким образом определил универсальный класс, т.е. такой, который может быть применён к любому тегу. И делается это при помощи следующей конструкции:

<p class=small>Накладываем стиль на этот текст</p>
<td class=small>Накладываем стиль на этот текст</td>

Раз есть универсальные классы, то, вероятно, существуют и какие-то другие? Всё правильно, ещё бывают так называемые теговые классы:

p.small { font-size: 9pt; }

Класс, определённый таким образом, сработает только в том теге, для которого он предназначен, а для всех остальных будет проигнорирован:

<p class=small>Этот текст будет выведен стилем small</p>
<td class=small>А этот останется неизменным</td>

Мы можем определять параметры не только для одного тега, но и сразу для нескольких. Для этого в определении стиля достаточно перечислить их через запятую:

p, td { font-size: 9pt; color:green;}

Такой приём называется группировкой, и в данном случае мы определили и для <p>, и для <td> одинаковый размер и цвет текста.

В случае переопределения существующих тегов в описании стиля можно указывать не все параметры, а лишь те из них, которые мы хотим изменить. Все остальные параметры примут значения по-умолчанию, которые для разных тегов различны.

Псевдоклассы

В CSS есть такое понятие, как псевдокласс. В отличии от обычного класса действие псевдокласса распространяется не на весь текст, к которому применён данный стиль, а лишь на его часть, и возможно лишь в определённом состоянии. Чтобы было понятнее, давайте разберём эффект, при котором ссылки подчеркиваются лишь при наведении на них курсора. Эффект достаточно распространённый, и его можно наблюдать в том числе и на этом сайте. Вот фрагмент таблицы стилей, который позволяет достигать вышеописанного эффекта:

a { text-decoration: none; }
a:hover { text-decoration: underline; }

Верхняя строчка - это переопределение стандартного тега <a>, которое запрещает подчёркивать ссылки, а вот нижняя - это определение стиля для псевдокласса hover, который описывает стиль ссылки в момент, когда курсор находится над ней.

А вот и другой пример псевдокласса - определение буквицы в начале абзаца:

p:first-letter { font-size: 200%; font-weight: bold; }

Заметьте, что и в том, и в другом случае действие стиля распространяется либо на определённое состояние (пользователь собирается щёлкнуть по ссылке), либо на фрагмент текста (изменяется только первая буква абзаца). В этом и заключается смысл псевдоклассов.

Комментарии

Как и в любом достаточно сложном языке, при создании таблицы стилей можно пользоваться комментариями. Их формат аналогичен классическому Cи:

/* Этот текст является комментарием */

Для небольших сайтов эта возможность Вам вряд ли понадобится, а вот при создании сложных, многоуровневых таблиц стилей комментарии могут пригодиться. Кстати, здесь будет уместно привести золотое правило - чем понятнее названа переменная (в данном случае имя класса), тем меньше комментариев необходимо.

Основные параметры CSS

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

Все параметры, используемые для определении стиля, условно можно разделить на несколько больших групп:

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

Рассмотрим подробнее параметры, используемые для управления внешним видом текста и форматирования абзацев - как наиболее часто употребляемые.

Основные параметры шрифта

font-weight: [bold|normal|number] - жирность шрифта
font-style: [normal|italic|oblique] - наклон шрифта
font-size: number - размер шрифта
font-family: name - гарнитура шрифта
color: number - цвет шрифта
background-color: number - цвет подложки
background: url - текстурная подложка

Основные параметры абзаца

text-align: [left|right|center|justify] - выравнивание
text-indent: number - отступ красной строки
line-height: number - интерлиньяж
letter-spacing: number - трекинг

padding-left: number - отступ от текста слева
padding-right: number - отступ от текста справа
padding-top: number - отступ от текста сверху
padding-bottom: number - отступ от текста снизу

margin-left: number - отступ от границы слева
margin-right: number - отступ от границы справа
margin-top: number - отступ от границы сверху
margin-bottom: number - отступ от границы снизу

Единицы измерения в CSS

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

• относительный размер в процентах (%)
• относительный размер при помощи словесного описания (larger, smaller, xx-small, x-small, small, medium, large, x-large, xx-large)
• абсолютный размер в типографских единицах - размер может задаваться в пунктах (pt), пиках (pc), пикселях (px), средней шириной буквы "m" (em), средней шириной буквы "x" (eх)
• абсолютный размер в стандартных единицах длины - размер может задаваться в сантиметрах (cm), миллиметрах (mm), дюймах (in)
• абсолютный в пикселях (px)

Задание цвета в CSS

Цвет для тех свойств, где это нужно, может быть определён одним из трёх способов:

• при помощи названия цвета: yellow, red, green, grey,..
• шестнадцатеричным заданием цвета в формате #RRGGBB: #ff0000, #883490, #ffffff,..
• десятичным заданием составляющих цвета в формате rgb(red, green, blue): rgb(255,0,0), rgb(100,23,78),..

И закончим эту статью несколькими примерами описания таблицы стилей:

.epigraph {
    font-size: 12pt;
    font-style: italic;
    text-align: right;
    color: rgb(127,127,0);
}

p.big {
    font-size: 16px;
    font-weight: bold;
    color: #ff0000;
}

.menu {
    font-weight: bold;
    font-size: 9pt;
    font-family: arial, helvetica, sans-serif;
}

a:hover {
    color: #b63a3a;
    text-decoration: none;
}

Надеюсь, что этот небольшой справочник поможет Вам на первых порах, а для написания более сложных стилевых таблиц лучше всего воспользоваться специальными программами - например, входящим в состав HomeSite редактором TopStyle, который, кстати, содержит и прекрасный справочник свойств.