Классы и идентификаторы
Переклад українською: Класи та ідентифікатори
В Руководстве по CSS для новичков мы анализировали только селекторы HTML — те, что представляют HTML-тег. Вы можете также задавать свои собственные селекторы, которые могут принимать форму классов и идентификаторов.
Преимущество такого подхода состоит в том, что вы получаете один и тот же элемент HTML, но представляете его различными способами в зависимости от его класса или идентификатора.
В CSS селектор класса обозначают именем, которое следует за точкой (.). Идентификатор обозначают именем, которое следует за знаком решетки (#).
Таким образом CSS может напоминать следующий код:
#top {
background-color: #ccc;
padding: 1em
}
.intro {
color: red;
font-weight: bold;
}
HTML делает отсылку к стилю CSS значениями атрибутов id и class. Например:
<div id="top">
<h1>Chocolate curry</h1>
<p class="intro">This is my recipe for making curry purely with chocolate</p>
<p class="intro">Mmm mm mmmmm</p>
</div>
Разница между идентификатором id и классом заключается в том, что идентификатор может применяться для определения одного элемента, а класс может использоваться для определения нескольких элементов.
В дополнение вы можете использовать селектор для определенного элемента HTML, просто указав сначала HTML-селектор. Например:
p.jam { какой-то стиль }
Этот стиль будет применяться для элементов параграфов, у которых есть класс «jam».