Классы и идентификаторы

Теория

В руководстве по 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».

Фото


классы и идентификаторы

селектор по ай ди

Видео




Автор Cascading Style Sheets