CSS от А до Я
Представьте себе такую ситуацию: вы сделали серьезный сайт. И вдруг через некоторое время понимаете: шрифт не тот, фон не тот, цвета не те и т.д. Все надо менять. Обремененный заботой о любимых посетителях, вы спешите исправить недоработки во всех 500 (к примеру) страницах вашего сайта. На это уходит целый день. В лучшем случае… Как этого избежать? Ответ прост - использовать каскадные таблицы стилей.
Прежде всего, хочу вас предупредить: если вы не знаете HTML, то из этой статьи ничего нового вы не узнаете. Просто потому, что не поймете. CSS придуманы специально для расширения возможностей HTML, поэтому прежде чем браться за каскадные таблицы, я советовал бы вам изучить язык маркировки гипертекстов (то бишь HTML). Тем более что много времени это не займет, а учебников по HTML вы сможете найти великое множество.
Но вернемся к нашим баранам :) .
Все, кто делал веб-страницы, так сказать, вручную (на HTML, а не в WYSIWYG-редакторах), знают, как мало возможностей предоставляет этот язык, когда он используется "в чистом виде" (я имею в виду, без каких-либо вспомогательных средств). К примеру, позиционирование элементов, форматирование списков, работа с фоновыми изображениями - это далеко не полный список того, что может принести головную боль программистам на HTML. И действительно, гипертекстовый язык настолько несовершенен, что порой несложные странички могут иметь огромный нечитаемый код. К тому же, автор страницы не может заранее определить настроек браузера пользователя, что существенно ограничивает число вариантов представления информации на странице.
Нельзя сказать, что разработчики браузеров не предпринимали попыток изменить данную ситуацию. В ранних версиях браузеров CERN для платформы NEXT автору страницы давалась возможность переопределять настройки умолчания браузера через HTML-разметку. Но этот подход не получил продолжения в коммерческих продуктах и постепенно "завял".
Другой способ управления настройками браузера - программирование на JavaScript. Этот язык сейчас становится все более и более популярным, однако имеет один недостаток - большой объем кода, что делает его не самым оптимальным средством. По крайней мере, на ближайшие несколько лет.
Но выход все же есть. И имя ему - CSS (Cascading Style Sheets). Или, по-русски, каскадные таблицы стилей. Разработала спецификации каскадных таблиц небезызвестная фирма Microsoft. Наверно поэтому, кстати, Internet Explorer поддерживает CSS в несколько большей степени, чем Netscape (хотя NN6 сделал в этой области огромнейший шаг вперед). Да, кстати, неплохо поддерживает каскадные таблицы браузер Opera (хотя и хуже, чем ее "старшие братья"). Посему советую всем, кто будет использовать на своих страницах CSS, обзавестись хотя бы Нетскейпом и Эксплорером и проверять свои творения и там, и там.
Изначально CSS создавались для того, чтобы отделить содержание страницы от сопутствующих дополнительных тэгов описания. Предположим, нам надо писать некое выражение, часто повторяющееся в тексте, зеленым цветом, шрифтом отличным от шрифта текста и, к тому же, выделять курсивом. Если вы хотите обойтись только средствами HTML, то вам необходимо будет каждый раз писать что-то типа:
<font color=green face="ваш_шрифт"><i>текст</i></font>
Не слишком трудно, но если эту запись приходится повторять десятки раз, то это уже не очень удобно. CSS дает возможность задать описание объекта только однажды. Мало того, можно описать все стили для нескольких страниц или всего сайта в одном отдельном файле и все ваши странички будут иметь совершенно одинаковый вид - одинаковые шрифты, таблицы, рамки. При этом, если вы что-либо захотите изменить в оформлении своего сайта, вам нужно будет поменять только один файл - тот, в котором содержаться соответствующие стили описания. Кроме того, CSS позволяет использовать множество дополнительных эффектов для оформления страниц. Что тоже важно.
Таким образом, задумка была хорошая. Но получилось сами знаете как. До сих пор ни один браузер не поддерживает каскадные таблицы на все 100%. Даже IE. И поэтому многие возможности CSS остаются пока невостребованными. Когда ко мне в руки впервые попал перевод спецификаций CSS в оригинале, я читал их как научную фантастику: столько всего полезного предоставляют в наше распоряжение каскадные таблицы стилей. Но, увы, корректно поддерживается пока только определенная часть из них.
Итак, начнем.
А начнем мы с того, как таблицы стилей включаются в HTML-документ. Информация о стилях может располагаться либо в отдельном файле, либо непосредственно в коде веб-странички. Речь пойдет о том, где и в какой форме в документе автор страницы может описать стиль и как он может сослаться на стиль, определенный в другом документе.
Для применения CSS в HTML-страничке существует четыре основных способа. Рассмотрим подробно каждый из них.
1. Переопределение стиля в элементе разметки.
Вообще говоря, этот метод приводит к потере главного преимущества CSS - возможности отделения информации от описания представления этой информации. Однако им все равно часто пользуются. Для того чтобы описать стиль таким способом необходимо применить атрибут STYLE у данного элемента HTML-страницы. Его общий синтаксис таков:
< элемент STYLE="свойство: значение; свойство: значение">текст или любой другой объект
Рассмотрение конкретных свойств мы оставим на потом, а пока посмотрим, как вообще работают каскадные таблицы. А вот и первый пример:
<br /> <p STYLE="font-size: 14pt; font-style: italic; background-color: lime"></p> <p>
Этот абзац будет напечатан курсивом, шрифтом с размером 14 пунктов, и на светло-зеленом фоне.
Таким образом, к тексту, заключенному между тегами
и
, были применены соответствующие стили, описанные за атрибутом STYLE. Этот атрибут можно применить внутри любого элемента разметки. Однако допустимый набор пар "свойство: значение" в каждом конкретном случае будут несколько различаться (об этом мы поговорим в дальнейшем).
Хотел бы сразу сказать несколько замечаний касательно синтаксиса. Атрибут STYLE написан большими буквами только ради удобства. Его можно писать как угодно, так: style или даже так: sTyLe - эффект будет абсолютно одинаковым. Совокупность пар "свойство: значение" обязательно берется в кавычки, каждая пара отделяется от последующей точкой с запятой.
2. Размещение описания стиля в заголовке документа.
Описание стилей этим способом осуществляется с помощью элемента (а не атрибута) 'STYLE', размещенного в заголовке документа, т.е. между тегами
и .Это самый распространенный способ применения каскадных таблиц. При этом он самый надежный. Общий синтаксис при этом способе таков:
<head><br />
<style TYPE="text/css"><br />
элемент {свойство: значение; свойство: значение}<br />
</style><br />
</head>
Теперь во всем документе элемент, описанный с помощью 'STYLE' в заголовке, будет форматироваться и представляться на экране в соответствии с установленным для него стилем, если только он не будет переопределен с помощью атрибута STYLE (см. пункт 1) или средствами обычного HTML. Кстати, параметр TYPE="text/css" является обязательным и служит для указания браузеру использовать CSS. Приведу пример:
<head><br />
<style TYPE="text/css"><br />
B {color: red; font-si ze: 120%}<br />
</style> ;<br />
</head><br />
<body><br />
...</body>
Чтобы определить несколько элементов одинаковыми стилями, можно использовать группирование. Тогда все элементы нужно перечислить друг за другом через запятую, вот так:
<br />
H1, H2, H3 {text-decoration: line-though}
Такая запись означает, что заголовки первого, второго и третьего уровней будут отображаться перечеркнутыми.
CSS предоставляет нам еще одну замечательную возможность: определение классов. С помощью классов можно присваивать стили не всем одинаковым элементам страницы, а избирательно. Хотя классы плохо поддерживаются Нетскейпом, однако они предоставляют такую гибкость контроля над элементами, что подчас от них просто невозможно отказаться. Для того чтобы использовать класс, его необходимо вначале определить внутри элемента 'STYLE', а затем сослаться на этот класс в каком-либо элементе внутри 'BODY' с помощью атрибута CLASS:
<head><br />
<style TYPE="text/css"><br />
.имя_класса {свойство: значение; свойство: значение}<br />
</style><br />
</head><br />
<body><br />
...</body>
< элемент CLASS="имя класса">что-то, что будет форматироваться в соответствии с заданными в классе стилями
...
Вот пример:
<head><br />
<style TYPE="text/css"><br />
.x {width: 160px}<br />
.y {padding: 15px}<br />
</style><br />
</head><br />
<body></p>
<table BORDER=1 BGCOLOR=gray BORDERCOLOR=white<<br />
<TR>
<td>Ячейка1</td>
<td CLASS="x">Ячейка2</td>
<tr>
<td CLASS="y">Ячейка3</td>
</tr>
</table>
<p></body>
В этом примере Ячейка2 отформатирована в соответствии с классом "x", для элементов которого установлена ширина в 160 пикселей, а Ячейка3 - в соответствии с классом "y", для всех элементов которого устанавливается внутренний отступ ("набивка") в 15 пикселей. Ячейке1 ни один из классов не присваивается, поэтому она форматируется в соответствии с общепринятыми стандартами HTML, а также согласно описанным в теге