|
Plati.ru - Магазин цифровых товаров: пин-коды для игр, интернета и IP-телефонии, электронные книги, программное обеспечение, красивые номера ICQ и многое другое. Зайди и убедись сам! |
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.
