Учебник. Каскадные таблицы стилей

       

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


Имя класса не является каким-либо стандартным именем элемента HTML-разметки. Имя класса определяет описание класса элементов разметки, которые будут отображаться одинаково. Для того, чтобы отнести элемент разметки к определенному классу, нужно воспользоваться атрибутом 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 совершенно другое. При этом каждый из этих классов нельзя применить к другим элементам разметки, например, параграфу или списку. Если не задано имени элемента разметки, то это обозначает, что класс можно отнести к любому элементу разметки - корневой класс описания стилей. Это очень похоже на обозначение имени корневого домена в системе доменных имен. Собственно ничего удивительного здесь нет, т.к. система классов объектов на HTML-странице представляет из себя дерево. Элементы разметки - это узлы дерева.

[]



Содержание раздела