5.1 line-height Xüsusiyyəti
Mətn parametrləri, məsələn line-height, letter-spacing və word-spacing, veb səhifələrdə mətnlərin tərtibatında mühüm rol oynayır. Bu xüsusiyyətlər sətirlər arası məsafəni (interlinyaj), hərf arası məsafəni və sözlər arası məsafəni idarə etmək imkanı verir. Gəlin bu xüsusiyyətlərin hər birinə ətraflı baxaq.
line-height xüsusiyyəti mətnin sətir hündürlüyünü təyin edir. Bu, qonşu mətn sətirlərinin əsas xətləri arasındakı məsafəni müəyyən edir ki, bu da mətnin sıxlığına və oxunaqlığına təsir edir.
Dəyərlər:
- Rəqəmsal dəyər: vahidsiz nisbi dəyərdir (məsələn, 1.5), mövcud şrift ölçüsünə vurulur
- Faizli dəyər: mövcud şrift ölçüsünün faizində nisbi dəyər (məsələn, 150%)
- Absolut dəyər: fiksə olunmuş vahidlərdəki dəyər (məsələn, piksellərdə) (məsələn, 24px)
- Açar söz
normal: varsayılan dəyər, adətən 1.2-ə bərabərdir
İstifadə nümunəsi:
.normal {
line-height: normal;
}
.one-point-five {
line-height: 1.5;
}
.double {
line-height: 2;
}
<body>
<p class="normal">Bu, normal sətir hündürlüyünə malik mətndir. Bu, normal sətir hündürlüyünə malik mətndir.</p>
<p class="one-point-five">Bu, 1.5 sətir hündürlüyünə malik mətndir. Bu, 1.5 sətir hündürlüyünə malik mətndir.</p>
<p class="double">Bu, ikiqat sətir hündürlüyünə malik mətndir. Bu, ikiqat sətir hündürlüyünə malik mətndir.</p>
</body>
5.2 letter-spacing Xüsusiyyəti
letter-spacing xüsusiyyəti hərflər arasındakı məsafəni təyin edir, yəni simvollar arasındakı əlavə boşluq. Bu xüsusiyyət oxunaqlılığı artırmaq və ya vizual effektlər yaratmaq üçün istifadə edilə bilər.
Dəyərlər:
- Absolut dəyər: sabit vahidlərdə ifadə edilən dəyər (məsələn, piksel — 2px)
- Mənfi dəyər: simvollar arasındakı məsafəni azaldır (məsələn, -1px)
- Açar söz
normal: standart dəyər, 0-a bərabərdir (əlavə boşluq yoxdur)
İstifadə nümunəsi:
.normal {
letter-spacing: normal;
}
.wide {
letter-spacing: 2px;
}
.narrow {
letter-spacing: -1px;
}
<body>
<p class="normal">Bu, normal hərf məsafəsi olan mətn.</p>
<p class="wide">Bu, artırılmış hərf məsafəsi olan mətn.</p>
<p class="narrow">Bu, azaldılmış hərf məsafəsi olan mətn.</p>
</body>
5.3 word-spacing xüsusiyyəti
word-spacing xüsusiyyəti mətndəki sözlər arasında məsafəni təyin edir. Bu, sözlər arasında boşluq əlavə edir və ya azaldır, bu da oxunaqlılığın yaxşılaşdırılması və ya vizual effektlər yaradılması üçün istifadə edilə bilər.
Dəyərlər:
- Absolyut dəyər: sabit vahidlərdə ölçülən dəyər (məsələn, piksel) (məsələn, 4px)
- Mənfi dəyər: sözlər arasındakı məsafəni azaldır (məsələn, -2px)
- Açar söz
normal: standart inter-söz məsafəsinə bərabər olan standart dəyər (adətən 0)
İstifadə nümunəsi:
.normal {
word-spacing: normal;
}
.wide {
word-spacing: 4px;
}
.narrow {
word-spacing: -2px;
}
<body>
<p class="normal">Bu, standart inter-söz məsafəsi olan mətndir.</p>
<p class="wide">Bu, artırılmış inter-söz məsafəsi olan mətndir.</p>
<p class="narrow">Bu, azaldılmış inter-söz məsafəsi olan mətndir.</p>
</body>
GO TO FULL VERSION