10.1 Psevdo-siniflər
Psevdo-siniflər və psevdo-elementlər HTML və CSS-də elementləri onların vəziyyəti və ya məzmununa əsasən stilizə etməyə imkan yaradır, əlavə siniflər əlavə etmədən və ya HTML sənədinin quruluşunu dəyişdirmədən. Onlar interaktiv və estetik baxımdan cəlbedici veb-səhifələr yaratmaq üçün əla alətlər təmin edir.
Psevdo-siniflər elementlərə onların vəziyyətinə və ya sənəd strukturundakı mövqeyinə əsasən tətbiq olunur. Onlar müxtəlif vəziyyətlərdə, məsələn, mouse ilə üzərinə gəlmək, fokuslanmaq və ya elementləri seçmək kimi hallar üçün elementləri stilizə etməyə kömək edir. Psevdo-siniflər iki nöqtə işarəsi (:) ilə başlayır.
Ən sadə psevdo-siniflər:
:hover psevdo-sinifi, istifadəçi elementin üzərinə mouse ilə gəldiyi zaman tətbiq olunur.
<button type="button">Düymə</button>
button:hover {
color: red;
}
:focus psevdo-sinifi, element fokuslandıqda tətbiq olunur, məsələn, input sahəsinə klik edildiyi zaman.
<input type="text">
input:focus {
outline-color: blue;
}
:active psevdo-sinifi, element aktiv olduqda tətbiq olunur, məsələn, düyməyə və ya linkə klik edildiyi zaman.
<button type="button">Düymə</button>
button:active {
background-color: green;
}
:visited psevdo-sinifi, istifadəçinin artıq ziyarət etdiyi linklərə tətbiq olunur.
<a href="#">Keçid</a>
a:visited {
color: purple;
}
10.2 Psevdo-elementlər
Psevdo-elementlər HTML elementlərinin özlərinə aid olmayan hissələrini stil etmək üçün istifadə olunur. Onlar iki nöqtə üst-üstə (::) ilə başlayır. Psevdo-elementlər, kontenti elementin əvvəlində və ya sonunda yaratmaq və stil etmək, elementin yalnız ilk sətrini və ya ilk hərfini vurğulamaq və başqa tapşırıqlarda istifadə olunur.
Ən sadə psevdo-elementlər:
::before psevdo-elementi kontenti elementin təməl kontentindən əvvəl əlavə edir.
<p>Mənim adım Stepan.</p>
p::before {
content: "Salam! ";
color: blue;
}
::after psevdo-elementi kontenti elementin təməl kontentindən sonra əlavə edir.
<p>Diqqət!</p>
p::after {
content: " Diqqətiniz üçün təşəkkür edirəm!";
color: red;
}
::first-line psevdo-elementi yalnız elementin ilk sətrinə tətbiq edilir. Bu, mətnin yalnız ilk sətirini stil etməyə imkan verir.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
p::first-line {
font-weight: bold;
color: green;
}
::selection psevdo-elementi istifadəçi tərəfindən seçilmiş mətnə tətbiq olunur.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
::selection {
background-color: blue;
color: yellow;
}
Nəticədə mətn seçməyə çalışın.
10.3 Psevdoelementlərin istifadəsi nümunələri
HTML və CSS-dəki psevdosiniflər və psevdoelementlər, elementlərin vəziyyəti və ya məzmununa əsasən onları stilizə etmək üçün möhtəşəm imkanlar təqdim edir. Onlar HTML strukturu dəyişmədən daha interaktiv və vizual baxımdan cazibədar veb-səhifələr yaratmağa imkan verir.
Nümunə 1: Bağlantı mətninin qarşısına ikon əlavə etmək
<html>
<head>
<style>
a::before {
content: "🔗";
margin-right: 5px;
}
</style>
</head>
<body>
<a href="#">Bu ikonlu bir bağlantıdır</a>
</body>
</html>
Nümunə 2: Abzasdan sonra stilizə olunmuş blok əlavə etmək
<html>
<head>
<style>
p::after {
content: "🌟";
display: block;
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<p>Bu bir abzas mətnidir.</p>
</body>
</html>
Kombinasiya
Psevdosinifləri və psevdoelementləri birləşdirərək mürəkkəb və güclü stilər yarada bilərsiniz.
Nümunə: Bağlantı içində seçilmiş mətnin üzərinə gələndə stilizasiya etmə
<html>
<head>
<style>
a:hover::selection {
background-color: lightblue;
color: navy;
}
</style>
</head>
<body>
<a href="#">Bu mətni seçin və sonra onu hover edin.</a>
</body>
</html>
GO TO FULL VERSION