8.1 Pseudo-elementlərin növləri
CSS-də pseudo-elementlər elementlərin bəzi hissələrini, məsələn, ilk hərfi, ilk sətri stilizasiya etmək və ya elementdən əvvəl və ya sonra məzmun əlavə etmək üçün istifadə olunur. Onlar HTML strukturunu dəyişdirmədən əlavə stilizasiya imkanları təqdim edir. Pseudo-elementlər iki nöqtə (::) ilə təyin olunur.
Əsas pseudo-elementlər:
::before::after::first-letter::first-line
8.2 Psevdoelement ::before
Psevdoelement ::before elementin məzmunundan əvvəl mətn əlavə edir. O, çox vaxt dekorativ elementlər, ikonlar və ya əlavə mətnlər əlavə etmək üçün istifadə olunur.
Syntax:
selektor::before {
content: "" | "mətn" | url() | counter | attr();
xüsusiyyət: dəyər;
}
content sahəsində əlavə ediləcək html-kod göstərilir.
/* Hər bir siyahı elementindən əvvəl ox əlavə edir */
li::before {
content: "→ ";
color: red;
}
<ul>
<li>Siyahının birinci elementi</li>
<li>Siyahının ikinci elementi</li>
<li>Siyahının üçüncü elementi</li>
</ul>
8.3 Psevdoelement ::after
Psevdoelement ::after elementin məzmunundan sonra məzmun əlavə edir. Bu, tez-tez dekorativ elementlər, ikonlar və ya əlavə mətn əlavə etmək üçün istifadə olunur.
Sintaksis:
selektor::after {
content: "" | "mətn" | url() | counter | attr();
xassə: dəyər;
}
content sahəsində əlavə etmək istədiyiniz html-kod daxil edilir.
/* Hər siyahı elementindən sonra bir nöqtə əlavə edir */
li::after {
content: " •";
color: blue;
}
<ul>
<li>Siyahının ilk elementi</li>
<li>Siyahının ikinci elementi</li>
<li>Siyahının üçüncü elementi</li>
</ul>
8.4 Pseudoelement ::first-letter
Pseudoelement ::first-letter elementin ilk hərfinə tətbiq olunur. Bu, tez-tez abzaslarda dekorativ başlanğıc hərflər yaratmaq üçün istifadə edilir.
Sintaksis:
selektor::first-letter {
content: "" | "mətn" | url() | counter | attr();
xassə: dəyər;
}
Nümunə:
/* Hər abzasın ilk hərfini böyüdür və rəngini dəyişir */
p::first-letter {
font-size: 2em;
color: green;
}
<p>Bu, mətnin abzasdakı nümunəsidir.</p>
<p>Abzasdakı başqa bir mətn nümunəsi.</p>
8.5 Psevdoelement ::first-line
Psevdoelement ::first-line elementin ilk sətrinə tətbiq olunur. Bu, tez-tez paraqrafın ilk sətrini tərtib etmək üçün istifadə olunur.
Sintaksis:
selektor::first-line {
content: "" | "mətn" | url() | counter | attr();
xassə: dəyər;
}
Nümunə:
/* Paraqrafın hər ilk sətrinin rəngini dəyişir və onu qalın edir */
p::first-line {
color: navy;
font-weight: bold;
}
<p>
Bu, paraqraf mətninin nümunəsidir, kifayət qədər mətn ehtiva edir ki, bir neçə sətrə bölünsün və ::first-line psevdoelementinin necə işlədiyini nümayiş etdirsin. Hər bir paraqrafın ilk sətri qalın şriftlə və navy rəngi ilə vurğulanacaq ki, oxucunun diqqətini cəlb etsin. Bu effekt, yuxarıda təyin etdiyimiz CSS qaydası ilə əldə edilir.
</p>
<p>
Nəzərə alın ki, tərtibat yalnız ilk sətrə tətbiq olunur, onun uzunluğundan asılı olmayaraq. Paraqrafdakı qalan mətn öz ilkin tərtibatını saxlayır. Bu, əsas məqamları vurğulamaq və ya mətndə vizual ritm yaratmaq üçün faydalı ola bilər.
</p>
GO TO FULL VERSION