9.1 text-indent xüsusiyyəti
CSS-də abzasların xüsusiyyətləri mətn formatlaşdırılmasının idarə edilməsində mühüm rol oynayır, eyni zamanda oxuma rahatlığı və estetik cəhətdən cazibədarlıq yaradır. Onların arasında text-indent və text-align-last abzasın sonuncu cərgəsinin hizalanması və indentasiya üçün vacib vasitələrdir.
text-indent xüsusiyyəti blok elementi daxilində mətinin ilk sətirinin indentasiyasını idarə edir. Tez-tez abzasların əvvəlində indentasiya yaratmaq üçün istifadə olunur, bu, mətnin oxunaqlığını və strukturunu yaxşılaşdırır.
Dəyərlər:
- Absolyut dəyərlər: sabit vahidlərdəki dəyərlər, məsələn piksel (
px), nöqtə (pt), santimetr (cm) və s. Məsələn:text-indent: 20px; - Faizli dəyərlər: tutan blokun enindən faizə əsaslanan dəyərlər. Məsələn:
text-indent: 5%; - Mənfi dəyərlər: indentasiyalar mənfi ola bilər, bu isə mətinin konteyner sərhədlərindən sola hizalanmasına səbəb olacaq. Məsələn:
text-indent: -20px;
İstifadə nümunəsi:
.indent-20px {
text-indent: 20px;
}
.indent-5percent {
text-indent: 5%;
}
.indent-negative {
text-indent: -20px;
}
<body>
<p class="indent-20px">Bu, ilk sətiri 20 piksel indentasiyalı bir abzasdır.</p>
<p class="indent-5percent">Bu, ilk sətiri blok genişliyinin 5 faizi qədər indentasiyalı bir abzasdır.</p>
<p class="indent-negative">Bu, ilk sətiri 20 piksel mənfi indentasiyalı bir abzasdır.</p>
</body>
9.2 text-align-last xassəsi
text-align-last xassəsi blok elementinin içindəki mətnin son sətrinin hizasını idarə edir. Bu, xüsusilə mətn genişliyə görə hizalandıqda (justify), abzaslarda ardıcıl hizalanma əldə etmək üçün faydalıdır.
Dəyərlər:
auto: son sətir adi mətn kimi hizalanır (standart dəyər)left: son sətir sol tərəfə hiza olunurright: son sətir sağ tərəfə hiza olunurcenter: son sətir mərkəzə hiza olunurjustify: son sətir abzasın digər sətirləri kimi genişliyə görə hizalanır
İstifadə nümunəsi:
.justify-left {
text-align: justify;
text-align-last: left;
}
.justify-right {
text-align: justify;
text-align-last: right;
}
.justify-center {
text-align: justify;
text-align-last: center;
}
.justify-justify {
text-align: justify;
text-align-last: justify;
}
<body>
<p class="justify-left">Bu, mətni genişliyə görə və son sətrini sola hizalanmış abzasdır.</p>
<p class="justify-right">Bu, mətni genişliyə görə və son sətrini sağa hizalanmış abzasdır.</p>
<p class="justify-center">Bu, mətni genişliyə görə və son sətrini mərkəzə hizalanmış abzasdır.</p>
<p class="justify-justify">Bu, həm mətnin, həm də son sətrinin genişliyə görə hizalandığı abzasdır.</p>
</body>
9.3 Xassələrin birgə istifadəsi
text-indent və text-align-last xassələri birlikdə istifadə edilə bilər, bu da paraqrafların daha mürəkkəb formatlaşdırılmasını yaradır, oxunaqlılığı və mətnin vizual strukturunu yaxşılaşdırır.
HTML və CSS nümunəsi:
.styled-paragraph {
text-indent: 30px;
text-align: justify;
text-align-last: right;
width: 300px;
border: 1px solid #000;
padding: 10px;
}
<body>
<p class="styled-paragraph">
Bu paraqrafın ilk sətri 30 piksel məsafədədir, mətn eninə görə düzləşdirilib, sonuncu sətir isə sağ tərəfə düzləşdirilib.
Bu, text-indent və text-align-last xassələrinin birlikdə istifadə olunması ilə istənilən formatlaşdırma effektinin əldə edilməsini göstərir.
</p>
</body>
Kodun izahı:
text-indent: 30px;: mətnin ilk sətrinin 30 piksel məsafəyə yerdəyişməsini təyin edirtext-align: justify;: mətni konteynerin eninə görə düzləşdirirtext-align-last: right;: mətnin sonuncu sətrini sağ tərəfə düzləşdirirwidth: 300px;: mətn üçün konteynerin enini təyin edirborder: 1px solid #000;: mətn konteynerinin ətrafına çərçivə əlavə edirpadding: 10px;: konteynerin daxilində daxili boşluqları təyin edir
GO TO FULL VERSION