Урок №4. Идентификаторы, классы, тэги

p {color:#ff0000;} /* Меняет цвет текста абзацев на красный */

Но представьте, что нам нужно задать стиль только одному из абзацев <p></p> или группе этих абзацев, но не всем, как быть тогда?

В этом нам помогу классы(class) и идентификаторы(id). Как вы знаете из курса "HTML для новичков", основным тэгам HTML можно задать два атрибута class и id, первый из которых будет содержать в качестве свойств навзания класса и идентификатора соответственно. Если эти атрибуты заданы, то в CSS можно указать, чтобы стиль применялся конкретно к этому классу/идентификатору.

Чтобы стиль применялся к конкретному классу, перед названием класса нужно ставить точку, а перед названием идентификатора решетку. Чтобы вам было понятнее давайте разберем пример, у нас есть следующий код:

<p>Обычный текст без идентификаторов и классов</p>
<p class="redcolor">Обычный текст с классом - "redcolor"</p>
<p id="first">Обычный текст с идентификатором - "first"</p>
<p class="redcolor">Обычный текст с классом - "redcolor"</p>

Мы хотим, что бы обычные абзацы были черного цвета, абзац с идентификатором "first" - синего, а с классом "redcolor" - красным. Тогда CSS стиль для этого будет выглядеть следующим образом:

p {color:#000000;}
p#first {color:#0000FF;}
p.redcolor {color:#FF0000}

Стоит помнить, что тэгов с одним и тем же классом на странице может быть много, а вот один и тот же идентификатор присваивать нескольким тэгам - грубейшая ошибка.

Стоит понимать, что указывая стили тем образом, что я описал на примере выше, стиль будет применятся исключительно ко всем тэгам <p> с этим классом, а что если потребуется написать стиль для разных тэгов с одним и тем же стилем? Для этого нужно убрать имя тэга из стилей и оставить только название класса с точкой, то же самое касается идентификатора.

Рассмотрим пример, у нас есть HTML код:

<p>Обычный текст без идентификаторов и классов</p>
<p class="redcolor">Обычный текст с классом - "red"</p>
<span class="redcolor">Обычный текст с классом - "red"</span>

Необходимо написать стиль, который будет окрашивать в красный шрифт содержимое всех тэгов у которых есть класс "redcolor", тогда стиль будет выглядить так:

.redcolor {color:#FF0000}