Kontrola úrovně priority stylu CSS

Šablona kaskádových stylů (CSS) Myslím si, že je to nejjednodušší jazyk ve srovnání s jinými jazyky souvisejícími s webem, takže není divu, že mnoho lidí, kteří se právě začínají učit, jak vytvářet webové stránky, se většinou naučí tento jazyk a HTML nejdříve.

V tomto příspěvku se vrátíme k základům CSS. Chystáme se zkontrolovat, jak se původně používají styly CSS, jaké styly se budou aplikovat, jak se některá deklarace stylů vzájemně přepisují, zatímco jiné.

Takže tento příspěvek je speciálně určen pro začátečníky, kteří právě začínají dostávat do povědomí problémy, a to i při chybách a chybách při kompilaci jejich prvního stylu. Začněme.

Výchozí styly prohlížeče

Firefox, Chrome, Safari, Opera a Internet Explorer jsou v současnosti pět nejlepších stolních prohlížečů na trhu. Tyto prohlížeče a všechny ostatní prohlížeče dodržují standardní pravidlo zahrnutí vestavěných výchozích stylů pro vykreslení prvků HTML.

Když tedy vložíme některé náhodné prvky HTML bez přidaných stylů, uvidíte, že je stále správně vykreslen v prohlížeči.

Pokud však tento prvek pečlivě zkontrolujeme, každý z prohlížečů má (poněkud) odlišné hodnoty pro svůj obsah “výchozí” deklarace, která způsobuje nekonzistenci v prohlížečích, zejména ve starých verzích jako IE6, 7 a Firefox 3.0.

Například, jak můžete vidět z výše uvedeného obrázku, nejnovější Firefox vykreslil blockquote standardně pomocí okraj: 16px 40px 16px 40px, zatímco na druhé straně Internet Explorer 7 bude vykreslovat blockquote s okraj: 0px 40px.

K překonání výše uvedených nesrovnalostí mnoho webových designérů a vývojářů raději přepíše všechny tyto styly CSS Reset. Tento soubor CSS obecně obsahuje téměř všechny HTML Typ definují se stejnými pravidly.

K dispozici je mnoho resetů CSS, ale zde jsou mé tři nejoblíbenější oblíbené položky:

• Normalize.css
• CSS Reset
• HTML5 Obnovení šablony stylů

Selektory

Pravděpodobně jste si často tento termín přečetli v navštívených blogech webového designu nebo vývoje. Selektory.

Selector v CSS je syntaxe používaná k cílení libovolných částí dokumentu HTML pro styly, na které se mají aplikovat. Tam jsou tři základní selektory budeme diskutovat zde, protože pravděpodobně budou společné selektory používané na své první webové stránky. Budeme pokrývat další příspěvky v budoucnu.

Výběr typu

Zmínili jsme se jednou výše, selektor typů se zaměří na všechny zadané prvky HTML v dokumentu. Například:

 p / ** prohlášení ** / 

bude odpovídat všem str nebo odstavec Prvky a jejich použití nakonec přepíše výchozí styly dané z prohlížečů.

Výběr třídy

Když jste k elementu přidali třídu nebo dokonce mnoho tříd, můžete také cílit na tyto třídy. Výběr třídy začíná písmenem a tečka parametr.

 .box / ** prohlášení ** / 

Výše uvedený úryvek bude odpovídat všem prvkům, které mají třídu box, nebo můžeme také vybrat konkrétněji.

 p.box / ** prohlášení ** / 

Bude cílit pouze na str prvek, který má box třída.

Když používáme Třída výběr, všechny stejné styly prohlášení z obou Typ přepínač a Výchozí prohlížeč bude přepsán.

Volič ID

ID je velmi restriktivní atribut, můžeme mít jen jeden id na elementu a musí být také unikátní.

 
Obsah
 

V případě, že máme id v elementu můžeme použít volič id zacílit tento prvek; volič id je definován pomocí hash # parametr.

 #uniqueID / ** prohlášení ** / 

Od té doby ID je jedinečná, má nejsilnější úroveň priority typu voliče. Takže když deklarujeme styly s ID přepínač nakonec přepíše všechna stejná prohlášení z Třída, Typ a přepínačů Výchozí prohlížeč styly.

Vložení stylů

Prošli jsme všemi základními selektory a nyní se podíváme na to, jak jsou tyto styly vloženy do dokumentu HTML.

Externí styly

Externí styly jsou styly, které jsou přidány do samostatného souboru, obvykle v .css soubor, který je pak propojen s HTML dokumentem pomocí použít tyto styly.

A všechny styly deklarované v souborech se budou chovat jako to, co jsme zmínili v Selektory výše, a to zejména přepíše výchozí prohlížeč stylu a přepsat na jinou deklaraci stylu v závislosti na úrovni priority selektorů.

Tato praxe je nejvíce doporučený způsob, jak připojit styly, zejména pokud máte tisíce řádků kódů CSS s mnoha stránkami, ke kterým se připojujete.

Tímto způsobem budou styly také snadno ovladatelné, například můžete oddělit soubory CSS do několika souborů v závislosti na své specifické roli, jako je například typography.css pro ovládání všech stylů souvisejících s typografií a tak dále..

Vnitřní styly

Interní styly jsou styly, které jsou vloženy přímo do dokumentu HTML, obvykle uvnitř štítek.

Tato praxe se však nedoporučuje, pokud budete mít stovky řádků stylů, protože stránka HTML bude příliš dlouhá a styl bude mít vliv pouze na vložené styly. Když jste řekli deset stránek, budete muset tyto styly zkopírovat a vložit je na všechny stránky a když potřebujete změnit styl, musíte jej změnit na deset různých stránek, což je samozřejmě zdlouhavý úkol..

V závislosti na úrovni priority je vnitřní styl vyšší, takže přepíše externí styly.

Styly inline

Styly inline jsou styly, které jsou přímo vloženy do elementu HTML.

 
Toto je odstavec
 

Tento příklad bude přidán 5px a bude také přepisovat okraje, které byly pro tento prvek deklarovány v interních i externích stylech.

Ale vyhýbejte se tomu, protože vaše značení bude zaplněno všemi prohlášeními o stylu; pokud máte spoustu stylů vložených, stane se dokonce noční můrou vidět a udržovat všechny vaše html a styly.

Další čtení: Tři způsoby vložení CSS - W3CSchools.

Důležité pravidlo

Existují určité okolnosti, kdy musíme pro prvek použít určitý styl, ale stejný styl pro tento prvek byl také deklarován jinde v šabloně stylů nebo v dokumentu. Například:

Máme následující kotevní štítek s vloženými styly

 Toto je odkaz 

A máme také samostatný styl pro tuto kotevní značku ve stylu.

 a border: 1px solid # 333; barva pozadí: # 555;  

V tomto příkladu můžeme použít !Důležité pravidlo vynutit, aby prohlížeč používal styly v šabloně stylů namísto toho v prvku.

 a border: 1px solid # 333! barva pozadí: # 555!  

!Důležité pravidlo bude znamenat, že tento styl je nejvíce Důležité a musí být aplikován na jiný styl, i když je přímo vložen do prvku (Inline Styles).

Další čtení:! Důležité CSS prohlášení: Jak a kdy je používat - Smashing Magazine.

Závěr

V tomto článku jsme prošli celým předmětem. Nyní můžeme vidět, že každý selektor a způsob, jakým vložíme styly, mají v mechanismu prohlížeče různé úrovně priority. Jak jsem zmínil dříve, tyto předměty jsou určeny pro začátečníky, takže rozhodně nejsou něco nového pro zkušené webové designéry.

Ale myslím, že každý web designer obecně souhlasí, že návrat k základům je někdy nezbytný pro přezkoumání našich základních znalostí předmětu. Ve skutečnosti, často chybí některé základní věci, protože máme tendenci být více ohromen úžasné (a šílené) věci, jako je tento.

Nakonec jsem vám poskytl demo a zdrojový soubor, abyste mohli dále prozkoumat naši diskusi v tomto článku.

• Demo
• Stáhněte si zdroj

Doufám, že se vám tento příspěvek líbí a pokud v něm zjistíte nějaké nepřesnosti, nebo mi chybí některé důležité body, neváhejte mne informovat v sekci Komentáře níže.