8.1 Əsas konsepsiyalar
CSS-də psevdo-sinif və psevdo-elementlərin kombinasiyası elementləri onların vəziyyətindən, strukturundan və məzmunundan asılı olaraq üslublandırmaq üçün güclü və çevik seçicilər yaratmağa imkan verir. Bu, mürəkkəb və dinamik üslublar yaratmaq, veb-səhifə interfeysini və istifadəçi təcrübəsini yaxşılaşdırmaq üçün bir çox imkanlar açır.
Kombinasiyanın əsasları
Psevdo-siniflər
Psevdo-siniflər bir nöqtə (:)-lə göstərilir və elementlərə onların vəziyyətindən və ya mövqeyindən asılı olaraq tətbiq edilir. Məsələn:
:hover— elementin üstünə kursor gətiriləndə tətbiq olunur:first-child— valideynin birinci övlad elementini seçir
Psevdo-elementlər
Psevdo-elementlər iki nöqtə (::)-lə göstərilir və elementlərin hissələrini üslublandırmaq və ya kontent əlavə etmək üçün istifadə edilir. Məsələn:
::before— elementi əvvəl kontent əlavə edir::first-letter— elementin ilk hərfini üslublandırır
Kombinasiya
Psevdo-sinifləri və psevdo-elementləri birləşdirərək seçicilərin vəziyyətindən və strukturundan asılı olaraq elementlərə üslublar tətbiq etməyə imkan verən mürəkkəb seçicilər yaratmaq mümkündür.
Sintaksis:
selektor:psevdo-sinif::psevdo-element {
xüsusiyyətlər: dəyərlər;
}
8.2 İnteraktivlik üçün kombinasiyalar
Nümunə 1: Hover zamanı ilk hərfin stilizasiyası
Bu nümunədə paragrafın ilk hərfi böyüyür və hover zamanı qırmızı rəngə boyanır:
/* Hover zamanı paragrafın ilk hərfinin stilizasiyası */
p:hover::first-letter {
font-size: 2em;
color: #e74c3c;
}
<p>Bu paragrafa hover et və ilk hərfdə olan dəyişiklikləri gör.</p>
Nümunə 2: Fokus zamanı linkin əvvəlinə kontent əlavə etmək
Bu nümunədə link fokusda olduqda onun əvvəlinə ikon əlavə olunur və mavi rəngə boyanır:
/* Fokus zamanı linkin əvvəlinə ikon əlavə etmək */
a:focus::before {
content: "🔗 ";
color: #3498db;
}
8.3 Strukturu stilizə etmək üçün kombinasiyalar
Nümunə 3: div daxilindəki birinci abzasın kontenti ilə birlikdə stilizə edilməsi
Bu nümunədə div daxilindəki birinci abzasın birinci cərgəsi qalın şriftlə vurğulanır və yaşıl rəngə boyanır:
/* div daxilindəki birinci abzasın birinci cərgəsinin stilizasiyası */
div p:first-child::first-line {
font-weight: bold;
color: #2ecc71;
}
Nümunə 4: Siyahının son elementindən sonra dekorativ element əlavə edilməsi
Bu nümunədə dekorativ element siyahının son elementindən sonra əlavə olunur və qırmızı rəngə boyanır:
/* Siyahının son elementindən sonra dekorativ element əlavə edilməsi */
ul li:last-child::after {
content: "❦";
display: inline-block;
margin-left: 10px;
color: #e74c3c;
}
8.4 Mürəkkəb Şərtlər üçün Kombinasiya
Nümunə 5: Siyahının cüt elementlərinin hover zamani stilizasiyası
Bu nümunədə siyahının cüt elementləri hover edildikdə açıq-boz fon ve mavi mətn rəngi alır:
/* Siyahının cüt elementlərinin hover zamani stilizasiyası */
ul li:nth-child(even):hover {
background-color: #f0f0f0;
color: #3498db;
}
Nümunə 6: Ziyarət edilmiş və aktiv linklərin stilizasiyası
Bu nümunədə ziyarət olunmuş və aktiv vəziyyətdə olan linklər narıncı rəngə boyanır və altı xətli olur:
/* Ziyarət edilmiş və aktiv linklərin stilizasiyası */
a:visited:active {
color: #e67e22;
text-decoration: underline;
}
8.5 Tam realizasiya nümunəsi
/* Div içərisində birinci abzasın birinci cümləsinin stilləşdirilməsi */
div p:first-child::first-line {
font-weight: bold;
color: #2ecc71;
}
/* Siyahının son elementindən sonra dekorativ elementin əlavə edilməsi */
ul li:last-child::after {
content: "❦";
display: inline-block;
margin-left: 10px;
color: #e74c3c;
}
/* Siyahının cüt elementlərinin hover zamanı stilləşdirilməsi */
ul li:nth-child(even):hover {
background-color: #f0f0f0;
color: #3498db;
}
/* Fokus zamanı linklərin qarşısına ikon əlavə edilməsi */
a:focus::before {
content: "🔗 ";
color: #3498db;
}
/* Abzasın birinci hərfinin hover zamanı stilləşdirilməsi */
p:hover::first-letter {
font-size: 2em;
color: #e74c3c;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Psevdo-siniflər və psevdo-elementlərin birləşdirilməsi nümunəsi</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<p>Bu div içərisindəki birinci abzasdır.</p>
<p>Bu div içərisindəki ikinci abzasdır.</p>
</div>
<ul>
<li>Siyahı elementi 1</li>
<li>Siyahı elementi 2</li>
<li>Siyahı elementi 3</li>
<li>Siyahı elementi 4</li>
</ul>
<a href="#">Fokus zamanı ikon ilə link</a>
<p>Birinci hərfə təsiri görmək üçün bu abzasın üzərinə gəlin.</p>
</body>
</html>
GO TO FULL VERSION