Matnni 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:

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:

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:

div {
    text-align: justify;
}

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

Namuna:

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:

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:

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:

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:

div {
    direction: rtl;
}