Стилевые классы CSS +

Оставим в покое заголовок сайта — с него достаточно. Обратим внимание на сами заметки. В каждой из них, под заголовком, присутствует дата добавления. Давайте как-то выделим ее, скажем, сделаем курсивной и выровняем по правому краю.И применим мы для этого новую разновидность стилей 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-обозреватель сам применит его, руководствуясь условиями, которые мы указали в качестве его имени. Так что сохраним страницу и таблицу стилей.

Вы можете оставить комментарий, или поставить трэкбек со своего сайта.

Нет комментариев

(Обязательно)
(Обязательно, не публикуется)

Создавая новую Папку, не считайте себя Создателем, это право Вам дано Админом!
Яндекс.Метрика beget