CSS matn

Font

Font inglizcha so'z. Harflarning va boshqa matn belgilarining yozilish uslubini anglatadi. Ruschasiga shrift, garnitura ham deysa bo'ladi.

Font o'lchami

<div style="font-size: 50px">Insof</div>
Insof
<div style="font-size: 30px">Insof</div>
Insof

font-size harflarning o'lchamini belgilaydi. 50px ellik piksel degani. Piksel bu ekrandagi nuqta. font-size ning odayit qiymati 16px. Bu degani font-size ni belgilamasangiz, uning qiymati 16px ga teng bo'ladi.

em

<div style="font-size: 2em">Insof</div>
Insof

1em ota unsurning font o'lchamiga teng. Ota unsurining font o'lchami 18 piksel bo'lsa, demak 1em 18 pikselga, 1.5em 27 pikselga teng.

Font oilasi

<div style="font-family: Arial">Insof</div>
Insof
<div style="font-family: Tahoma">Insof</div>
Insof

font-family bu harflarning yozilish uslubi.

Fontlar ro'yxati (to'liq emas)

  • Arial
  • Times New Roman
  • Times
  • Courier New
  • Garamond
  • Verdana
  • Georgia
  • Tahoma

Font yo'g'onligi

<div style="font-family: Arial; font-weight: 900">Insof</div>
Insof
<div style="font-family: Arial; font-weight: 600">Insof</div>
Insof

font-weight harflar yo'g'onligini belgilaydi. Qiymati 1 da 1000 gacha.

Qator balandligi

<div style="line-height: 2">
    Besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti
    yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz
    oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt
    besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti
    yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn
    bir ikki uch toʻrt besh olti yetti sakkiz.
</div>
Besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz.
<div style="line-height: 0.8">
    Besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti
    yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz
    oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt
    besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti
    yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn
    bir ikki uch toʻrt besh olti yetti sakkiz.
</div>
Besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz.

line-height qatorlarning balandligini belgilaydi. 2 bu degani font-size dan ikki marta kattaroq. Piksellarda ham belgilasa bo'ladi, misol uchun font-size: 24px.

Font qiyshig'ligi

<div style="font-style: italic">Insof</div>
Insof

Yozuvni qiyshiq qilishni xohlasangiz, unda font-style: italic dan foydalaning.

Matn bezagi

<span style="text-decoration: line-through">3000 so'm</span>
<br><br>
<a href="https://subh.org" style="text-decoration: none">saytim</a>
<br><br>
<span style="text-decoration: underline">oqil</span>
<br><br>
<span style="text-decoration: overline">mehribon</span>
<br><br>
<span style="text-decoration: green wavy underline">rahmdil</span>
<br><br>
<span style="text-decoration: red dashed overline">kuchli</span>
<br><br>
<span style="text-decoration: violet solid overline">sog'</span>
3000 so'm

saytim

oqil

mehribon

rahmdil

kuchli

sog'

text-decoration matn bezagini belgilaydi. line-througn, underline, overline chiziq joylashuvini belgilaydi. wavy, dashed, solid chiziq uslubini belgilaydi. Qoshimcha rangni qo'shsa bo'ladi - red, green, #43a412. Bezak kerak bo'lmasa none deb yoziladi.

Matnni tekislash

<div style="text-align: center">
    Besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti
    yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz
    oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt
    besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti
    yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn
    bir ikki uch toʻrt besh olti yetti sakkiz.
</div>
Besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz.

text-align: center mattni va qatordagi unsurlarni markazlashtiradi. Etibor bering, text-align xususiyati faqatgina unsurning bolalariga ta'sir qiladi, unsurning o'ziga emas.

<div style="text-align: right">
    Besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti
    yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz
    oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt
    besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti
    yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn
    bir ikki uch toʻrt besh olti yetti sakkiz.
</div>
Besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz.

text-align: right mattni va qatordagi unsurlarni o'nga tekislaydi.

<div style="text-align: left">
    Besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti
    yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz
    oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt
    besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti
    yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn
    bir ikki uch toʻrt besh olti yetti sakkiz.
</div>
Besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz.

text-align: right mattni va qatordagi unsurlarni chapga tekislaydi. Bu odatiy qiymatdir.

<div style="text-align: justify">
    Besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti
    yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz
    oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt
    besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti
    yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn
    bir ikki uch toʻrt besh olti yetti sakkiz.
</div>
Besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz.

text-align: right mattni va qatordagi unsurlarni ham o'nga ham chapga tekislaydi.

<div style="text-align: center">
    Salomatlik
    <br>
    <strong>Salomatlik</strong>
    <em>Sog'lik</em>
    <br>
    <a href="https://sinf.subh.org">Darslar</a>
    <a href="https://sinf.subh.org">O'quv markazida</a>
</div>
Salomatlik
Salomatlik Sog'lik
Darslar O'quv markazida

text-align dan foydalanib qator unsurlarning markazlashtirish usuli.