Dôležité sily a zmena kaskády
Jedným z najlepších spôsobov, ako sa naučiť kódovať webové stránky, je pozrieť sa na zdrojové kódy iných stránok. Táto prax je to, koľko webových profesionálov sa naučilo svoje remeslo, najmä v dňoch predtým, než bolo veľa možností pre kurzy webového dizajnu , knihy a on-line tréningové stránky.
Ak sa pokúsite túto prax a pozrieť sa na kaskádové štýly (CSS) stránky, jedna vec, ktorú môžete vidieť v tomto kóde, je riadok, ktorý hovorí!
Čo to znamená a rovnako dôležité, ako správne používate toto vyhlásenie vo vašich štýloch?
Kaskáda CSS
Po prvé, je dôležité pochopiť, že kaskádové štýlové listy skutočne majú kaskádu , čo znamená, že sú umiestnené v určitom poradí. Vo všeobecnosti to znamená, že štýly sa používajú v poradí, v akom ich prehliadač prečíta. Prvý štýl sa aplikuje a potom druhý a tak ďalej.
V dôsledku toho, ak sa štýl objaví v hornej časti štýlu šablón a potom sa v dokumente zmenší dolná časť, druhá inštancia tohto štýlu je druhá, ktorá sa uplatňuje v nasledujúcich prípadoch, nie v prvej inštancii. V zásade, ak dva štýly hovoria to isté (čo znamená, že majú rovnakú úroveň špecifičnosti), bude použitý posledný.
Predstavme si napríklad, že tieto štýly boli obsiahnuté v šablóne štýlov. Text odstavca by bol vykresľovaný čiernou farbou, aj keď prvý použitý vlastnosť štýlu je červená.
Je to preto, že "čierna" hodnota je uvedená na druhom mieste. Pretože CSS je čitateľné zhora, posledný štýl je "čierny" a preto vyhrá.
p {farba: červená; }
p {farba: čierna; }
Ako dôležité zmeny menia prioritu
Teraz, keď pochopíte, ako tieto CSS spravujú tieto takmer identické pravidlá, môžeme sa pozrieť na to, ako dôležitá smernica mení veci trochu.
Dôležitá smernica ovplyvňuje spôsob, akým vaša CSS kaskáda pri dodržiavaní pravidiel, ktoré považujete za najdôležitejšie a ktoré by sa mali uplatňovať. Pravidlo, ktoré má dôležitú smernicu, sa vždy uplatňuje bez ohľadu na to, kde sa toto pravidlo nachádza v dokumente CSS.
Aby ste text odstavca vždy červený, z vyššie uvedeného príkladu budete používať:
p {farba: červená! dôležitá; }
p {farba: čierna; }
Teraz bude celý text zobrazený červenou farbou, aj keď je "čierna" hodnota uvedená na druhom mieste. Dôležitá smernica prevyšuje bežné pravidlá kaskády a dáva tomuto štýlu veľmi vysokú špecifickosť.
Ak absolútne potrebujete, aby sa odseky zobrazovali červene, tento štýl by to urobil, ale to neznamená, že ide o dobrú prax. Poďme sa pozrieť na to, kedy budete chcieť použiť! Dôležité a keď to nie je vhodné.
Kedy použiť! Dôležité
Dôležitá smernica je veľmi užitočná pri testovaní a ladení webových stránok. Ak si nie ste istí, prečo nie je použitý štýl a myslíte si, že to môže byť problém špecifickosti, môžete pridať dôležitú deklaráciu do vášho štýlu a zistiť, či to opravuje.
Ak pridávanie! Dôležité skutočne opravuje problém štýlu, práve ste zistili, že ide o problém špecifickosti. Nechcete však nechať tento dôležitý kód, ktorý bol umiestnený len na účely testovania.
Keďže testovanie prebehne, mali by ste teraz túto smernicu odstrániť a upraviť svoj selektor tak, aby ste dosiahli špecifickosť, ktorú potrebujete na to, aby váš štýl fungoval. Dôležité by ste nemali robiť svoju cestu do vašich výrobných závodov, čiastočne kvôli tomu, ako mení normálnu kaskádu.
Ak sa príliš silne opriete o dôležitú deklaráciu, aby ste dosiahli požadované štýly, nakoniec budete mať štýlový štýl plný dôležitých štýlov. Budete zásadne meniť spôsob spracovania stránky CSS. Je to lenivá prax, ktorá z dlhodobého hľadiska nie je dobrá.
Použite! Dôležité pre testovanie, alebo v niektorých prípadoch, kedy absolútne musíte override inline štýl, ktorý je súčasťou rámca témy alebo šablóny.
Dokonca aj v takýchto prípadoch použite tento prístup čo najmenšie a namiesto toho sa snažte písať čisté štýly, ktoré pochopia kaskádu.
Šablóny štýlov používateľa
Existuje jedna posledná poznámka k dôležitej smernici, ktorá je nevyhnutná na pochopenie. Táto smernica bola tiež zavedená s cieľom pomôcť používateľom webových stránok vyrovnať sa so štýlmi, ktoré spôsobujú, že stránky sú pre nich ťažké používať alebo čítať.
Typicky, ak užívateľ definuje štýl listu na zobrazenie webových stránok, tento štýl listu je prerušený štýlom listu autorov webových stránok. Ak užívateľ označuje štýl za dôležitý, tento štýl preruší štýl štýlu autorov webových stránok, aj keď autor označuje pravidlo za dôležité!
To je užitočné pre používateľov, ktorí potrebujú nastaviť štýly určitým spôsobom. Napríklad, niekto môže potrebovať zvýšiť predvolené veľkosti písma na všetkých webových stránkach, ktoré používajú. Použitím vašej dôležitej smernice šetrne v rámci stránok, ktoré vytvoríte, prispôsobíte akékoľvek špeciálne potreby vašich používateľov.
Upravil Jeremy Girard