Александр Чиртик - HTML: Популярный самоучитель
<P class = "italic">Курсивный текст абзаца
<H2 class = "newroman">Измененный заголовок второго уровня</H2>
<P class = "bold">Полужирный текст абзаца
</BODY>
</HTML>
Страница, формируемая браузером Internet Explorer при обработке приведенного примера, показана на рис. 10.2.
Рис. 10.2. Использование стилевых классов
Как можно увидеть, для использования стилевых классов нужно немного больше поработать над содержимым HTML‑документа, назначая нужным элементам значения атрибутов class. При этом доступно гораздо больше возможностей по оформлению документа: например, может быть недостаточно одного и того же цвета абзацев, одинакового выравнивания или шрифта текста. Есть еще множество случаев, когда удобнее создать некоторое количество стилевых классов, а не задавать CSS‑свойства одинаковых HTML‑элементов, как это сделано в примере 10.1.
Задание отображения единичных элементов документа
Стили можно определять не только в таблице стилей. При помощи атрибута style можно создавать так называемые «инлайн‑стили». Атрибут style поддерживается для тех же HTML‑элементов, что и атрибут class. Для создания «инлайн‑стиля» атрибуту style присваивается значение, которое обычно записывается в скобках {} в строке таблицы стилей (то есть объявление правила). Ниже приведен переделанный пример 10.2, в котором как раз и реализовано определение стилей в атрибуте style (обратите внимание, что при этом отпала необходимость определения самой таблицы стилей) (пример 10.3).
Пример 10.3. Использование атрибута style<HTML>
<BODY>
<H1>Заголовок первого уровня</H1>
<P>Текст абзаца
<H1 style = "color: red; font-family: arial">Измененный заголовок первого уровня</H1>
<H2>Заголовок второго уровня</H2>
<P style = "font-style: italic">Курсивный текст абзаца
<H2 style = "color: blue; font-family: newroman">Измененный заголовок второго уровня</H2>
<P style = "font-weight: bold">Полужирный текст абзаца
</BODY>
</HTML>
Рассмотрим еще один способ применения правил отображения, задаваемых с помощью стилевых таблиц. В стилевой таблице можно задать CSS‑свойства HTML‑элемента, имеющего определенное значение атрибута id (атрибут рассматривался в гл. 6). Как это делается, лучше сразу рассмотреть на примере 10.4.
Пример 10.4. Использование атрибута id в CSS<HTML>
<HEAD>
<TITLE>Использование id в CSS</TITLE>
<!– Определение таблицы стилей–>
<STYLE type = "text/css">
#left_pointer {width: 60; height: 120}
#right_pointer {width: 120; height: 60}
</STYLE>
</HEAD>
<BODY>
<P>Рисунки без применения стилей
<IMG src = "left.gif">
<IMG src = "right.gif">
<P>А к этим рисунками применен стиль (изменение размера)
<IMG src = "left.gif" id = "left_pointer">
<IMG src = "right.gif" id = "right_pointer">
</BODY>
</HTML>
В данном случае при помощи CSS задаются параметры отображения двух рисунков. Как это реализуется браузером, можно увидеть на рис. 10.3.
Рис. 10.3. Задание стилей отдельных элементов
Задать параметры отображения только одного элемента рассмотренным способом можно потому, что значение атрибута id, если оно используется, обычно делается уникальным.
Контекстные селекторы
Помимо селекторов, связанных с определенными HTML‑элементами, стилевыми классами или идентификаторами элементов, можно создавать и более сложные селекторы. Они подходят для случаев, когда стиль должен применяться только к элементам документа, находящимся внутри какого‑то другого элемента. Например, средствами CSS можно особым образом оформить элементы LI, находящиеся внутри элемента LO, принадлежащего к различным стилевым классам (пример 10.5).
Пример 10.5. Применение сложных селекторов<HTML>
<HEAD>
<TITLE>Сложные селекторы</TITLE>
<STYLE type = "text/css">
OL.ordinary_list LI {}
OL.italic_list LI {font-style: italic}
OL.colored_list LI {color: green; background-color: yellow}
</STYLE>
</HEAD>
<BODY>
<P>Список, оформленный обычным шрифтом
<OL class = "ordinary_list">
<LI>Элемент списка
<LI>Элемент списка
</OL>
<P>Список, оформленным курсивным шрифтом
<OL class = "italic_list">
<LI>Элемент списка
<LI>Элемент списка
</OL>
<P>Раскрашенный список
<OL class = "colored_list">
<LI>Элемент списка
<LI>Элемент списка
</OL>
</BODY>
</HTML>
Чтобы применить стиль к каждому отдельному элементу списков, не потребовалось назначать никакие стилевые классы для самих элементов списков. Потребовалось лишь отнести сами списки (элементы OL) к нужным стилевым классам, что избавило нас от лишних усилий при составлении HTML‑документа.
Обратите внимание на таблицу стилей из приведенного примера 10.5, а именно на селекторы. Как видите, если нужно указать, что данный стиль должен применяться только к элементам, находящимся внутри другого элемента, контекстный селектор будет состоять из соответствующих простых селекторов, разделенных пробелом.
Кроме того, что показано в примере, можно создать и другие виды контекстных селекторов, например:
P STRONG {color: red} /*применяется к элементам STRONG внутри P*/
.par .colored {color: red} /*применяется к элементам со стилевым классом
"colored", находящимся внутри элементов со стилевым классом "par"*/
Комментарии в таблице стилей
Примечательно, что даже в таблицы стилей можно помещать комментарии. Естественно, это весьма полезно при определении больших и сложных таблиц. При этом синтаксис комментария CSS отличается от синтаксиса комментария HTML. Комментарий в CSS задается в стиле языков программирования C или Java, то есть так:
/* Это однострочный комментарий */
/* А здесь записан
многострочный
комментарий */
10.4. Порядок применения стилей
В самом начале главы говорилось не просто о таблицах стилей, а о каскадных таблицах стилей. Рассмотрим, в чем же проявляется каскадирование и как его можно использовать. Каскадирование проявляется при наличии в одной или нескольких используемых документом таблицах стилей задания разных значений одного и того же свойства определенного HTML‑элемента, стилевого класса или элемента с заданным значением id. Например, пусть в таблице есть следующие записи:
...
H3 {text-align: right; color: black}
...
H3 {text-align: center}
Какое из значений свойства text-align нужно использовать? Каскадирование предполагает, что нужно использовать последнее значение, которое присвоено этому свойству. Это и должен делать браузер.
Аналогичным образом выбираются значения при перекрытии не одного, а нескольких свойств.
Если нужно, чтобы присвоенное ранее значение нельзя было изменить, то при его задании применяется модификатор important.
...
H3 {text-align: right ! important; color: black}
...
H3 {text-align: center}
Теперь для всех HTML‑элементов H3 будет использоваться выравнивание по правому краю, несмотря на то что последним было определение выравнивания по центру.
Возможен также случай, когда в нескольких таблицах или в нескольких местах одной и той же таблицы стилей установлен модификатор important сразу для нескольких значений одного и того же свойства.
Рассмотрим пример:
...
H3 {text-align: right ! important; color: black}
...
H3 {text-align: center ! important}
...
H3 {text-align: left}=
В этом случае для свойства text-align принимается последнее значение с модификатором important (значения без important вообще не рассматриваются). В этом случае также осуществляется каскадирование, но не для всех значений свойства, а только для значений с модификатором important.
Следует также отметить, что стили, заданные для HTML‑элементов, стилевые классы и встроенные стили (заданные в атрибуте style) каскадируются следующим образом (последующие элементы списка переопределяют предыдущие):
• стили, заданные для HTML‑элементов;
• стилевые классы;
• встроенные стили.
В результате обработки следующего фрагмента текст элемента P будет отображаться подчеркнутым, шрифтом синего цвета с полужирным начертанием.
...
<STYLE type = "text/css">
P {font-weight: bold}
.p {color: blue}
</STYLE>
</HEAD>
<BODY>
<P class = "p" style = "text-decoration: underline">Текст абзаца
...
Если бы свойства, заданные, например, для стилевого класса и с помощью встроенного стиля, перекрывались, то они были бы переопределены в соответствии с приведенным выше списком (не забывайте также про модификатор important).
Еще одной особенностью применения стилей является наследование. Это означает, что настройки стиля родительского HTML‑элемента автоматически применяются к вложенным элементам. Например, настройки шрифта, заданные для BODY, будут применены по умолчанию ко всему тексту документа. Если же для абзацев (P) также заданы другие стилевые настройки, то они будут дополнять или переопределять настройки, назначенные элементу BODY. Кроме того, стили наследуются в зависимости от того, как они записаны в таблице стилей. Так, в приведенном ниже фрагменте настройки шрифта наследуются в следующем порядке (пример 10.6):
