Предыдущая часть книги была посвящена содержимому 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 — это селектор. Он представляет собой имя тега

.

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

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

Когда Web-обозреватель считает описанный стиль, он автоматически применит его ко всем абзацам Web-страницы (тегам

). Это, кстати, типичный пример неявной привязки стиля.

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

Рассмотрим еще пару таких стилей. Вот стиль переопределения тега : EM { color: #00FF00; font-weight: bold }

Любой текст, помещенный в тег , Web-обозреватель выведет зеленым полужирным шрифтом. Атрибут стиля font-weight задает степень "жирности" шрифта, а его значение bold — полужирный шрифт.

А это стиль переопределения тега :

BODY { background-color: #000000; color: #FFFFFF }

Он задает для всей Web-страницы белый цвет текста (RGB-код #FFFFFF) и черный цвет фона (RGB-код #000000). Атрибут стиля background-color, как мы уже поняли, задает цвет фона.

А теперь рассмотрим совсем другой стиль:

redtext { color: #FF0000 }

Он задает красный цвет текста (RGB-код #FF0000). Но в качестве селектора используется явно не имя тега — HTML-тега не существует.

Это другая разновидность стиля CSS — стилевой класс. Он может быть привязан к любому тегу. В качестве селектора здесь указывают имя стилевого класса, которое его однозначно идентифицирует. Имя стилевого класса должно состоять из букв латинского алфавита, цифр и дефисов, причем начинаться должно с буквы. В определении стилевого класса его имя обязательно предваряется символом точки — это признак того, что определяется именно стилевой класс.

Стилевой класс требует явной привязки к тегу. Для этого служит атрибут CLASS, поддерживаемый практически всеми тегами. В качестве значения этого атрибута указывают имя нужного стилевого класса без символа точки:

Внимание!

Здесь мы привязали только что созданный стилевой класс redtext к абзацу "Внимание!". В результате этот абзац будет набран красным шрифтом.

Листинг 7.2

attention { color: #FF0000;

font-style: italic }

.

<P><STRONG CLASS="attention">Стилевой класс требует явной привязки атрибутом тега CLASS!</STRONG></P>

В листинге 7.2 мы создали стилевой класс attention, который задает красный цвет и курсивное начертание шрифта. (Атрибут стиля font-style задает начертание шрифта, а его значение italic как раз делает шрифт курсивным.) Затем мы привязали его к тегу . В результате содержимое этого тега будет набрано полужирным курсивным шрифтом красного цвета; особую важность и связанную с ним "полужирность" текста задает тег , а курсивное начертание и красный цвет — стилевой класс attention.

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

Листинг 7.3

attention { color: #FF0000; font-style: italic }

bigtext { font-size: large }

.

Стилевой класс требует явной привязки атрибутом тега CLASS!

В примере из листинга 7.3 мы привязали к тегу сразу два стилевых класса:

attention и bigtext. В результате содержимое этого тега будет выведено полужирным курсивным шрифтом красного цвета и большого размера. (Атрибут стиля font-size указывает размер шрифта, а его значение large — большой размер, сравнимый с размером шрифта, которым выводятся заголовки первого уровня.)

Именованный стиль во многом похож на стилевой класс. Селектором этого стиля также является имя, которое его однозначно идентифицирует, и привязывается он к тегу также явно. А дальше начинаются отличия.

— В определении именованного стиля перед его именем ставят символ # ("решетка"). Он сообщает Web-обозревателю, что перед ним именованный стиль.

— Привязку именованного стиля к тегу реализуют через атрибут ID, также поддерживаемый практически всеми тегами. В качестве значения этого атрибута указывают имя нужного именованного стиля, уже без символа #.

— Значение атрибута тега ID должно быть уникальным в пределах Web-страницы.

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

В примере:

#bigtext { font-size: large }

.

<P ID="bigtext">Это большой текст.</P>

абзац "Это большой текст" будет набран крупным шрифтом.

Во всех рассмотренных нами разновидностях стилей был один селектор, с помощью которого и выполнялась привязка. Однако CSS позволяет создавать стили с несколькими селекторами — так называемые комбинированные стили. Такие стили служат для привязки к тегам, удовлетворяющим сразу нескольким условиям. Так, мы можем указать, что комбинированный стиль должен быть привязан к тегу, вложенному в другой тег, или к тегу, для которого указан определенный стилевой класс.

Правила, которые установлены стандартом CSS при написании селекторов в комбинированном стиле.

— Селекторами могут выступать имена тегов, имена стилевых классов и имена именованных стилей.

— Селекторы перечисляют слева направо и обозначают уровень вложенности соответствующих тегов, который увеличивается при движении слева направо: теги, указанные правее, должны быть вложены в теги, что стоят левее.

— Если имя тега скомбинировано с именем стилевого класса или именованного стиля, значит, для данного тега должно быть указано это имя стилевого класса или именованного стиля.

— Селекторы разделяют пробелами.

— Стиль привязывают к тегу, обозначенному самым правым селектором. Мудреные правила, не так ли?.. Чтобы их понять, рассмотрим несколько примеров. Начнем с самого простого комбинированного стиля:

P EM { color: #0000FF }

— В качестве селекторов использованы имена тегов

и .

— Сначала идет тег

, за ним — тег . Значит, тег должен быть вложен в тег

.

— Стиль будет привязан к тегу .

Этот текст станет синим.

А этот не станет.

Этот — тоже.

Здесь слова "Этот текст" будут набраны синим шрифтом. Вот еще один комбинированный стиль:

P.mini { color: #FF0000; font-size: smaller }

Имя тега

скомбинировано с именем стилевого класса mini. Значит, данный стиль будет применен к любому тегу

, для которого указано имя стилевого класса mini. (Значение smaller атрибута стиля font-size задает уменьшенный размер шрифта.)

Маленький красный текстик.

И последний пример комбинированного стиля: P.sel { color: #FF0000 }

Этот стиль будет применен к тегу , находящемуся внутри тега

, к которому привязан стилевой класс sel.

Этот текст станет красным.

В данном примере слово "Этот" будет выделено красным цветом.

Стандарт CSS позволяет определить сразу несколько одинаковых стилей, перечислив их селекторы через запятую:

H1, redtext, P EM { color: #FF0000 }

Здесь мы создали сразу три одинаковых стиля: стиль переопределения тега

, стилевой класс redtext и комбинированный стиль P EM. Все они задают красный цвет шрифта.

Все четыре рассмотренные нами разновидности стилей CSS могут присутствовать только в таблицах стилей. Если указать их в HTML-коде Web-страницы, они, скорее всего, будут проигнорированы.

Стили последней — пятой — разновидности указывают прямо в HTML-коде Web-страницы, в соответствующем теге. Это встроенные стили. В сплоченном семействе стилей они стоят особняком.

— Они не имеют селектора, т. к. ставятся прямо в нужный тег. Селектор в данном случае просто не нужен.

— В них отсутствуют фигурные скобки, поскольку нет нужды отделять список атрибутов стиля от селектора, которого нет.

— Встроенный стиль может быть привязан только к одному тегу — тому, в котором он находится.

Определение встроенного стиля указывают в качестве значения атрибута STYLE нужного тега, который поддерживается практически всеми тегами:

Маленький курсивчик.

Ранее мы упомянули, что в некоторых случаях значение атрибута стиля нужно заключать в кавычки. Но в определении встроенного стиля вместо кавычек используются апострофы.

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

В главе 14 мы рассмотрим еще одну разновидность стилей CSS. А пока что закончим с ними и приступим к рассмотрению таблиц стилей.