CSS Shrift

CSS Shrift


CSS Shrift turlari

CSS shrift turlari ikkiga bo'linadi

  • generic family - "Sherif" yoki "Monospace" shrift turlariga o'xshash Shriftlar.
  • font family - Maxsus Shriftlar, "Times New Roman" yoki "Arial" ga o'xshash.

Shriftlar

Matn shriftini o'zgartirish uchun font-family tegi ishlatiladi.

...   Agar CSS shriftlari nomi bir so'zdan ortiq bo'lsa, uni qo'shtirnoq ichida yozish shart

element uchun 1 dan ortiq shriftlar "vergul" bilan yoziladi

Namuna:

O'zingni Sinab Ko'r
p {
    font-family: "Times New Roman", Times, serif;
}

Font Style xususiyati

font-style xususiyati odatda matnni italic shriftga o'zgartirishda ishlatiladi

Bu tegning 3 ta qiyamti bor

  • normal - oddiy matndagi shrift.
  • italic - o'nga ozgina bukilgan shrift
  • oblique italic ga o'xshash lekin kam ishlatiladi

Namuna:

O'zingni Sinab Ko'r
p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

Shrift O'lchami

font-size tegi matn o'lchamini belgilashda ishlatiladi

font-size Mutlaq yoki Nisbiy bo'lishi mumkin

Mutlaq(Absolyut) o'lcham

  • matn o'lchamini aniq qiymati beriladi
  • Barcha brauzerlarda, foydalanuvchilarga matn o'lchamini o'zgartirishni taqidlaydi

Nisbiy o'lcham

  • Atrofidagi elementlarga nisbatan o'lcham belgilanadi
  • Barcha brazerlarda, foydalanuvchilarga matn o'lchamini o'zgartirishga ruhsat beradi

...   Agar siz matn o'lchamini kiritmasangiz, matn o'lchami default o'lchamida yani 16px da qoladi


Matn o'lchamini Piksel yordamida belgilash

piksel bilan matnga o'lcham berilganda siz, matn o'lchami ustidan to'liq boshqaruvga ega bo'lasiz

Namuna:

O'zingni Sinab Ko'r
h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

p {
    font-size: 14px;
}

Agar siz pixelda o'lchamni kiritsangiz, brazerda butun havolani yaqinlashtirishingiz(zoom) mumkin.


Matn o'lchamini EM yordamida belgilash

Foydalanuvchilarga matnni o'lchamini o'zgartirishga imkon beradi, ko'p dasturchilar pixelga nisbatan avzal ko'rishadi

1em bu 16px bo'lib default matn o'lchami. EM quyidagi formula bilan topish mumkin pixel/16 = em

Namuna:

O'zingni Sinab Ko'r
h1 {
    font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
    font-size: 1.875em; /* 30px/16=1.875em */
}

p {
    font-size: 0.875em; /* 14px/16=0.875em */
}

Foiz va EM juftligi yordamida belgilash

Code ning body qismiga foiz belgilash orqali siz em ni barcha brauzerlarda qo'llash imkoniga ega bo'lasiz

Namuna:

O'zingni Sinab Ko'r
body {
    font-size: 100%;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.875em;
}

p {
    font-size: 0.875em;
}

Matn shrifti qalinligi

Namuna:

O'zingni Sinab Ko'r
p.normal {
    font-weight: normal;
}

p.thick {
    font-weight: bold;
}

Matn Shrift Variant

font-variant tegi matn kichik hariflar bilan korinishi yoki korinmasligini taminlaydi

font-variant tegi small-caps qiymatini olganda matndagi barcha kichik hariflar katta hariflarga o'tadi lekin ko'rinishi jihatidan ular baribir katta hariflardan kichik bo'ladi

Namuna:

O'zingni Sinab Ko'r
p.normal {
    font-variant: normal;
}

p.small {
    font-variant: small-caps;
}

Barcha CSS font xususiyatlari

Teg Tavsifi
font barcha shriftlash hususiyatlarini bir qatorda belgilaydi
font-family matn shriftini turini belgilaydi
font-style matn staylini belgilaydi
font-size matn o'lchamini belgilaydi
font-variant kichik hariflarda belgilanishi yoki emasligi
font-weight matn qalinligi

Innovative Lab web sahifasiga xush kelibsiz biz bilan birga IT sohasidagi o'z bilimlaringizni bosqichma-bosqich oshirib boring!


Telegram kanalimizdan kunlik darslarni o'rganing  

TOSHKENT SHAHRIDAGI INHA UNIVERSITETI - 2017