CSS - это просто. Часть 1

Технология CSS расширяет возможности языка HTML. С помощью простых и изящных элементов она позволяет оптимизировать вёрстку web-страничек и сделать ваш сайт неповторимым.

Три волшебные буквы
Основное применение CSS (Cascading Style Sheets, каскадные таблицы стилей) – возможность использования общих стилей форматирования текста, таблиц и других элементов. Так как описание стилей хранятся в одном css-файле, то для изменения оформления страниц всего сайта достаточно подправить (или заменить) этот файл. При помощи CSS можно реализовать очень многое: графические списки, «живые» кнопки, цветную полосу прокрутки. Добавьте к этому использование разнообразных графических фильтров для картинок на вашей странице, и вы получите... далеко не полный спектр возможностей этой замечательной технологии.

Мы будем рассматривать только классическое применение CSS: описание стилей лежит в одном файле и используется многими страницами сайта. Вообще-то, стили можно указывать и прямо в коде htm-странички, вставив их в тело парного служебного тэга <style>, или задав параметр style в любом из тэгов, допускающих использование форматирования (например, <table>). Впрочем, этими возможностями пользуются реже – страница со вставленными в неё стилями сильно «разбухает».

Практика
Принцип работы любой технологии проще всего объяснить на примере. Давайте создадим простой css-файл (назовём его, к примеру, main.css) и опишем в нём стиль base (вы можете придумать и другое название). Данный стиль будет включать в себя текст синего цвета, написанный шрифтом Arial, выровненный по правому краю. При таких условиях содержание файла main.css должно выглядеть следующим образом:

.base {
Color: #3300FF;
Font-Family: Arial;
Text-align: right;
 }

Теперь разберём данный пример подробнее. Название стиля, написанное с точкой в начале, представляет собой так называемый «селектор» – область действия стиля. Именно по нему браузер будет ориентироваться при поиске стиля для элементов html-странички. Собственно описание стиля заключено в фигурные скобки и представляет собой строки вида: имя_параметра: значение, разделённые точкой с запятой. При этом вы можете писать каждый параметр с новой строки (улучшается читабельность кода) или записывать все параметры в одну строку (экономится трафик). Назначение конкретных параметров мы рассмотрим чуть позже (впрочем, здесь оно понятно и так).
Теперь нам необходимо подключить созданный css-файл к нашей html-страничке. Делается это очень просто – в зоне действия тэга <head> необходимо вписать следующий код:

<head>
<link rel=”stylesheet” href=”main.css” type=”text/css”>
</head>

Дабы использовать единый файл стилей на всём сайте, впишите указанный код во все страницы вашего сайта. А теперь прикиньте, как вырос бы объём вашего сайта, если бы тот же самый стиль был вписан в каждую страницу (правда, для столь простого css-файла разница невелика, но вот когда стилей много...).
Последнее, что нам необходимо сделать – применить стиль «base» к какой-нибудь части страницы. Например, к параграфу. Здесь опять таки всё просто: нужно лишь добавить в тэг <p> параметр class со значением, равным имени стиля. В результате получим следующее:

<p class=”base”>Текст</p>

Аналогичным образом можно применить стили и к остальным элементам. Впрочем, об этом мы ещё поговорим...

Селекторы
Как мы уже сказали, область действия стиля (селектор) имеет имя. В принципе, вы можете использовать любые имена, однако существуют зарезервированные селекторы, стиль которых автоматически применяется к определенному блоку страницы. К примеру, стиль с именем body будет применён ко всему телу. Аналогичным образом действуют стили с именами table, p и другие (фактически, вы можете задать стиль для любого стандартного элемента HTML). Обратите внимание, что имена таких селекторов пишутся в css-файле без ведущих точек.
Собственные селекторы имеются также и для описания стилей гиперссылок. Каждая ссылка в HTML имеет четыре состояния: обычная ссылка (не посещавшаяся), посещённая ссылка, ссылка, на которую наведён курсор и ссылка в «нажатом» состоянии). Этим состояниям соответствуют (в порядке перечисления) следующие базовые селекторы стилей: a.link, a.visited, a.hover, a.active.

Продолжение следует...

Рекомендуем почитать: