Web-sənədlərdə CSS Devralma necə işləyir?

CSS-lə bir veb-saytın dizaynının əhəmiyyətli bir hissəsi miras konsepsiyasını başa düşür.

CSS devralma avtomatik olaraq istifadə olunan əmlakın tərzi ilə müəyyən edilir. Stil mülkünün arka plan rənginə baxdığınızda, "Qalıq" adlı bir bölüm görəcəksiniz. Ən çox veb-dizaynerlər kimi olsanız, o bölməni görməmisiniz, amma bir məqsədə xidmət edir.

CSS Devralımı nədir?

Bir HTML sənədindəki hər element bir ağacın bir hissəsidir və başlanğıc elementindən başqa hər bir element onu əhatə edən bir elementə malikdir. Üstün elementə tətbiq olunan hər hansı bir üslubun xüsusiyyətləri miras oluna bilən hallar olduqda, onun içindəki elementlərə tətbiq oluna bilər.

Məsələn, aşağıdakı HTML kodunda bir EM etiketini əhatə edən bir H1 etiketi var:

Bu Böyük Başlıq

EM element H1 elementinin bir uşağıdır və miras alınmış H1-də hər hansı üslub da EM mətninə keçiriləcəkdir. Misal üçün:

h1 {font-size: 2em; }

Yazı tipi ölçüsü miras alındığından, "Böyük" deyən mətn (EM etiketləri daxilində yerləşdirilən) H1-in qalan hissəsi ilə eyni ölçüdə olacaq. Çünki CSS mülkiyyətində təyin olunan dəyəri devralır.

CSS mülkiyyətindən necə istifadə etməli

Istifadə etmək üçün ən asan yol, miras alınmamış və olmayan CSS xüsusiyyətləri ilə tanış olmaqdır. Əmlak miras alındıqda, siz dəyərdə sənəddə olan hər bir uşaq elementi üçün eyni qalacağını bilirsiniz.

Bunun ən yaxşı yolu, BODY kimi, çox yüksək səviyyəli elementə əsas üslublarınızı qurmaqdır. Yazı tipli ailənizi bədən mülkündə qurarsanız, miras sayəsində bütün sənəd həmin font-ailəni saxlayacaqdır. Bu, həqiqətən, daha az ümumi üslub olduğundan idarə etmək daha asan olan kiçik üslublar üçün hazır olacaq. Misal üçün:

body {font-family: Arial, sans-serif; }

Inherit Style dəyərini istifadə edin

Hər bir CSS mülkiyyəti mümkün bir seçim kimi "miras alın" dəyərini ehtiva edir. Bu, veb-brauzerə deyir ki, əmlakın adətən miras alınmayacağı halda, valideyn kimi eyni dəyərə sahib olmalıdır. Devralınmayan bir margin kimi bir stil təyin etsəniz, ata dəyərini valideyn kimi eyni marj təmin etmək üçün sonrakı xüsusiyyətlərdə miras dəyərindən istifadə edə bilərsiniz. Misal üçün:

body {margin: 1em; } p {margin: inherit; }

Məxfilik Qiymətli Dəyərlərdən istifadə edir

Uzunluğu istifadə edən font ölçüsü kimi miras alınmış dəyərlər üçün bu vacibdir. Hesablanmış dəyər Veb-səhifənin digər dəyərlərinə nisbətən bir dəyərdir.

BODY elementinizdə 1em font ölçüsünü təyin etsəniz, bütün səhifəniz yalnız 1m ölçüsündə olmayacaq. Bunun səbəbi başlıqların (H1-H6) və digər elementlərin (bəzi brauzerlərin masa xüsusiyyətlərini fərqli olaraq hesablamaq) elementləri Veb brauzerində nisbi ölçüyə malik olmasıdır. Digər şrift ölçüsü məlumatları olmadıqda, Veb brauzer həmişə H1 başlığında səhifənin ən böyük mətni, sonra H2 və s. BODY elementini müəyyən bir font ölçüsünə qoyduğunuzda, bu "ortalama" font ölçüsü olaraq istifadə olunur və başlıq elementləri bundan hesablanır.

Qalıq və arka xüsusiyyətləri haqqında bir qeyd

Siyahıda göstərilən bir sıra üslublar W3C-də CSS 2-də miras qalmayıb, lakin veb brauzerlər hələ də dəyərləri devralırlar. Məsələn, aşağıdakı HTML və CSS yazarsanız: