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

Привязка стилевых классов

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

Поставим текстовый курсор на дату добавления одной из заметок и щелкнем по кнопке p в секции тегов, чтобы выделить ее целиком. После этого выберем в раскрывающемся списке Целевое правило редактора свойств пункт <Создать правило CSS>. И щелкнем по кнопке, находящейся также в редакторе свойств.

На экране появится уже знакомое нам диалоговое окно Создать правило CSS. В раскрывающемся списке этого окна Тип селектора выберем пункт Класс (применимо к любому элементу HTML) — именно он указывает Dreamweaver создать стилевой класс. В комбинированном списке

Имя селектора введем имя стилевого класса — .added (не забудем про точку в его начале). А в раскрывающемся списке Определение правила выберем пункт main.css — нашу внешнюю таблицу стилей. И нажмем кнопку .

Дата добавления заметки стала курсивной. Осталось только выровнять ее по правому краю. Находим в редакторе свойств группу кнопок-переключателей и щелкаем по третьей слева кнопке. Все.

Dreamweaver сделает за нас две вещи. Во-первых, создаст стилевой класс .added и поместит его в таблицу стилей main.css. Во-вторых, сам выполнит привязку этого стилевого класса к тегу <p>, содержимым которого является дата добавления заметки. После этого стилевой класс .added станет действовать на содержимое этого тега.

Если мы посмотрим на секцию тегов, то увидим, что кнопка р, соответствующая абзацу с датой добавления, изменила вид на p.added. Так Dreamweaver дает нам понять, что к данному тегу <p> привязан стилевой класс .added.

Но как привязать стилевой класс .added к дате добавления остальных заметок? Очень просто! Ставим текстовый курсор на дату добавления — выделять ее полностью при этом необязательно. И открываем раскрывающийся список Целевое правило, который нам уже хорошо знаком.

Только что созданный нами стилевой класс .added находится в самом низу этого списка. Выбираем его — и привязка выполнена!

Можно поступить и по-другому. Ставим текстовый курсор на элемент страницы, к которому нужно привязать стилевой класс, щелкаем по соответствующей ему кнопке секции тегов правой кнопкой мыши и выбираем в подменю Задать класс появившегося на экране контекстного меню пункт, чье имя совпадает с именем нужного стилевого класса

Осталось выяснить, выполняется ли привязка стилевого класса к тегу в HTML-коде. Переключимся в режим отображения HTML-кода и найдем тег, создающий дату добавления любой заметки. Он будет иметь вот такой вид:

<P CLASS=»added»>19.02.2009</P>

Как мы видим, в теге <p> присутствует атрибут class, в качестве значения которого указано имя нашего стилевого класса, причем здесь — уже без точки. Именно этот атрибут и служит для привязки стилевого класса к тегу. Он является необязательным (что понятно) и поддерживается практически всеми тегами HTML.
Ради интереса посмотрим на CSS-код стилевого кл асса .added Вот он:

.added {

font-style: italic; text-align: right;

}

Обратим внимание, что здесь имя стилевого класса также предваряется точкой. Значение right уже знакомого нам атрибута стиля text-align задает выравнивание по правому краю. Атрибут стиля font-style задает стиль шрифта; его значение italic как раз делает шрифт курсивным.

Комбинированные стили CSS

Что бы еще такое сделать?.. Давайте немного уменьшим размер шрифта, которым набраны сведения об авторских правах. И применим для этого уже четвертую по счету разновидность стилей CSS, которую сейчас рассмотрим.

Это комбинированные стили — стили, являющиеся комбинацией уже рассмотренных нами. Они позволяют указать теги, к которым будет применен стиль, с помощью весьма сложных условий. Такие условия записываются в качестве имен комбинированных стилей, т. е. имя стиля само по себе задает теги, к которым он будет применен.

Давайте, например, рассмотрим стиль с таким именем: p em

Он будет применен к любому тегу <em>, вложенному в тег <p>. К тегам <em>, вложенным в другие теги, скажем, <H1>, от применен не будет.

Комбинированный стиль с именем h1.red будет применен к любому тегу <hi>, к которому, помимо этого, привязан стилевой класс .red.

А мудреный стиль с именем

table.highlight th p

будет применен к любому абзацу, являющемуся содержимым ячейки заголовка таблицы, к которой привязан стилевой класс .hightiight.

Подытожим все, что узнали. Имя комбинированного стиля представляет собой перечень тегов, создающих элемент страницы, к которому и привязывается стиль. Имена этих тегов указываются без символов < и >, через пробел, в порядке от тегов меньшего уровня вложенности к тегам большего уровня вложенности, если читать слева направо. Если к какому-либо их этих тегов привязан еще и стилевой класс, если имя указывается сразу после имени тега, через точку, без пробелов.

Для наших целей мы используем комбинированный стиль с именем p em (или p em — регистр букв здесь роли не играет). Как мы помним, сведения об авторских правах у нас находятся в отдельном абзаце (тег <p>) и выделены курсивом (тег <em>).

Поставим текстовый курсор на текст сведений об авторских правах и щелкнем по кнопке p в секции тегов, чтобы выделить его целиком. Выберем в раскрывающемся списке Целевое правило редактора свойств пункт <Создать правило CSS>. И выберем в комбинированном списке Размер пункт smaller, т. е. размер, на одну ступень меньший, чем размер шрифта родителя, в нашем случае — станицы.

На экране опять появится диалоговое окно Создать правило CSS. В раскрывающемся списке Тип селектора выберем пункт Компоновка (на основании выделенного фрагмента) — таким образом мы укажем Dreamweaver создать комбинированный стиль. В комбинированном списке Имя селектора введем имя стиля — p em. А в раскрывающемся списке Определение правила выберем пункт main.css — нашу внешнюю таблицу стилей. И нажмем кнопку ОК.

На этом все. Комбинированный стиль, как и стиль переопределения тега, не нужно привязывать — Web-обозреватель сам применит его, руководствуясь условиями, которые мы указали в качестве его имени. Так что сохраним страницу и таблицу стилей.