• Baş səhifə
  • Kitabxana
  • Rəy, təklif və iradlar
  • Haqqımızda
  • Əlaqə
reklam reklam reklam reklam reklam
saytda reklam
reklam yeri

CSS kursu. Kaskadlılıq və Prioritetlilik

Kaskadlılıq və Prioritetlilik

Biz css kursu üzrə növbəti dərsimizə başlayırıq. Keçən dərsimizdə biz varisliyi öyrəndik. Bu dərs də isə biz onunla sıx əlaqədə olan və oxşar olan bir mövzunu araşdıracağıq. Bu kaskadlılıq və prioritetlik mövzusudur. Bildiyimiz kim CSS Cascading Style Sheets sözlərinin abriviaturasıdır. Kaskad nə deməkdir? Nəyə görə stil cədvəlləri kaskad adlandırılır? Tutaq ki bizim p elementiz var, və bu p elementinə biz stil cədvəllərində müəyyən xüsusiyyətlər vermişik – tutaq ki, biz ona 30 piksel otstup vermişik - text-indent:30px;. Lakin biz artıq bilirik ki, abzas yalnız buna yazılmış bir bu xüsusiyyətə görə yəni sırf konkret onun üçün yazılmış xüsusiyyətlərə görə belə əks olunmur. Biz artıq keçən dərsimizdə bildik ki, elementlər özlərinin sələflərindən də xüsusiyyətlər götürürlər. Və müvafiq olaraq bu element bütün bu xüsusiyyətlərin yəni həm özündə qeyd edilmiş həm də varislik yolu özündən yuxarı olan sələflər üçün qeyd edilmiş xüsusiyyətlərdən kaskad yığır və bu kaskada uyğun olarq əks olunur. Məsələn p elementinin sələfi olan body elementində qeyd edilmiş şrift ölçüsü və növü və eyni zamanda şriftin rəngi bu elementə varislik yolu ilə keşmişdir. Beləliklə, p elementinə yalnız sırf onun üçün qeyd edilmiş xüsusiyyətlər deyil eyni zamanda onun sələflərinin xüsusiyyətləri də təsir edir – məhz bu kaskadlılıq adlanır.

Bəs prioritetlik nədir? Biz artıq bilirik ki, bir elementin bir neçə valideyn elementi yəni sələfi ola bilər. Bizim misalımızda bu li elementi ola bilər. Gördüyünüz kimi onun bir sələfi ul elementi digər sələfi isə body elementidir. Body elementində rəng verilib və bu rəng body teqi daxilində olan bütün teqlərə bu rəng varislik vasitəsilə keçmişdir. Indi isə gəlin UL teqinə də başqa fərqli bir rəng də qeyd edək. Beləliklə bizdə burada nə alınır – li teqi üçün ayrıca bir xüsusiyyət verilməyib, onun sələfi ul teqi üçün rəng xüsusiyyəti qeyd edilib və onların hər ikisinin daha yuxarı sələfi olan body üçün də başqa rəng qeyd edilib. Bəs bu zaman brauzer nə edir? Aydın məsələdir ki, elementin yalnız bir rəngi ola bilər və bu rəngin elementə verilməsi üçün isə iki valideyn iddia irəli sürür. Deməli burada prioritetliyin birinci qaydası işə düşəcək və siz bu qaydanı unutmamalısınız. Deməli əgər element varislik yolu ilə özündən yuxarıdakı 2 valideynin xüsusiyyətlərini götürməlidirsə o elemet özündən bir pillə yuxarı olan valideyn yəni sələfin xüsusiyyətini götürəcəkdir. Burada li elementinin bir pillə yuxarı sələfi ul elementidir – iki pillə yuxarı sələfi isə body elemetidir. Deməli prioritetliyin birinci qaydasına uyğun olaraq li elementi ul elementinin xüsusiyyətini götürəcəkdir. Yəqinki sizə bu qayda aydın oldu. Kobud dildə desək sələfləri biz şəcərə üzrə düzsək o zaman varisliyi qəbul edən li elementini şərti olaraq oğul elementi kimi qəbul etsək o zaman ul teqi ata elementdir, body teqi isə baba elementdir. Prioritetlik qaydasına uyğun olaraq əgər ata və baba elementlərinə eyni qayda üzrə fərqli xüsusiyyətlər qeyd edilibsə o zaman oğul element özünə yaxın olan ilk sələf teqin xüsusiyyətini götürəcəkdir. Ən yaxın sələf teq isə ata teq olan ul teqidir.

İndi isə başqa bir məqama baxaq. Tutaq ki ola bilər ki, biz sırf teqin özünə rəng xüsusiyyəti vermişik. Gəlin indi biz li elementi üçün selektor qeyd edək və ona rəng xüsusiyyəti yazaq. Beləliklə hazırki vəziyyətdə elementə 3 fərqli rəng xüsusiyyəti təsir edir. Bu zaman li elementi sırf özünə verilən rəng xüsusiyyətini əks etdirəcək. Burada artıq prioritetliyin ikinci qaydası meydana çıxır - əgər elementin sırf özünə xüsusiyyət verilibsə o zaman sələflərin eyni xüsusiyyətləri bu element üçün iqnor edilir, yəni, kobud şəkildə desək oğul elementin özünün rəngi var və o, nə ata nə də baba elementdən varislik yolu ilə bu xüsusiyyəti götürməyəcəkdir.


Əfqanoğlu