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 ատրիբուտը,
որը տալիս է յուրահատուկ նույնականացուցիչներ տարրերին