Atributi class

Atributi class cakton një ose disa klasa për një element (me element nënkuptohet tag-u).

Kjo bëhet që më pas të mund të drejtohemi përmes CSS te një grup elementësh, të cilëve u është caktuar e njëjta klasë, dhe të aplikojmë për të veti të caktuara (për shembull, të ndryshojmë ngjyrën e tekstit, përmasat e shkronjave e kështu me radhë).

Ekziston gjithashtu atributi id, i cili ngjashëm me atributin class lejon zgjedhjen e elementeve në faqen HTML.

Ndryshimi midis atributit class dhe atributit id është se class zgjedh një grup elementësh (edhe nëse është dhënë një elementi - më vonë mund t'i jepet edhe një tjetri), ndërsa id zgjedh një element unik (nuk duhet të ketë më shumë elemente me të njëjtin id në faqen e sajtit, përndryshe do të ketë konflikt).

Si të kuptojmë, çfarë t'i japim një elementi - klasë apo id? Klasa i jepet atyre elementeve, që përsëriten në faqet e sajtit (në mënyrë që të mos shkruhet disa herë i njëjti kod CSS). Edhe nëse aktualisht ky element është i vetëm, por ju e ndjeni që elementë të ngjashëm mund të shfaqen më vonë - atëherë jepini këtij elementi klasë. Nëse jeni të sigurt, se një element i tillë është unik - atëherë jepini atij id. Megjithatë, në kohët e fundit ka një tendencë që të gjithë elementëve t'u jepet klasë, kurse id të lihet për JavaScript, por ajo nuk është e pranuar përgjithësisht.

Një elementi mund t'i caktohen disa klasa, në këtë rast ato duhet të renditen ndarë me hapësirë.

Emërtimet e klasave duhet të përbëhen nga shkronja angleze, shifra, pa hapësira (hapësira ndan klasat nga njëra-tjetra, në vend të saj mund të përdoret nënvizimi ose vizatimi). Klasat nuk duhet të fillojnë me shifër (në HTML5 tashmë mundet, por nuk do të funksionojë në shfletuesit e vjetër).

Emrat e klasave duhet të jepen në gjuhën angleze (dhe jo në rusisht, thjesht me shkronja angleze!). Emrat duhet të jenë kuptimplotë, të pasqyrojnë thelbin e klasës.

Shembull

Le t'u caktojmë të gjithë paragrafëve me klasën test ngjyrë të kuqe teksti:

<p class="test">Paragraf me klasën test.</p>
<p>Paragraf kontrollor pa klasë.</p>

.test {
	color: red;
}

Shembull . Disa klasa për një element

Këtu le t'i caktojmë paragrafit të parë disa klasa - test1 dhe test2 (i shkruajmë atoda ndarë me hapësirë). Klasa test1 i cakton tekstit ngjyrë të kuqe, kurse klasa test2 i cakton përmasa të shkronjave në 20px. Paragrafit të dytë i është dhënë vetëm klasa test1 (ky paragraf do të bëhet i kuq), kurse paragrafit të tretë - klasa test2 (ky paragraf do të ketë përmasa shkronjash 20px). Paragrafi i parë, të cilit i janë dhënë dy klasa, do të ketë njëkohësisht edhe ngjyrë të kuqe edhe përmasa shkronjash në 20px:

<p class="test1 test2">Paragraf me dy klasa test1 dhe test2.</p>
<p class="test1">Paragraf me klasën test1.</p>
<p class="test2">Paragraf me klasën test2.</p>
<p>Paragraf kontrollor pa klasa.</p>

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

Shihni gjithashtu

atributi id,
i cakton identifikues unik elementeve