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

Это большой текст.

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

Во всех рассмотренных нами разновидностях стилей был один селектор, с помощью которого и выполнялась привязка. Однако 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 }

Здесь мы создали сразу три одинаковых стиля: стиль переопределения тега <H1>, стилевой класс redtext и комбинированный стиль P EM. Все они задают красный цвет шрифта.

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

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

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

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

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

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

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

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

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

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

<43 44 454647 48 49 >

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