11.1 Kaskadlilik (Cascading)
CSS-in əsas prinsiplərinə kaskadlilik, irsi ötürmə və dəqiqlik daxildir. Bu prinsipləri anlamaq veb səhifələrin tərzini və görünüşünü daha yaxşı idarə etməkdə kömək edir.
Kaskadlilik (Cascading)
Kaskadlilik — CSS-in əsas prinsipidir, hansı ki, bir neçə qayda konflikt etdiyi zaman stillərin necə tətbiq olunacağını təyin edir. Kaskadlilikdə brauzer konfliktləri həll etmək üçün aşağıdakı qaydalardan istifadə edir:
- Mənbələrin ardıcıllığı: stillər fərqli yerlərdə təyin oluna bilər — xarici stil cədvəlləri (CSS faylları), daxili stil cədvəlləri (
<style>teqinin içində) və daxil edilmiş stillər (HTML elementininstyleatributunda). Qaydalar onların meydana çıxdığı ardıcıllıqla tətbiq olunur. - Dəqiqlik: hər bir selektorun öz dəqiqlik səviyyəsi var. Selektorun dəqiqliyi nə qədər yüksəkdirsə, onun prioriteti də o qədər yüksəkdir.
- Vacibliyi (Importance):
!importantdirektivi olan qaydalar ən yüksək üstünlüklərə malikdir və digər konfliktli qaydalar olsa belə tətbiq olunur.
Kaskadliliyin nümunəsi:
Bu nümunədə fon rəngi sarı olacaq, çünki daxil edilmiş stil daxili stil üzərində prioritetə malikdir. Mətnin rəngi qırmızı olacaq, çünki daxil edilmiş stil daxili stildən üstün gəlir.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Kaskadliliyi Nümunəsi</title>
<style>
body {
background-color: lightblue; /* Daxili stil */
}
p {
color: green;
}
</style>
</head>
<body style="background-color: yellow;"> <!-- Daxil edilmiş stil -->
<p style="color: red;">CSS Kaskadliliyi Nümunəsi</p>
</body>
</html>
11.2 İrsi xüsusiyyətlər (Inheritance)
İrsi xüsusiyyətlər - bu, uşaq elementlərin öz valideyn elementlərinin stillərini qəbul etməsi prosesidir. Bütün CSS xüsusiyyətləri irsi deyil. İrsi xüsusiyyətlərə mətnin rəngi, şrift ailəsi, sətir aralığı və bəzi digər xüsusiyyətlər daxildir.
İrsi xüsusiyyətlərə misal:
Bu nümunədə <p> elementi <body> elementindən şrift və rəngi qəbul edir, şrift ölçüsünü isə .container sinfindən qəbul edir.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS üzrə irsi xüsusiyyətlərə misal</title>
<style>
body {
font-family: Arial, sans-serif;
color: blue;
}
.container {
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<p>Bu mətn şrift və rəngi body-dən, şrift ölçüsünü isə ".container"-dən irsi alır.</p>
</div>
</body>
</html>
11.3 Xüsusilik (Specificity)
Xüsusilik, hansı CSS qaydasının bir elementə tətbiq olunacağını müəyyən edir, əgər bir neçə qayda həmin elementə uyğun gəlirsə. Xüsusilik, qaydada olan seçicilərin miqdarı və növünə əsasən hesablanır.
Xüsusilik hesabının qaydaları:
- Daxili stillər (inline styles) ən yüksək xüsusiliyə malikdir
- İdentifikatorlar (selectors by ID) siniflər, psevdosiniflər və atributlardan daha yüksək xüsusiliyə malikdir
- Siniflər, psevdosiniflər və atributlar elementlər və psevdoelementlərdən daha yüksək xüsusiliyə malikdir
- Elementlər və psevdoelementlər ən aşağı xüsusiliyə malikdir
Xüsusilik hesablanmasının nümunəsi:
Bu nümunədə mətn qırmızı olacaq, çünki #unique seçicisi ən yüksək xüsusiliyə malikdir.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Xüsusilik Nümunəsi</title>
<style>
p {
color: blue; /* Xüsusilik 0-0-0-1 */
}
.highlight {
color: green; /* Xüsusilik 0-0-1-0 */
}
#unique {
color: red; /* Xüsusilik 0-1-0-0 */
}
</style>
</head>
<body>
<p class="highlight" id="unique">Bu mətn qırmızı olacaq.</p>
</body>
</html>
11.4 Əhəmiyyət (Importance)
CSS tərtibatçılara !important direktivindən istifadə edərək stil qaydalarının prioritetliliyini açıq şəkildə göstərməyə imkan verir. Bu direktivlə olan qaydalar digər qaydaların spesifikliyindən asılı olmayaraq tətbiq ediləcək.
!important istifadə nümunəsi:
Bu nümunədə mətn mavi olacaq, çünki !important qaydasına üstünlük verilir.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS-də !important nümunəsi</title>
<style>
p {
color: blue !important;
}
.highlight {
color: green;
}
</style>
</head>
<body>
<p class="highlight">Bu mətn "!important"-a görə mavi olacaq.</p>
</body>
</html>
11.5 CSS prinsiplərinin istifadəsinə nümunələr
CSS prinsiplərinin real məsələlərdə istifadəsinə nümunələr.
Kaskadlama və spesifiklik nümunəsi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS kaskadlama və spesifiklik nümunəsi</title>
<style>
body {
background-color: lightgray;
}
p {
color: blue;
}
.important {
color: red;
}
</style>
</head>
<body>
<p class="important">Bu mətn qırmızı olacaq, çünki .important "p"-dən daha yüksək spesifikliyə sahibdir.</p>
</body>
</html>
İrsi ötürmə və spesifiklik nümunəsi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS irsi ötürmə və spesifiklik nümunəsi</title>
<style>
body {
font-family: Arial, sans-serif;
color: blue;
}
.container {
color: green; /* Bütün alt elementlər üçün body-dən gələn rəngi yenidən yazar */
}
.highlight {
color: red; /* .container-dan daha yüksək spesifikliyə sahibdir */
}
</style>
</head>
<body>
<div class="container">
<p class="highlight">Bu mətn qırmızı olacaq, çünki ".highlight" sinfi spesifikliyə görə üstündür.</p>
</div>
</body>
</html>
GO TO FULL VERSION