Jedním z nejlepších způsobů, jak se naučit kódovat webové stránky, je podívat se na zdrojové kódy jiných stránek. Tato praxe spočívá v tom, kolik webových profesionálů se naučilo své řemeslo, zejména v dobách, kdy bylo tolik možností webový design kurzy, knihy a online školicí weby.
Pokud tento postup vyzkoušíte a podíváte se na kaskádové styly stránek, jedna věc, kterou v tomto kódu můžete vidět, je řádek, který říká !Důležité. Tento termín mění prioritu zpracování v šabloně stylů.
Kaskáda CSS
Kaskádové styly skutečně existují kaskáda, což znamená, že jsou umístěny v určitém pořadí. Obecně platí, že styly jsou aplikovány v pořadí, v jakém jsou čteny prohlížečem. Použije se první styl a potom druhý atd.
Výsledkem je, že pokud se styl objeví v horní části šablony stylů a poté se v dokumentu změní níže, druhá instance tohoto stylu je ta, která se použije v následujících instancích, nikoli první. V zásadě platí, že pokud dva styly říkají totéž (což znamená, že mají stejnou úroveň specificity), použije se poslední uvedený.
Představme si například, že následující styly byly obsaženy v šabloně stylů. Text odstavce by byl vykreslen černě, přestože první použitá vlastnost stylu je červená. Je to proto, že „černá“ hodnota je uvedena jako druhá. Vzhledem k tomu, že se CSS čte shora dolů, je finální styl „černý“, a proto vyhrává.
p {barva: červená; }
p {barva: černá; }
How! Important Změní prioritu
The !Důležité Direktiva ovlivňuje způsob, jakým vaše CSS kaskáduje při dodržování pravidel, která považujete za nejdůležitější a měla by být použita. Pravidlo, které má tuto směrnici, se vždy použije bez ohledu na to, kde se toto pravidlo v dokumentu CSS objeví.
Aby byl text odstavce vždy červený, z předchozího příkladu změňte styl následujícím způsobem:
p {color: red! important; }
p {barva: černá; }
Nyní se celý text zobrazí červeně, i když je hodnota „černá“ uvedena jako druhá. Direktiva! Important potlačí běžná pravidla kaskády a dává tomuto stylu velmi vysokou přesnost.
Pokud jste absolutně potřebovali, aby odstavce vypadaly červeně, tento styl by to udělal, ale to neznamená, že je to dobrý postup.
Kdy použít! Důležité
Direktiva! Important je užitečná, když testujete a ladíte web. Pokud si nejste jisti, proč se styl nepoužívá, a myslíte si, že může jít o konflikt specifičností, přidejte do svého styl, abyste zjistili, zda to opravuje - a pokud ano, změňte pořadí selektorů a odstraňte z výroby důležité směrnice! kód.
Pokud se příliš opíráte o! Důležité prohlášení, abyste dosáhli požadovaných stylů, nakonec budete mít šablonu stylů posetou! Důležitými styly. Zásadně změníte způsob zpracování CSS dané stránky. Je to líná praxe, která není z dlouhodobého hlediska dobrá.
Použijte! Důležité pro testování, nebo v některých případech, když absolutně musíte přepsat vložený styl, který je součástí rámce motivu nebo šablony. I v těchto případech použijte tento přístup střídmě a místo toho napište čisté šablony stylů, které ctí kaskáda.
Šablony uživatelských stylů
Tato směrnice byla také zavedena, aby pomohla uživatelům webových stránek vyrovnat se se styly, které jim znesnadňují používání nebo čtení stránek.
Když někdo definuje šablonu stylů Chcete-li zobrazit webové stránky, je tato šablona stylů potlačena seznamem stylů autora stránky. Pokud uživatel označí styl jako! Důležitý, tento styl přepíše šablonu stylů autora webové stránky, i když autor označí pravidlo jako! Důležité.
Tato hierarchie je užitečná pro uživatele, kteří potřebují určit styly určitým způsobem. Například zrakově postižený čtenář možná bude muset zvýšit výchozí velikost písma na všech webových stránkách, které používá. Šetrným používáním vaší! Důležité směrnice na stránkách, které vytváříte, uspokojíte jedinečné potřeby vašich čtenářů.