Листинг 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-тега без символов < и >. Селектор можно набирать как прописными, так и строчными буквами; автор предпочитает прописные.
Рассмотрим еще пару таких стилей. Вот стиль переопределения тега <EM>: EM { color: #00FF00; font-weight: bold }
Любой текст, помещенный в тег <EM>, 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, поддерживаемый практически всеми тегами. В качестве значения этого атрибута указывают имя нужного стилевого класса без символа точки:
<P CLASS="redtext">Внимание!</P>
Здесь мы привязали только что созданный стилевой класс redtext к абзацу "Внимание!". В результате этот абзац будет набран красным шрифтом.
Дата добавления: 2015-05-08; просмотров: 685;