Атрибут class

Атрибут class элемент (элемент деб тег назарда тутилади) учун бир ёки бир неча синфни белгилайди.

Бу, keyin CSS орқали бир хил синф белгиланган элементлар гуруҳига мурожаат қилиш ва унга муайян хусусиятларни (масалан, матн рангини ўзгартириш, шрифт ҳажмини ва ҳоказо) қўллаш учун амалга оширилади.

Шунингдек, атрибут id мавжуд бўлиб, у class атрибутига ўхшаш HTML саҳифасидаги элементларни танлаш имконини беради.

class атрибути билан атрибут id ўртасидаги фарк шундаки, class элементлар гуруҳини танлайди (агар у битта элементга берилган бўлса-да - keyin уни бошқа элементга ҳам бериш мумкин), id эса ягона элементни танлайди (вебсаҳифада шундай id га эга бошқа элемент бўлмаслиги керак, акс ҳолда конфликт юзага келади).

Элементга нима бериш кераклигини - синфми ёки idми? қандай аниклар мумкин? Синф вебсаҳифаларда такрорланувчи элементларга берилади (CSS кодни бир неча марта ёзмаслик учун). Ҳатто агар сизда ҳозирда мазкур элемент ягона бўлса-да, лекин сиз ўхшаш элементлар keyin пайдо бўлиши мумкин деб ҳис қилсангиз - ушбу элементга синф беринг. Агар сиз бундай элемент ягона эканига ишонch bo'lsangiz - унга 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,
у элементларга ягона идентификаторларни белгилайди