Главная :: CSS. Каскадные таблицы стилей :: CSS. Классы

CSS. Классы

Если нужно определить стиль так, чтобы один и тот же элемент в разных случаях отображался по-разному, то на помощь приходят классы. Класс описывается в виде .имя_класса {свойства}. Для присвоения класса выбранному тегу используется свойство CLASS="имя_класса". Это можно продемонстрировать на следующем примере:

Код	Отображение
<STYLE TYPE="text/css"> .font1 {color: yellow; background: red;} .font2 {color: blue; background: yellow;} </STYLE> ... <SPAN CLASS="font1">Желтый текст на красном фоне</SPAN> <SPAN CLASS="font2">Синий текст на зеленом фоне</SPAN>. А здесь цвет фона и текста заданы по умолчанию.	Желтый текст на красном фоне Синий текст на зеленом фоне. А здесь цвет фона и текста заданы по умолчанию.

В примере прописаны два класса "font1" и "font2" задающие цвет фона и изображения. Эти классы были применены к тегу <SPAN>. Свойства, прописываемые классом, могут быть присвоены любому тегу (если он обладает свойствами, описанными в классе). Например, класс font1, определенный в предыдущем примере может быть применен к таблице:

Код

Отображение

<TABLE CLASS="font1">
<TR><TD>Это ячейка таблицы</TD><TD>И это тоже</TD></TR>
<TABLE>

Это ячейка таблицы

И это тоже

Для определения класса для определенного тега используется конструкция имя_тега.имя_класса {свойства}. Например, нам нужно часть текста выделить красным. Определим класс для тега <FONT>:

Код	Описание
<STYLE TYPE="text/css"> FONT.select {color: red;} </STYLE> ... Здесь мы выделили <FONT CLASS="select">часть текста</FONT>.	Здесь мы выделили часть текста.

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