HTML-верстка: инструменты и приемы профессиональной front-end разработки

Id и class в CSS.


назад вперед

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

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


Селектор id

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

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

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

Пример

HTML

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


CSS

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

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


Селектор class

Селектор 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;}

Совет: название класса не должно начинаться с цифры, так как такие названия поддерживаются только в Internet Explorer.



Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!


назад вперед

СТАТИСТИКА



ССЫЛКИ


Подпишись на новости сайта