7.1 text-decoration xüsusiyyəti
CSS veb-səhifələrdə mətni tərtib etmək və bəzəmək üçün müxtəlif xüsusiyyətlər təqdim edir. text-decoration, text-transform və text-shadow xüsusiyyətləri mətnə vurğu əlavə etməyə, hərfləri dəyişməyə və kölgələr yaratmağa imkan verir ki, bu da mətni daha ifadəli və cəlbedici edir.
text-decoration xüsusiyyəti mətnin bəzək effektlərini idarə edir, məsələn, vurğu, üstündən xətt çəkmək və üzərindən xətt çəkmək. Bu xüsusiyyət həmçinin mətnin bəzədilməsi üçün istifadə olunan xəttlərin rəngini və üslubunu təyin etməyə imkan verir.
Qiymətlər:
none: bütün mətn bəzəklərini silirunderline: mətnin altını vurğulayıroverline: mətnin üstündə bir xətt əlavə edirline-through: mətnin ortasından xətt çəkir (üstündən xətt çəkmə)blink: mətn yanıb-sönür (bütün browserlər tərəfindən dəstəklənmir)text-decoration-color: bəzək xəttinin rəngini təyin edirtext-decoration-style: xəttin üslubunu təyin edir (solid, double, dotted, dashed, wavy)text-decoration-thickness: bəzək xəttinin qalınlığını təyin edir
İstifadə nümunəsi:
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
.custom-decoration {
text-decoration: underline wavy red;
}
<body>
<p class="underline">Bu mətn altı vurğulanmışdır.</p>
<p class="overline">Bu mətn üstündən xətt çəkilmişdir.</p>
<p class="line-through">Bu mətn üstündən xətt çəkilmişdir.</p>
<p class="custom-decoration">Bu mətn qırmızı dalğalı xəttlə vurğulanmışdır.</p>
</body>
7.2 text-transform xassəsi
text-transform xassəsi mətnin çevrilməsini idarə edir, hərflərin skriptini dəyişir. Bu, mətnin avtomatik olaraq başlıq, kiçik hərf və s. çevrilməsi üçün faydalıdır.
Əsas dəyərlər:
none: çevrilmələrsiz (defolt qiymət)capitalize: hər sözün ilk hərfi böyük oluruppercase: bütün hərflər böyük olurlowercase: bütün hərflər kiçik olurfull-width: mətni tam (ikiqat) ölçüyə çevirir (bütün brauzerlər tərəfindən dəstəklənmir)
İstifadə nümunəsi:
.capitalize {
text-transform: capitalize;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
<body>
<p class="capitalize">bu mətnin hər sözü böyük hərflə başlayacaq.</p>
<p class="uppercase">bu mətn tamamilə böyük hərflərlə olacaq.</p>
<p class="lowercase">BU MƏTN TAMAMİLƏ KİÇİK HƏRFLƏRLƏ OLACAQ.</p>
</body>
7.3 text-shadow xüsusiyyəti
text-shadow xüsusiyyəti mətndə kölgə əlavə edir, bu, həm vizual effekt yaradır, həm də veb-səhifədə mətnin oxunalığını yaxşılaşdırır.
Dəyərlər:
<offset-x>: kölgənin X oxu üzrə (üfüqi) yerdəyişməsi<offset-y>: kölgənin Y oxu üzrə (şaquli) yerdəyişməsi<blur-radius>: kölgənin bulanıqlıq radiusu (istəyə bağlı)<color>: kölgənin rəngi (istəyə bağlı)
İstifadə nümunəsi:
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.multiple-shadows {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);
}
<body>
<p class="text-shadow">Bu mətn kölgəlidir.</p>
<p class="multiple-shadows">Bu mətn birdən çox kölgəyə malikdir.</p>
</body>
Kodun izahı:
text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);: 2px üfüqi yerdəyişmə, 3px şaquli yerdəyişmə, 4px bulanıqlıq radiusu və yarımşəffaf qara rəng ilə kölgə əlavə edirtext-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);: fərqli parametrlərə malik iki kölgə əlavə edir və daha mürəkkəb vizual effekt yaradır
GO TO FULL VERSION