Razredi elementov v CSS

V prejšnjih lekcijah smo izbirali elemente strani po imenu oznake, določajoč sloge, na primer, hkrati vsem odstavkom. Na strani pa so lahko različni tipi odstavkov, za katere je treba uporabiti različne sloge. Za rešitev te težave lahko različne odstavke uvrstimo v različne CSS razrede.

Da oznako uvrstimo v določen razred, je treba tej oznaki dodati atribut class, in vanj - po vaši izbiri ime razreda, sestavljeno iz črk, številk, podčrtajev in pomišljajev.

Poglejmo si primer. Naredimo odstavke z dvema vrstama razredov - eee in 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>

Zdaj pa dostopajmo v CSS do odstavkov z različnimi razredi in jim določimo kakšne sloge. Na primer, obarvajmo odstavke z razredom zzz v rdečo barvo, odstavke z razredom eee pa v zeleno.

Za to je treba v CSS datoteki dostopati do naših razredov. Dostop ima naslednjo sintakso: najprej gre simbol pika, nato pa po nas izbrano ime razreda. To pomeni, da za dostop do razreda eee je treba napisati .eee, za razred zzz pa napisati .zzz.

Torej, naredimo opisano. Dodajmo k našemu HTML še CSS sloge za vnesene razrede:

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

Če zaženemo našo kodo, bo rezultat naslednji:

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>