Селектор - имя элемента разметки

Синтаксис

Формально стиль отображения элементов разметки задается ссылкой в элементе разметки на селектор стиля. Синтаксис описания стилей в общем виде представляется следующим образом:

selector[, selector[,...]]{attribute:value;[atribute:value;...]}
или
selector selector [selector...] {attribute:value;[atribute:value;...]}

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

Такой способ конструирования сайта позволяет автору изменять внешний вид всех страниц путем внесения изменений в файл описания стилей, а не в файлы HTML-страниц.

Внешний файл при этом может выглядеть следующим образом:

i, em {color:#003366,font-style:normal}
a i {font-style:normal;font-weight:bold;text-decoration:line-through}

Первая строка этого описания перечисляет селекторы-элементы, которые будут отображаться одинаково:

<i>>Это курсив</i> и это тоже <em>курсив</em>
Это курсив и это тоже курсив

Последняя строка определяет стиль отображения вложенного в гипертекстовую ссылку курсива:

<a name=empty><i>kuku</i></a>
kuku

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

Селектор - имя класса

Имя класса определяет описание класса элементов разметки, которые будут отображаться одинаково. Для того, чтобы отнести элемент разметки к определенному классу, нужно воспользоваться атрибутом class этого элемента разметки:

<style>
.kuku {color:white;background-color:darkred;}
</style>
...
<p class=kuku>
Этот параграф мы отобразим белым цветом по темно-красному фону
</p>
...
<p>
Эту <a class=kuku>гипертекстовую ссылку</a> мы отобразим белым цветом по темно-красному фону.
</p>

Этот параграф мы отобразим белым цветом по темно-красному фону

Эту гипертекстовую ссылку мы отобразим белым цветом по темно-красному фону.

можно определить классы отображения однотипных элементов разметки:

a.menu {color:red;background-color:white;text-decoration:normal;}
a.paragraph {color:navy;text-decoration:underline;}

В данном примере класс гипертекстовых ссылок menu имеет одно описание стиля, а класс гипертекстовых ссылок paragraph совершенно другое. При этом каждый из этих классов нельзя применить к другим элементам разметки, например, параграфу или списку. Если не задано имени элемента разметки, то это обозначает, что класс можно отнести к любому элементу разметки - корневой класс описания стилей.

Дата добавления: 2014-01-07