CSS: Идентификация и группирование элементов (id, class)

Продолжу цикл по основам таблиц стилей. В этой статье рассмотрим способы идентификации и группирования элементов, вопрос когда лучше использовать id, а когда class?
Ответ на вопрос довольно прост: если мы хотим чтобы определенная группа элементов имела одно оформление, то группируем их с помощью классов, если же хотим какому-то конкретному элементу придать свой стиль, используем id. Однако никто не мешает нам использовать один и тот же id в нескольких местах (правда по правилам в одном документе нельзя использовать один и тот же id несколько раз). Но здесь есть одно существенное замечание — id имеет более высокий приоритет. Поясню на примере: пусть для заголовка h1 применяется одновременно и class, и id, и в каждом из них описан цвет текста, тогда заголовок окрасится в цвет, который указан для id.
Маленький пример, описывающий отличия и применение идентификатора и класса. Применим стили описанные ниже:

<style>
     .class1{color: black;}
     #id1{color: red;}
</style>

к конструкции:

<p class="class1">Текст черного цвета<p>
<p id="id1">Текст красного цвета<p>
<p class="class1" id="id1">Текст снова красного цвета, id имеет приоритет.<p>
При перепубликации активная ссылка на этот блог обязательна.
Поблагодарить автора 🙂
 руб.