Рассмотрим еще пару таких стилей. Вот стиль переопределения тега <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 к абзацу 'Внимание!'. В результате этот абзац будет набран красным шрифтом.
Листинг 7.2
attention { color: #FF0000;
font-style: italic }
.
<P><STRONG CLASS='attention'>Стилевой класс требует явной привязки атрибутом тега CLASS!</STRONG></P>
В листинге 7.2 мы создали стилевой класс attention, который задает красный цвет и курсивное начертание шрифта. (Атрибут стиля font-style задает начертание шрифта, а его значение italic как раз делает шрифт курсивным.) Затем мы привязали его к тегу <STRONG>. В результате содержимое этого тега будет набрано полужирным курсивным шрифтом красного цвета; особую важность и связанную с ним 'полужирность' текста задает тег <STRONG>, а курсивное начертание и красный цвет — стилевой класс attention.
В качестве значения атрибута CLASS можно указать сразу несколько имен стилевых классов, разделив их пробелами. В таком случае действие стилевых классов как бы складывается. (Подробнее о действии на элемент Web-страницы нескольких разных стилей мы поговорим потом.)
Листинг 7.3
attention { color: #FF0000; font-style: italic }
bigtext { font-size: large }
.
<P><STRONG CLASS='attention bigtext'>Стилевой класс требует явной привязки атрибутом тега CLASS!</STRONG></P>
В примере из листинга 7.3 мы привязали к тегу <STRONG> сразу два стилевых класса:
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> и <EM>.
— Сначала идет тег <P>, за ним — тег <EM>. Значит, тег <EM> должен быть вложен в тег <P>.
— Стиль будет привязан к тегу <EM>.
<P><EM>Этот текст</EM> станет синим.</P>
