Введение в каскадные таблицы стилей. Зачем они нужны.
Сначала напишем саму таблицу стилей.
.cit { font-style: italic; color: #FF0000}Эта таблица стилей содержит определение всего одного стиля – cit. Такой стиль, имеющий уникальное имя (чтобы Web-обозреватель мог однозначно его идентифицировать), называется стилевым классом.
Этот стиль содержит определение параметров для двух атрибутов стиля. Первый атрибут – font-style – задает "стиль" текста; в нашем случае значение italic делает текст курсивом, словно бы его поместили внутрь тега. Второй атрибут – color – задает цвет текста. Как видите, два атрибута стиля cit заменили оба тега: и <FONT>, и.
Собственно, красивое форматирование текста таблицы стилей, которое вы видите здесь, совсем не обязательно. Ваша таблица стилей может выглядеть и следующим образом:
.cit { font-style: italic; color: #FF0000}Так она получается даже компактнее – весьма немаловажное достоинство во времена господства медленных каналов связи. Но, согласитесь, красиво отформатированный вариант легче читается.
Сохраним нашу таблицу стилей в файле styles.css. И давайте перепишем наш фрагмент HTML-кода так, чтобы он использовал эту таблицу стилей.
<P CLASS="cit">ЭТО цитата.</P>Как видите, достаточно просто добавить в тег <р> атрибут CLASS и в качестве значения присвоить ему имя определенного нами стилевого класса, в нашем случае cit. Теперь этот фрагмент текста будет форматироваться курсивным красным шрифтом уменьшенного размера.
Но, кроме того, нам еще нужно добавить в секцию HTML-заголовка (тег <HEAD>) нашей страницы ссылку на таблицу стиля, чтобы Web-обозреватель смог ее найти. Эта ссылка будет иметь следующий вид:
<LINK REL="stylesheet" HREF="styles.ess" TYPE="text/css">Вот теперь точно все!
Вы уже, наверно, догадались, что таблицу стилей, сохраненную в отдельном файле, можно использовать во многих Web-страницах. Более того, она может находиться вообще на другом сайте. В частности, фирма Microsoft, насколько известно автору, предлагает бесплатно воспользоваться библиотекой таблиц стилей, помещенной на ее сайте. (Внимание: информация непроверенная!)
Кроме того, Web-страница может ссылаться одновременно на несколько таблиц стилей. Например, так:
<LINK REL="stylesheet" HREF="styles1.css"><LINK REL="stylesheet" HREF="styles2.css">В этом случае она будет использовать стили, определенные в обеих этих таблицах. Если же какой-то стиль определен и в одной, и в другой таблице, в действие вступает правило каскадности и приоритета, о котором будет рассказано ниже.
Но как же в этом случае уменьшить шрифт всех цитат? Для этого достаточно добавить в определение стилевого класса еще один атрибут и присвоить ему соответствующее значение. В этом случае таблица стилей будет иметь такой вид (вновь вставленный код выделен полужирным шрифтом):
.cit { color: #FF0000; font-style: italic; font-size: smaller }Здесь мы поместили в определение стиля помещен новый атрибут font-size, задающий размер шрифта. И присвоили ему значение smaller, задающее шрифт на одну ступень меньший, чем у родительского элемента.
И это все! Никаких изменений в коде Web-страниц, ссылающихся на эту таблицу стилей, нам делать не нужно. Достаточно было только изменить файл таблицы стилей.
Удобно? Еще бы!
А еще с помощью таблицы стилей можно изменить внешний вид любого тега HTML. Для этого нужно просто переопределить его в таблице стилей следующим образом:
I { color: #FF0000; font-size: smaller }После этого все фрагменты текста, заключенные внутрь тега (курсив), будут отображаться уменьшенным шрифтом красного цвета. Такой стиль называется стилем переопределения тега.
А если вы создадите такой стиль:
H1 I { color: #FF0000; font-size: smaller }…то уменьшенным шрифтом красного цвета будет отображаться только текст, заключенный внутрь тега, который, в свою очередь, находится внутри тега <H1>. Вот такой:
<H1>Курсивный заголовок</H1>