CSSда em бирликларига кириш
em бирликлари шрифт ўлчамини
ота-она элементнинг ўлчамидан фоизда белгилашга
имкон беради. Келинг, мисолда кўрамиз.
Бизда куйидаги ичма-ич теглар бор деб фараз қилайлик:
<div>
<p>
матн
</p>
</div>
Келинг, дивимизга шрифт ўлчамини белгилаб берайлик:
div {
font-size: 20px;
}
Абзацга эса ўлчамни 2em да белгилаймиз. Бу
қиймат ота-она элементнинг шрифт ўлчамидан икки марта
катта шрифтга мос келади:
p {
font-size: 2em; /* 40px га мос келади */
}
Энди абзацга ўлчамни 0.5em да белгилаймиз.
Бу қиймат ота-она элементнинг шрифт ўлчамининг ярмига
мос келади:
p {
font-size: 0.5em; /* 10px га мос келади */
}
1em қиймати абзац шрифтини
ота-она дивиники каби қилади:
p {
font-size: 1em; /* 20px га мос келади */
}
Амалий машқлар
Биз машқларни ечадиган бўлган HTML кодимиз бор деб фараз қилайлик:
<ul>
<li>матн</li>
<li>матн</li>
<li>матн</li>
</ul>
Куйидаги код натижасида li тегларининг
шрифт ўлчами px да қандай бўлишини аниқланг:
ul {
font-size: 10px;
}
li {
font-size: 2em;
}
Куйидаги код натижасида li тегларининг
шрифт ўлчами px да қандай бўлишини аниқланг:
ul {
font-size: 20px;
}
li {
font-size: 1.5em;
}
Куйидаги код натижасида li тегларининг
шрифт ўлчами px да қандай бўлишини аниқланг:
ul {
font-size: 30px;
}
li {
font-size: 0.5em;
}