CSS-de element klasslary

Öňki sapaklarda biz sahypa elementlerini teg atlary boýunça saýlap, meselem, ähli abzaslara birwagtda stil berýärdik. Sahypada, şonda-da, dürli stileri ulanmak zerur bolan dürli görnüşli abzaslar bolup biler. Bu meseläni çözmek üçin dürli abzaslary dürli CSS klasslara degişli etmek bolýar.

Tegi bir klassyna degişli etmek üçin, o tege class atributyny ýazmaly, we onuň içinde - özüňiziň oýlap tapyn klassyň adyny, harp, san, aşaky çyzyk we defis simwollaryndan duran.

Geliň mysal üçinde göreli. Iki görnüşli klassy - eee we zzz bilen abzaslar ýasaýarys:

html<p class="eee">
  eee klassly abzas
</p>
<p class="eee">
  eee klassly abzas
</p>
<p class="zzz">
  zzz klassly abzas
</p>
<p class="zzz">
  zzz klassly abzas
</p>

Indi geliň CSS-de dürli klasslaryň abzaslaryna ýüz tutup, olara käbir stiler beraýlyň. Meselem, zzz klassyň abzaslaryny gyzyl reňke, eee klassynyň abzaslaryny bolsa ýaşyl reňke boýaýalyň.

Bunuň üçin CSS faýlynda bizimiň klasslarymyza ýüz tutmaly. Ýüz tutmanyň gurluşy şeýle: ilki nokat simwoly, soňra biziň oýlap tapan adymyz. Ýagny, eee klassyna ýüz tutmak üçin .eee ýazmaly, zzz klassyna bolsa - .zzz ýazmaly.

Şeýlelikde, beýan edileni edeliň. HTML-imize girizilen klasslarymyz üçin CSS stillerini goşalyň:

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

Kody işletsek, netijede şu çykýar:

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

html<h2 class="eee">Serrnama</h2>
<p class="eee">
  abzas
</p>
<p class="eee">
  abzas
</p>
<p>
  klassy ýok abzas
</p>

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