Классы CSS

Классы CSS обеспечивают отображение одинаковых объектов HTML-страницы по-разному, назначая разные свойства одним и тем же элементам.  Классы CSS являются одним из основных составляющих стандарта CSS и придают ему дополнительную гибкость.  Еще их называют селекторами классов CSS.
Реализованы два метода использования классов.

Класс CSS с привязкой к элементу

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

Пример синтаксиса

    НАЗВАНИЕ ЭЛЕМЕНТА.имя-класса { свойство: значение }

В CSS-файле это будет выглядеть так

P.class1 { text-align: center }

P.class2 { text-align: left }

Вызов из HTML будет выглядеть таким образом

< P CLASS=”class1”> Текст выровнен по центру </P>
< P CLASS=”class2”> Текст выровнен по левой стороне </P>
< P> текст отформатирован по умолчанию </P>

Класс CSS без привязки к элементу

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

.имя класса { свойство: значение }

Пример записи в файле CSS

.class1 {color: green }
.class2 {color: red }

Пример в html-коде

<P    CLASS=”class1”> Текст зеленого цвета </P>
<H3 CLASS=”class1”> Заголовок зеленого цвета </H3>

<P    CLASS=”class2” > Текст красного цвета </P>
<H3 CLASS=”class2”> Заголовок красного цвета </H3>

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

Уважаемые читатели, если Вы хотите еще глубже разобраться в такой теме как «Стандарты CSS, использование и применение» Предлагаю Вам очень качественный видиокурс Евгения Попова.   Для ознакомления с этим предложением пройдите по этой ссылке.

15 комментариев на “Классы CSS”