HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

ЧАСТЬ 2 Представление Web-страниц. Каскадные таблицы стилей CSS 3

ГЛАВА 7. Введение в стили CSS

Предыдущая часть книги была посвящена содержимому Web-страниц и языку HTML 5, на котором оно создается. Мы изучили немало новых терминов, использовали много тегов HTML и создали несколько Web-страниц нашего первого Web- сайта. Эти Web-страницы содержат большой объем текста, таблицу, графическое изображение, аудио- и видеоролик. Неплохо для начала. Только вот выглядят эти Web- страницы как-то невзрачно. Однообразный текст, похожие друг на друга абзацы, таблицы без рамок, тоскливая черно-белая расцветка… Не помешает их как-то оформить. Вы так не считаете?.. За оформление Web-страниц и отдельных их элементов 'отвечает' представление. Именно представление поможет нам оформить абзацы, таблицы и гиперссылки так, как хотим мы, а не Web-обозреватель (точнее, его разработчики). Именно представление поможет нам сделать Web-страницы привлекательными. Мы много раз упоминали о представлении, предвкушая момент знакомства с ним. И момент настал! Вся эта часть книги будет посвящена представлению Web- страниц и технологиям, используемым для его создания. А еще мы наконец-то займемся собственно Web-дизайном.

Понятие о стилях CSS

Для создания представления Web-страниц предназначена технология каскадных таблиц стилей (Cascading Style Sheets, CSS), или просто таблиц стилей. Таблица стилей содержит набор правил (стилей), описывающих оформление самой Web- страницы и отдельных ее фрагментов. Эти правила определяют цвет текста и выравнивание абзаца, отступы между графическим изображением и обтекающим его текстом, наличие и параметры рамки у таблицы, цвет фона Web-страницы и многое другое.

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

Таблица стилей может храниться прямо в HTML-коде Web-страницы или в отдельном файле. Последний подход более соответствует концепции Web 2.0; как мы помним из главы 1, она требует, чтобы содержимое и представление Web-страницы были разделены. Кроме того, отдельные стили можно поместить прямо в тег HTML, создающий элемент Web-страницы; такой подход используется сейчас довольно редко и, в основном, при экспериментах со стилями.

Таблицы стилей пишут на особом языке, который так и называется — CSS. Стандарт, описывающий первую версию этого языка (CSS 1), появился еще в 1996 году. В настоящее время широко поддерживается и применяется на практике стандарт CSS 2 и ведется разработка стандарта CSS 3, ограниченное подмножество которого уже поддерживают многие Web-обозреватели.

Как раз CSS 3 (точнее, то его подмножество, поддерживаемое современными программами) мы и будем изучать.

Создание стилей CSS

Обычный формат определения стиля CSS иллюстрирует листинг 7.1.

Листинг 7.1

<селектор> {

<атрибут стиля 1>: <значение 1>;

<атрибут стиля 2>: <значение 2>;

.

<атрибут стиля n-1>: <значение n-1>;

<атрибут стиля n>: <значение n>

}

Вот основные правила создания стиля.

— Определение стиля включает селектор и список атрибутов стиля с их значениями.

— Селектор используется для привязки стиля к элементу Web-страницы, на который он должен распространять свое действие. Фактически селектор однозначно идентифицирует данный стиль.

— За селектором, через пробел, указывают список атрибутов стиля и их значений, заключенный в фигурные скобки.

— Атрибут стиля (не путать с атрибутом тега!) представляет один из параметров элемента Web-страницы: цвет шрифта, выравнивание текста, величину отступа, толщину рамки и др. Значение атрибута стиля указывают после него через символ: (двоеточие). В некоторых случаях значение атрибута стиля заключают в кавычки.

— Пары <атрибут стиля>:<значение> отделяют друг от друга символом; (точка с запятой).

— Между последней парой <атрибут стиля>:<значение> и закрывающей фигурной скобкой символ; не ставят, иначе некоторые Web-обозреватели могут неправильно обработать определение стиля.

— Определения различных стилей разделяют пробелами или переводами строк.

— Внутри селекторов и имен стилей не должны присутствовать пробелы и переводы строки. Что касается пробелов и переводов строк, поставленных в других местах определения стиля, то Web- обозреватель их игнорирует. Поэтому мы можем форматировать CSS-код для удобства его чтения, как проделывали это с HTML-кодом.

Но правила — правилами, а главное — практика. Давайте рассмотрим пример небольшого стиля:

P { color: #0000FF }

Разберем его по частям.

— P — это селектор. Он представляет собой имя тега <P>.

— color — это атрибут стиля. Он задает цвет текста.

- #0000FF — это значение атрибута стиля color. Оно представляет код синего цвета, записанный в формате RGB. (Подробнее об RGB-коде и его задании мы поговорим в главе 8.)

Когда Web-обозреватель считает описанный стиль, он автоматически применит его ко всем абзацам Web-страницы (тегам <P>). Это, кстати, типичный пример неявной привязки стиля.

Стиль, который мы рассмотрели, называется стилем переопределения тега. В качестве селектора здесь указано имя переопределяемого этим стилем HTML-тега без символов < и >. Селектор можно набирать как прописными, так и строчными буквами; автор предпочитает прописные.