Атрибутот class

Атрибутот class задава еден или повеќе класови за елементот (под елемент се подразбира таг).

Ова се прави за потоа да се пристапи преку CSS до група на елементи кои имаат зададен ист клас, и да се применат за него одредени својства (на пример, промена на бојата на текстот, големината на фонтот и така натаму).

Постои и атрибут id, кој слично на атрибутот class овозможува избирање на елементи на HTML страницата.

Разликата помеѓу атрибутот class и атрибутот id е во тоа што class избира група елементи (дури и ако е даден на еден елемент - подоцна може да се даде и на друг), а id избира уникатен елемент (не треба да има елемент со таков id на страницата на веб-страницата, инаку ќе има конфликт).

Како да одлучите што да дадете на елементот - клас или id? Клас се дава на оние елементи кои се повторуваат на страниците на веб-страницата (за да не се пишува по неколку пати истиот CSS код). Дури и ако во моментов овој елемент е еден, но сметате дека слични елементи може да се појават во иднина - дајте му класа на овој елемент. Ако пак сте сигурни дека таков елемент е уникатен - тогаш дајте му id. Иако во денешно време постои тенденција сите елементи да добијат класа, а id да се остави за JavaScript, таа не е општо прифатена.

На елементот може да се зададат повеќе класови, во тој случај тие треба да се наведат разделени со празно место.

Имињата на класовите треба да се напишани со англиски букви, бројки, без празни места (празното место ги разделува класовите една од друга, наместо него може да се користи подвлекување или цртичка). Класовите не треба да започнуваат со бројка (во HTML5 веќе може, но нема да работи во старите прелистувачи).

Имињата на класовите треба да се даваат на англиски јазик (а не на руски, едноставно со англиски букви!). Имињата треба да бидат смислени, да ја одразуваат суштината на класата.

Пример

Ајде на сите параграфи со класа test да им зададемо црвена боја на текстот:

<p class="test">Параграф со класа test.</p>
<p>Контролен параграф без класа.</p>

.test {
	color: red;
}

Пример . Повеќе класови за елемент

А тука да му зададеме на првиот параграф повеќе класови - test1 и test2 (ќе ги запишеме разделени со празно место). Класата test1 задава црвена боја на текстот, а класата test2 задава големина на фонтот од 20px. На вториот параграф е дадена само класата test1 (овој параграф ќе стане црвен), а на третиот параграф - класата test2 (овој параграф ќе има големина на фонтот од 20px). Првиот параграф, кој има две класови, ќе има истовремено и црвена боја и големина на фонтот од 20px:

<p class="test1 test2">Параграф со две класови test1 и test2.</p>
<p class="test1">Параграф со класа test1.</p>
<p class="test2">Параграф со класа test2.</p>
<p>Контролен параграф без класови.</p>

.test1 {
	color: red;
}
.test2 {
	font-size: 20px;
}

Погледнете ги исто така

атрибутот id,
кој задава уникатни идентификатори на елементите