Итак, для начала разберемся, почему стили называются каскадными.
Позволь, дорогой читатель, я еще раз приведу способы внедрения стилей на
страничку:
- использование отдельного стилевого файла и вставка его при помощи
тега <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 категорически отказывается наследовать стили,
присвоенные до таблицы.
Разобравшись с каскадностью, давайте поговорим о синтаксисе.
