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 атрибуты,
ол элементтерге бірегей идентификаторлар тағайындайды