Листинг 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>:

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

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

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

redtext { color: #FF0000 }

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

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

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

Внимание!

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

<42 43 444546 47 48 >

Дата добавления: 2015-05-08; просмотров: 672;