Атрибут class

Атрибут class элемент үчүн (элемент деп тег эсептелет) бир же бир нече классты белгилейт.

Бул анын үстүнөн, бирдей классты алган элементтер тобуна кайрылып, ага белгилүү касиеттерди колдонуу үчүн жасалат (мисалы, тексттин түсүн өзгөртүү, шрифттин өлчөмүн жана башкалар).

Ошондой эле HTML баракчасындагы элементтерди тандоого мүмкүндүк берген атрибут id да бар, ал class атрибутуна окшош.

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