Селекторы id и class

Кроме форматирования обычных HTML элементов (например, h1, p и тд), CSS позволяет вам указать свои собственные селекторы, называемые "id" и "class", которые позволяют применять свойства CSS к элементам определенного блока страницы. Например, вы можете присвоить класс всем ссылкам в блоке навигации и другой класс блоку содержимого страницы. После этого при помощи CSS вы можете присвоить различный стиль ссылкам в блоке навигации и блоке контента. На этом сайте вы можете убедиться в том, что ссылки в блоках навигации слева и справа имеют различный стиль, отличающийся от стиля ссылок в блоке контента.

Селектор id используется для определения стиля единственного, уникального элемента страницы.

Селектор id использует атрибут id HTML-элемента и определяется знаком "#".

Стилевое правило в примере ниже будет применено к элементу с id="para1":

Пример

HTML

<p id="para1">К этому параграфу будет применен стиль id para1, то есть текст параграфа будет выровнен по центру и будет окрашен в красный цвет.</p>

CSS

#para1
{
text-align:center;
color:red;
}

Совет: название id не должно начинаться с цифры, так как такой id не будет работать в firefox.

Селектор class используется для определения стиля групп элементов. В отличие от селектора id, селектор class обычно используют для форматирования нескольких элементов.

Это позволяет вам задавать одинаковый стиль для любого html-элемента с одинаковым классом.

Селектор class использует атрибут HTML class и определяется знаком "."

В примере ниже, текст всех html-элементов с class="center" будет выровнен по центру:

Пример

HTML

<h1 class="center">Текст этого заголовка будет выровнен по центру</h1>

<p class="center">Текст этого параграфа также будет выровнен по центру.</p>

CSS

.center {text-align:center;}

Вы можете указать, что стиль класса должен применяться только к одному элементу HTML.

В примере ниже, текст всех элементов p (параграф) с class="center" будет выровнен по центру:

Пример

p.center {text-align:center;}

Дата добавления: 2015-07-16