Mida tähendab CSS-is oluline?

click fraud protection

Üks parimaid viise veebisaitide kodeerimise õppimiseks on lähtekoodid muudest saitidest. See tava on see, kui paljud veebiprofessionaalid õppisid oma meisterdamist, eriti päevadel enne, kui selleks oli nii palju võimalusi veebidisain kursused, raamatud ja veebipõhised koolitussaidid.

Kui proovite seda tava ja vaatate saidi kaskaadseid stiililehti, on selles koodis näha üks asi, mis ütleb ! oluline. See termin muudab stiililehe töötlemise prioriteeti.

CSS-i kodeerimine
E + / Getty Images

CSS-i kaskaad

Kaskaadstiililehed teevad seda tõepoolest kaskaad, mis tähendab, et need on paigutatud kindlasse järjekorda. Üldiselt rakendatakse stiile selles järjekorras, mida brauser loeb. Rakendatakse esimest stiili ja siis teist jne.

Selle tulemusena, kui stiil ilmub stiililehe ülaossa ja seejärel muudetakse seda dokumendis allapoole, on selle stiili teine ​​eksemplar järgnevatel eksemplaridel rakendatav, mitte esimene. Põhimõtteliselt, kui kaks stiili räägivad sama (mis tähendab, et neil on sama spetsiifilisus), kasutatakse viimast loetletud stiili.

instagram viewer

Kujutagem näiteks ette, et stiililehel olid järgmised stiilid. Lõigutekst renderdatakse mustana, kuigi esimene kasutatud stiilivara on punane. Seda seetõttu, et "must" väärtus on loetletud teisel kohal. Kuna CSS-i loetakse ülevalt alla, on lõplik stiil "must" ja seetõttu see üks võidab.

p {värv: punane; }
p {värv: must; }

Kuidas! Oluline muudab prioriteeti

The ! oluline See mõjutab teie CSS-i kaskaadimise viisi, järgides teie arvates kõige olulisemaid reegleid ja neid tuleks rakendada. Selle direktiivi reeglit rakendatakse alati olenemata sellest, kus see reegel CSS-dokumendis ilmub.

Lõiguteksti muutmiseks alati punaseks muutke eelmises näites stiili järgmiselt:

p {värv: punane! oluline; }
p {värv: must; }

Nüüd kuvatakse kogu tekst punasena, kuigi "must" väärtus on loetletud teisel kohal. Tähtis direktiiv tühistab kaskaadi tavapärased reeglid ja annab sellele stiilile väga kõrge spetsiifilisuse.

Kui teil oleks tingimata vaja, et lõigud oleksid punased, siis see stiil teeks seda, kuid see ei tähenda, et see oleks hea tava.

Millal kasutada! Oluline

Tähtis direktiiv on kasulik veebisaidi testimisel ja silumisel. Kui te pole kindel, miks stiili ei rakendata, ja arvate, et see võib olla spetsiifiline konflikt, lisage oma stiil, et näha, kas see parandab selle - ja kui see nii on, muutke valijate järjekorda ja eemaldage oma toodangust! olulised direktiivid kood.

Kui toetute soovitud stiilide saavutamiseks liiga tugevalt! Olulisele deklaratsioonile, on teil lõpuks stiilileht täis tähtsaid stiile. Te muudate põhimõtteliselt selle lehe CSS-i töötlemise viisi. See on laisk praktika, mis pole pikaajalise juhtimise seisukohast hea.

Kasutage funktsiooni! Oluline testimiseks või mõnel juhul, kui peate tingimata alistama sisemise stiili, mis on osa teema või malliraamistikust. Isegi nendel juhtudel kasutage seda lähenemist säästlikult ja kirjutage selle asemel puhtad stiililehed, mis austavad kaskaad.

Kasutaja stiililehed

See direktiiv loodi ka selleks, et aidata veebilehtede kasutajatel toime tulla stiililehtedega, mis muudavad lehtede kasutamise või lugemise neile raskeks.

Millal keegi määratleb stiililehe Veebilehtede vaatamiseks tühistab selle stiililehe lehe autori stiilileht. Kui kasutaja märgib stiili oluliseks, tühistab see stiil veebilehe autori stiililehe, isegi kui autor märgib reegli! Oluliseks.

See hierarhia on kasulik kasutajatele, kes peavad stiilid teatud viisil määrama. Näiteks võib nägemispuudega lugeja vajada kõigi kasutatavate veebilehtede fondi vaikesuuruse suurendamist. Kasutades oma! Olulist direktiivi säästlikult teie loodud lehtedel, võtate arvesse oma lugejate ainulaadseid vajadusi.

instagram story viewer