Čo znamená! Dôležité v CSS?

Jedným z najlepších spôsobov, ako sa naučiť kódovať webové stránky, je pozrieť sa na stránku zdrojové kódy iných stránok. Tento postup predstavuje spôsob, ako sa mnoho odborníkov na web učilo svojmu remeslu, najmä v minulosti, keď tu bolo toľko možností vzhľad stránky kurzy, knihy a online školiace stránky.

Ak vyskúšate tento postup a pozriete si kaskádové štýly stránok, jedna vec, ktorú môžete v tomto kóde vidieť, je riadok, ktorý hovorí ! dôležité. Tento výraz mení prioritu spracovania v šablóne štýlov.

Kódovanie CSS
E + / Getty Images

Kaskáda CSS

Kaskádové štýly skutočne existujú kaskáda, čo znamená, že sú umiestnené v určitom poradí. Štýly sa spravidla používajú v poradí, v akom ich prehliada prehliadač. Aplikuje sa prvý štýl a potom druhý atď.

Výsledkom je, že ak sa štýl objaví v hornej časti šablóny so štýlmi a potom sa zmení v dokumente nižšie, druhá inštancia tohto štýlu je inštancia použitá v nasledujúcich inštanciách, nie prvá. V zásade, ak dva štýly hovoria to isté (čo znamená, že majú rovnakú úroveň špecifickosti), použije sa posledný uvedený.

instagram viewer

Predstavme si napríklad, že nasledujúce štýly boli obsiahnuté v šablóne štýlov. Text odseku bude vykreslený čiernou farbou, aj keď je prvá použitá vlastnosť štýlu červená. Je to preto, lebo „čierna“ hodnota je uvedená ako druhá. Pretože sa CSS číta zhora nadol, konečný štýl je „čierny“, a preto vyhráva ten.

p {farba: červená; }
p {farba: čierna; }

Aké dôležité zmeny Priorita

The ! dôležité Táto smernica ovplyvňuje spôsob, akým vaše kaskády CSS kaskádujú pri dodržaní pravidiel, ktoré považujete za najdôležitejšie a mali by sa uplatňovať. Pravidlo, ktoré obsahuje túto smernicu, sa vždy použije bez ohľadu na to, kde sa toto pravidlo v dokumente CSS vyskytuje.

Ak chcete, aby bol text odseku vždy červený, z predchádzajúceho príkladu zmeňte štýl nasledovne:

p {farba: červená! dôležité; }
p {farba: čierna; }

Celý text sa teraz zobrazí červenou farbou, aj keď „čierna“ hodnota je uvedená na druhom mieste. Direktíva! Important prepíše bežné pravidlá kaskády a dáva tomuto štýlu veľmi vysokú špecifickosť.

Ak nevyhnutne potrebujete, aby boli odseky červené, tento štýl by to urobil, ale to neznamená, že je to dobrý postup.

Kedy použiť! Dôležité

Direktíva! Important je užitočná pri testovaní a ladení webových stránok. Ak si nie ste istí, prečo sa štýl nepoužíva, a myslíte si, že by mohlo ísť o konflikt špecifík, pridajte do svojho vyhlásenia! Important štýl, aby ste zistili, či to napraví - a ak áno, zmeňte poradie selektorov a odstráňte z výroby dôležité smernice! kód.

Ak sa príliš opierate o dôležité vyhlásenie, aby ste dosiahli požadované štýly, nakoniec bude list štýlov posiaty dôležitými štýlmi. Zásadne zmeníte spôsob spracovania CSS tejto stránky. Je to lenivá prax, ktorá z hľadiska dlhodobého riadenia nie je dobrá.

Použite! Dôležité na testovanie alebo v niektorých prípadoch, keď absolútne musíte prepísať vložený štýl, ktorý je súčasťou rámca témy alebo šablóny. Aj v týchto prípadoch používajte tento prístup striedmo a namiesto toho píšte čisté štýly, ktoré rešpektujú kaskáda.

Šablóny používateľských štýlov

Táto smernica bola tiež zavedená, aby pomohla používateľom webových stránok vyrovnať sa so štýlmi, čo im sťažuje použitie alebo čítanie.

Kedy niekto definuje šablónu štýlov na prezeranie webových stránok je táto šablóna štýlov potlačená šablónou štýlov autora stránky. Ak používateľ označí štýl ako! Dôležitý, prepíše tento štýl šablónu štýlov autora webovej stránky, aj keď autor označí pravidlo ako! Dôležité.

Táto hierarchia je užitočná pre používateľov, ktorí potrebujú nastaviť štýly určitým spôsobom. Napríklad čitateľ so zrakovým postihnutím bude možno musieť zvýšiť predvolenú veľkosť písma na všetkých svojich webových stránkach, ktoré používa. Používaním svojej dôležitej smernice šetrne na stránkach, ktoré zostavujete, vyhovujete jedinečným potrebám vašich čitateľov.