Кроме форматирования обычных HTML элементов (например, h1, p и тд), CSS позволяет вам указать свои собственные селекторы, называемые «id» и «class», которые позволяют применять свойства CSS к элементам определенного блока страницы. Например, вы можете присвоить класс всем ссылкам в блоке навигации и другой класс блоку содержимого страницы. После этого при помощи CSS вы можете присвоить различный стиль ссылкам в блоке навигации и блоке контента. На этом сайте вы можете убедиться в том, что ссылки в блоках навигации слева и справа имеют различный стиль, отличающийся от стиля ссылок в блоке контента.
Селектор id
Селектор id используется для определения стиля единственного, уникального элемента страницы.
Селектор id использует атрибут id HTML-элемента и определяется знаком «#».
Стилевое правило в примере ниже будет применено к элементу с id=»para1″:
HTML
К этому параграфу будет применен стиль id para1, то есть текст параграфа будет выровнен по центру и будет окрашен в красный цвет.
CSS
#para1 { text-align:center; color:red;
}
Совет: название id не должно начинаться с цифры, так как такой id не будет работать в firefox.
Селектор class
Селектор class используется для определения стиля групп элементов. В отличие от селектора id, селектор class обычно используют для форматирования нескольких элементов.
Это позволяет вам задавать одинаковый стиль для любого html-элемента с одинаковым классом.
Селектор class использует атрибут HTML class и определяется знаком «.»
В примере ниже, текст всех html-элементов с class=»center» будет выровнен по центру:
HTML
Текст этого заголовка будет выровнен по центру
Текст этого параграфа также будет выровнен по центру.
CSS
.center {text-align:center;}
Вы можете указать, что стиль класса должен применяться только к одному элементу HTML.
В примере ниже, текст всех элементов p (параграф) с class=»center» будет выровнен по центру:
p.center {text-align:center;}
Совет: название класса не должно начинаться с цифры, так как такие названия поддерживаются только в Internet Explorer.