Класи та ідентифікатори
Русский перевод: Классы и идентификаторы
В Керівництві з 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”.