CSS dəyişənləri və onların istifadəsi

Bir çox insan CSS dəyişənləri ilə tanış deyil və siz də onlardan biri ola bilərsiniz! CSS dəyişənləri ilə tanış olmaq və onlardan necə istifadə etmək vaxtı gəldi.

CSS dəyişənləri müəyyən bir element üçün istifadəçi tərəfindən təyin olunan bir əmlak kimi elan edilir. Daha sonra bu elementi istifadə etdiyiniz yerdə istifadə edə bilərsiniz.

İzahat və istifadə

Xüsusi bir əmlak elan etmək:

Element {- fon rəngi: # f00; }

Burada element istənilən elementin seçicisi ola bilər, məs. B. div, p, .test və s.

Etdiyimiz bu element üçün xüsusi bir xüsusiyyət elan etdik - background-color. Bütün xüsusi CSS xüsusiyyətləri ilə başlamalı -.

İndi var funksiyasından istifadə edərək element daxilində bu xüsusi mülkiyyəti istifadə edə bilərik.

Element {fon rəngi: var (- fon rəngi); }

Burada əvvəlcədən elan edilmiş dəyişənə elementin fon rəngini təyin etdik.

Hamısı yaxşı və yaxşıdır, amma ümumiyyətlə özümüzü yalnız birində deyil, fərqli elementlərdə təkrarlayırıq. Bir element növü daxilində bir istifadəçi tərəfindən təyin olunan dəyişən elan etmək çox praktik deyil.

Xüsusi bir əmlakı birdən çox element tipində istifadə etmək üçün xüsusi mülkiyyəti yalançı sinifdə elan edə bilərik: kök.

: Kök {- əsas rəng: # 333; }

İndi sənədimizin hər bir elementində - ilkin rəng dəyişənini istifadə edə bilərik:

div {rəng: var (- əsas rəng); }
p {fon rəngi: var (- əsas rəng); }
.schick {çərçivə rəngi: var (- əsas rəng); }

Xüsusi mülklərimizi daxili olaraq elan edərək: kök, indi div daxilində mətn rəngini təyin etmək üçün, p rənginin rəngini təyin etmək üçün və sərhəd rəngini təyin etmək istəyən hər hansı bir element ilə istifadə edə bilərik. Bu sayədə təkrarı təkrarlamaq minimuma endirilmədi, eyni zamanda veb saytımızın ilkin rəngini redaktə və dəyişdirməyi asanlaşdırdıq.

Vərəsəlik

Elementlər ayrıca xüsusiyyətlərə sahib ola bilər. Tutaq ki, aşağıdakı HTML kodu var:

  
  

Sonra .ent üçün - mətn ölçüsü adlı dəyişən elan edirik.

.parent {- mətn ölçüsü: 15px; }

İndi - mətn ölçüsünü yalnız .parentdə deyil, uşaqlarda da istifadə edə bilərik:

. ilk uşaq {şrift ölçüsü: var (- mətn ölçüsü); }

Xüsusi xüsusiyyətləri də ləğv edə bilərik. Bunu uşağın içərisindəki xüsusi əmlakı yenidən elan etməklə edə bilərik:

. ikinci uşaq {- mətn ölçüsü: 30px; }

İndi - .sekund uşaq daxilində - mətn ölçüsünü istifadə edirsinizsə, bu, 30px qədər qiymətləndirir, ancaq onu istifadə edirsinizsə .fərqli uşaq və ya .parent, bu hələ 15px.

Düşük dəyərlər

Ayrıca bir parametr üçün var, ikinci bir parametri keçərək müəyyən edə bilərsiniz. Məsələn:

. ikinci uşaq {şrift ölçüsü: var (- mətn ölçüsü, 30px); }

Dəyişən hələ müəyyənləşdirilmədikdə geri dəyərlər istifadə olunur. Brauzer uyğunsuzluğunu əvəz etmək üçün istifadə edilmir.

Nəticə

CSS dəyişənlərindən necə istifadə edə biləcəyiniz budur! Qeyd edək ki, Internet Explorer kimi bəzi brauzerlər onları dəstəkləmir. Buna görə bütün brauzerləri dəstəkləməlisinizsə, bunu nəzərə almalısınız.