Տարրերի դասերը CSS-ում

Նախորդ դասերում մենք ընտրում էինք էջի տարրերը ըստ թեգի անվանման՝ ոճեր նշանակելով, օրինակ, միաժամանակ բոլոր պարբերություններին: Սակայն էջում կարող են լինել տարբեր տեսակի պարբերություններ, որոնց հարկավոր է կիրառել տարբեր ոճեր: Այս խնդիրը լուծելու համար կարելի է տարբեր պարբերություններ դասակարգել տարբեր CSS դասերի։

Որպեսզի թեգը դասակարգվի որևէ դասի, անհրաժեշտ է այդ թեգին գրել class ատրիբուտը, իսկ դրա մեջ՝ ձեր կողմից հորինված դասի անվանումը, որը բաղկացած է տառերից, թվերից, ընդգծման նշաններից և դեպիսից։

Դիտարկենք օրինակով: Ստեղծենք պարբերություններ երկու տեսակի դասերով - eee և zzz:

html<p class="eee">
  paragraph with class eee
</p>
<p class="eee">
  paragraph with class eee
</p>
<p class="zzz">
  paragraph with class zzz
</p>
<p class="zzz">
  paragraph with class zzz
</p>

Այժմ դիմենք CSS-ում տարբեր դասեր ունեցող պարբերություններին և նշանակենք նրանց որոշակի ոճեր: Օրինակ, zzz դասով պարբերությունները ներկենք կարմիր գույնով, իսկ eee դասով պարբերությունները՝ կանաչ գույնով։

Դրա համար CSS ֆայլում անհրաժեշտ է դիմել մեր դասերին: Դիմելը ունի հետևյալ շարահյուսությունը. սկզբում գրվում է կետ նշան, ապա մեր կողմից հորինված դասի անունը: Այսինքն՝ eee դասին դիմելու համար պետք է գրել .eee, իսկ zzz դասին դիմելու համար՝ գրել .zzz։

Այսպիսով, կատարենք նկարագրվածը: Մեր HTML-ին ավելացնենք նաև CSS ոճեր մեր ներմուծած դասերի համար.

css.eee {
  color: green;
}
.zzz {
  color: red;
}

Եթե գործարկենք մեր կոդը, ապա արդյունքում կստացվի հետևյալը.

html<ul>
  <li class="odd">text</li>
  <li class="eve">text</li>
  <li class="odd">text</li>
  <li class="eve">text</li>
  <li class="odd">text</li>
  <li class="eve">text</li>
</ul>

html<h2 class="eee">Title</h2>
<p class="eee">
  paragraph
</p>
<p class="eee">
  paragraph
</p>
<p>
  paragraph without class
</p>

<ul class="eee">
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>