CSS Font (şrift) xüsusiyyətləri

Şrift xüsusiyyətləri səhifələrimizdəki mətnlərin şrift ailəsini, qalınlıq nizamlamalarını, ölçüsünü, böyük-kiçik hərf olmasını və stilini dəyişdirməyimizi təmin edir.

color
font-family
font-size
font-weight
font-style
font-variant
font

color
Quruluşu: color: <dəyər>
Aldığı dəyərlər: <rəng> | inherit
Başlanğıc dəyəri: Veb brauzer təyin edir
Tətbiq oluna bilən elementlər: Bütün elementlər
İrsilik: Var
color mətnlərin rəngini təyin etmək üçün istifadə edilir.
p {
color:#f00; /* qırmızı rəng kodu */
}
 
font-family
Quruluşu: font-family: <şrift ailə adı > | <ümumi ailə adı >
Aldığı dəyərlər: <şrift ailə adı > | <ümumi ailə adı >
Başlanğıc dəyəri: Veb brauzer təyin edir
Tətbiq oluna bilən elementlər: Bütün elementlər
İrsilik: Var
 
Ümumi yazı tipi ailə adları
serif (məs: Times)
sans-serif (məs: Arial or Helvetica)
cursive (məs: Zapf-Chancery)
fantasy (məs: Western)
monospace (məs: Courier)

font-family mətnlərin istifadə ediləcəyi şrift ailəsini təyin etmək üçün istifadə edilir. Birdən çox şrift ailəsi istifadə ediləcəksə aralarında vergül (,) qoyulur. Nümunə:
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
Əgər şrift adı bir sözdən çoxdursa cüt dırnaq işarəsi içində yazılır. Məsələn:
h1 {
font-family: Georgia, "Times New Roman", serif;
}
 
font-size
Quruluşu: font-size: <mütləq dəyərlər> | <nisbi dəyərlər> | <uzunluq> | <faiz>
Aldığı dəyərlər: <mütləq dəyərlər> | <nisbi dəyərlər>
Başlanğıc dəyəri: medium
Tətbiq oluna bilən elementlər: Bütün elementlər
İrsilik: Var
 
kəsrli dəyərlər
xx-small
x-small
small
medium
large
x-large
xx-large

CSS, şrifti ölçülərə görə daha elastik təyin etməyə imkan verdi. Məsələn 11px dəyəri HTML-da 2 və 3 dəyəri arasındakı bir dəyərə bərabərdir və HTML font elementi ilə birlikdə işlədilə bilmirdi. CSS-də şrift ölçüsünü təyin etmək üçün bir çox vahid istifadə edilir. Məs: px, em, pt, in, sm və s.
td {
font-size :12px;
}

td {
font-size : 150%;
}

td {
font-size : xx-small;
}

td {
font-size : x-large;
}
 
font-weight
Quruluşu: font-weight: <dəyər>
Aldığı dəyərlər: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Başlanğıc dəyəri: normal
Tətbiq oluna bilən elementlər: Bütün elementlər
İrsilik: Var
Şriftin qalınlıq, incəlik vəziyyətini təyin edir. 100 (incə) - 900 (qalın) arasında bir dəyər ala bildiyi kimi bold, bolder və normal dəyərlərini də ala bilər.
p {
font-weight: bolder;
}
 
font-style
Quruluşu: font-style: <dəyər>
Aldığı dəyərlər: normal | italic | oblique | inherit
Başlanğıc dəyəri: normal
Tətbiq oluna bilən elementlər: Bütün elementlər
İrsilik: Var
Şriftin əyik (italic) olub, olmamasını təyin edir.
p {
font-style: italic;
}

h4{
font-style: oblique;
}
 
font-variant
Quruluşu: font-variant: <dəyər>
Aldığı dəyərlər: normal | small-caps | inherit
Başlanğıc dəyəri: normal
Tətbiq oluna bilən elementlər: Bütün elementlər
İrsilik: Var
Mətnin böyük və ya kiçik hərf ilə göstərilməsini təyin edir. İki dəyər alır: normal | small-caps. Amma dilimizdəki bəzi hərflərdə problem yaranması vəziyyəti də vardır.
span {
font-variant: small-caps;
} 

font
Yuxarıda izah edilən şrift xüsusiyyətləri və əlavə olaraq line-height dəyəri də daxil olmaqla hamısı birdən təyin oluna bilər. Yəni qısaltmadır.
Quruluşu: font: <dəyər>
Aldığı dəyərlər: [ <font-weight> || <font-style> || <font-variant> || <font-size> || <line-height> || <font-family> ]
Başlanğıc dəyəri: Yoxdur
Tətbiq oluna bilən elementlər: Bütün elementlər
İrsilik: Var
h2 {
font: bold italic 200%/1.2 Verdana, Helvetica, Arial, sans-serif;
}
CSS3