CSS Matnlar

CSS Matnlar


Matn Formatlash

Bu matn bazi matn formatlash hususiyatlari yordamida stayl(dizayn) qilingan. Sarlavha(heading) da "text-align", "text-transform", va rang hususiyatlaridan foydanalilgan. Paragraf esa yo'naltirilgan , tizilgan va har bir belgi orasidagi masofa o'rnatilgan. Bu rangli O'zingni Sinab Ko'r tugmasidan ham pastki chiziq olib tashlangan


Matn Rangi

color hususiyati matnning rangini o'zgartirishga ishlatiladi

CSS da ranglar odatda quyidagicha belgilanadi

  • Ranglar nomi bilan - "red"
  • Ranglarning 16-sanoq sistemasidagi qiymatlari bo'yicha - "#ff0000"
  • RGB yani(Red, Green, Blue) qizil, yashil, ko'k ranglar bilan - "rgb(255,0,0)"

...   Sarlavhadagi matnlar uchun umumiy matn rangi codening body(tana) qismida yoziladi

Namuna:

O'zingni Sinab Ko'r
body {
    color: blue;
}

h1 {
    color: green;
}

...   Brauzerlar avtomatik ravishda paragrafdan oldin va keyin bo'sh qator qoldiradi


Matn joylashtirish

text-align hususiyati matnni garizontal joylashtirishda ishlatiladi

Matn qiymatga ko'ra chapda. o'ngda. markazda, va justified bo'lishi mumkin

Quyidagi namunada markazga o'rnatilgan, chapga va o'ngga o'rnatilgan matn lar uchun misollar ko'rishingiz mumkin.

Namuna:

O'zingni Sinab Ko'r
h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}

Qachonki text-align hususiyatiga "justify" qiymati berilganda hamma qatorlar qaytadan tiziladi yani har bir qator bir hil eniga nisbatan bir hil o'lchamga ega boladi va o'ng va chap hoshiya(margin) lari ham tekis boladi( gazeta va jurnallarda uchraydi)

Namuna:

O'zingni Sinab Ko'r
div {
    text-align: justify;
}

Matn Bezatish

text-decoration hususiyati matnga bezak o'rnatish yoki olib tashlashga ishlatiladi

Namuna:

O'zingni Sinab Ko'r
a {
    text-decoration: none;
}
h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

Matn katta kichikligini o'zgartirish

text-transform tegi matnni katta hariflarga yoki kichik hariflarga o'tkazishda ishlatiladi

Bu tegi barcha malumotlarni katta yoki kichik va so'zning birinchi harifini katta qilish uchun ishlatilishi mumkin

Namuna:

O'zingni Sinab Ko'r
p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

Matn ga Abzas qo'shish va Qator balandligi

text-indent tegi matn ning birinchi qatoriga abzas qo'shishda ishlatiladi

line-height tegi qatorlar orasidagi o'lchamni aniqlaydi

Namuna:

O'zingni Sinab Ko'r
p {
    text-indent: 50px;
}
p.small {
    line-height: 0.8;
}

p.big {
    line-height: 1.8;
}

Hariflar va So'zlar orasidagi Masofa

hariflar orasidagi masofani o'zgatririshga letter-spacing tegi, so'zlar orasida esa word-spacing tegi ishlatiladi

Namuna:

O'zingni Sinab Ko'r
h1 {
    letter-spacing: 3px;
}

h2 {
    letter-spacing: -3px;
}
h3 {
    word-spacing: 3px;
}

h4 {
    word-spacing: -3px;
}

Matn Yo'nalishi

direction tegi matnni yonalishini belgilashda ishlatiladi

Namuna:

O'zingni Sinab Ko'r
div {
    direction: rtl;
}

Barcha CSS matn hususiyatlari

Teg Tavsifi
color matn rangini o'zgartiradi
direction matn yo'nalishini aniqlaydi
letter-spacing hariflar orasidagi masofani belgilaydi
line-height Qator balandligi
text-align matn ning garizontal joylashuvi
text-indent matnning abzasi
text-shadow matn soyasi
text-transform matnni katta kichik ligini boshqaradi
vertical-align elementning vertikal masofasi
white-space element ichidagi bosh joyni belgilaydi
word-spacing so'zlar orasidagi masofani belgilaydi

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