CSS-ում em միավորների ներածություն

em միավորները թույլ են տալիս սահմանել տառատեսակի չափը ծնողի չափի տոկոսով: Եկեք նայենք օրինակով:

Ենթադրենք, մենք ունենք ներդիր պիտակներ.

html<div>
  <p>
    տեքստ
  </p>
</div>

Եկեք սահմանենք մեր div-ի տառատեսակի չափը.

cssdiv {
  font-size: 20px;
}

Իսկ պարագրաֆին սահմանենք 2em չափ: Այս արժեքը համապատասխանում է ծնողի տառատեսակի չափից երկու անգամ մեծ տառատեսակի.

cssp {
  font-size: 2em; /* համապատասխանում է 40px */
}

Այժմ պարագրաֆին սահմանենք 0.5em չափ: Այս արժեքը համապատասխանում է ծնողի տառատեսակի չափի կեսին.

cssp {
  font-size: 0.5em; /* համապատասխանում է 10px */
}

1em արժեքը կդարձնի պարագրաֆի տառատեսակը նույնը, ինչ ծնող div-ինը.

cssp {
  font-size: 1em; /* համապատասխանում է 20px */
}

Գործնական առաջադրանքներ

Ենթադրենք, մենք ունենք HTML կոդ, որի համար մենք կլուծենք առաջադրանքներ.

html<ul>
  <li>տեքստ</li>
  <li>տեքստ</li>
  <li>տեքստ</li>
</ul>
Задание 1

Որոշեք, թե ինչ չափի տառատեսակ px-ով կունենան li պիտակները հետևյալ կոդի կատարման արդյունքում.

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

Որոշեք, թե ինչ չափի տառատեսակ px-ով կունենան li պիտակները հետևյալ կոդի կատարման արդյունքում.

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

Որոշեք, թե ինչ չափի տառատեսակ px-ով կունենան li պիտակները հետևյալ կոդի կատարման արդյունքում.

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