CSS-de em birliklerine giriş

em birlikleri ýazgynyň ölçegini ata-enanyň ölçeginiň göteriminde belläp bermege mümkinçilik berýär. Geliň mysalda göreliň.

Gowy, bizde iç-içe geçen şeýle tegler bar diýeliň:

html<div>
  <p>
    tekst
  </p>
</div>

Geliň, div-yzyza ýazgy ölçegini bereliň:

cssdiv {
  font-size: 20px;
}

Abzas-a bolsa ölçegi 2em bereliň. Bu görkezijiler ata-enanyň ýazgy ölçeginden iki esse uly ýazgy ölçegine gabat gelýär:

cssp {
  font-size: 2em; /* 40px gabat gelýär */
}

Indi abzasa ölçegi 0.5em bereliň. Bu görkeziji ata-enanyň ýazgy ölçeginiň ýarysyna gabat gelýär:

cssp {
  font-size: 0.5em; /* 10px gabat gelýär */
}

1em görkezijisi abzasyň ýazgy ölçegini ata-enanyň div-yndaky ýaly eder:

cssp {
  font-size: 1em; /* 20px gabat gelýär */
}

Amaly meseleler

Gowy, bizde meseleleri çözeris üçin HTML kody bar:

html<ul>
  <li>tekst</li>
  <li>tekst</li>
  <li>tekst</li>
</ul>
Задание 1

Aşakdaky kody ýerine ýetiren netijesinde li tegleriň px ýazgy ölçegi näçe bolar, kesgitleň:

cssul {
  font-size: 10px;
}
li {
  font-size: 2em;
}
Задание 2

Aşakdaky kody ýerine ýetiren netijesinde li tegleriň px ýazgy ölçegi näçe bolar, kesgitleň:

cssul {
  font-size: 20px;
}
li {
  font-size: 1.5em;
}
Задание 3

Aşakdaky kody ýerine ýetiren netijesinde li tegleriň px ýazgy ölçegi näçe bolar, kesgitleň:

cssul {
  font-size: 30px;
}
li {
  font-size: 0.5em;
}