Kontrola prioritnej úrovne štýlu CSS

Kaskádový štýl (CSS) je, myslím, najjednoduchšie jazyky v porovnaní s inými jazykmi súvisiacimi s webom, takže nie je prekvapujúce nájsť veľa ľudí, ktorí sa len začínajú učiť, ako vytvoriť webové stránky, väčšinou sa naučia tento jazyk a najprv HTML.

V tomto príspevku sa vrátime k základným údajom CSS. Budeme skúmať, ako sa pôvodne používajú štýly CSS, aké štýly sa použijú, ako sa niektoré deklarácie štýlov navzájom prepíšu, zatiaľ čo iné nie.

Takže tento príspevok je špeciálne určený pre začiatočníkov, ktorí sa práve začínajú obávať problémov, pravdepodobne stále robia chyby a chyby pri zostavovaní svojho prvého štýlu. Takže začnime.

Predvolené štýly prehliadača

Programy Firefox, Chrome, Safari, Opera a Internet Explorer sú v súčasnosti prvými piatimi desktopovými prehliadačmi na trhu. Tieto prehliadače a všetky ostatné prehliadače sa riadia štandardným pravidlom a obsahujú vstavané predvolené štýly na vykresľovanie prvkov HTML.

Takže keď vložíme nejaké náhodné prvky HTML bez pridania štýlov, uvidíte, že je v prehliadači stále správne vykreslené.

Ak však dôkladne preveríme tieto prvky, každý prehliadač má (mierne) odlišné hodnoty pre ich “štandardné” ktoré spôsobujú nekonzistenciu v prehliadačoch, najmä v starých, ako napríklad IE6, 7 a Firefox 3.0.

Napríklad, ako vidíte z vyššie uvedenej obrazovky, najnovší Firefox vykreslila blockquote štandardne s rozlíšenie: 16px 40px 16px 40px, zatiaľ čo na druhej strane Internet Explorer 7 bude vykresľovať blockquote s margin: 0px 40px.

Aby sme prekonali uvedené nezrovnalosti, rad web dizajnérov a vývojárov radšej prepíše všetky tie štýly Reset CSS. Tento súbor CSS spravidla obsahuje takmer všetky HTML typ selektory, pričom ich definuje rovnakými pravidlami.

Existuje veľa CSS reset, ale tu sú moje tri najlepšie obľúbené:

• Normalize.css
• Reset CSS
• HTML5 Resetovať štýl

selektory

Často ste často čítali tento pojem v rámci blogov, ktoré ste navštívili; selektory.

Selektor v systéme CSS je syntax použitý na zacielenie na niektoré časti dokumentu HTML pre štýly, ktoré sa majú použiť. Existujú tri základné selektory, o ktorých budeme diskutovať, pretože pravdepodobne budú bežnými selektormi použitými na vašej prvej webovej stránke. V budúcich príspevkoch budeme pokrývať ostatných.

Typ výberu

Ako už bolo spomenuté vyššie, výberový prvok typu bude zacieliť na zadané prvky HTML v dokumente. Napríklad:

 p / ** deklarácia ** / 

bude zodpovedať všetkým p alebo odsek prvky a jeho použitie nakoniec prepíšu predvolené štýly dané z prehliadačov.

Výber triedy

Ak ste k prvku pridali triedu alebo dokonca veľa tried, môžete tieto triedy zacieliť. Výber triedy začína s bodka parameter.

 .box / ** deklarácia ** / 

Uvedený úryvok bude zodpovedať všetkým prvkom, ktoré majú triedu poľa, alebo môžeme tiež presnejšie vyberať.

 p.box / ** deklarácia ** / 

Bude sa zameriavať len na p element, ktorý má box trieda.

Keď používame Trieda selektor, všetky rovnaké štýly vyhlásenie z oboch typ selektor a Predvolený prehliadač budú prepísané.

ID Selector

ID je veľmi obmedzujúci atribút, môžeme mať len jeden id na prvok a musí byť tiež jedinečný.

 
obsah
 

V prípade, že máme id v prvku, môžeme použiť id zamerať sa na tento prvok; volič id je definovaný ako hash # parameter.

 #uniqueID / ** deklarácia ** / 

Vzhľadom k tomu, ID je jedinečná, má najvyššiu prioritu úrovne typu selektora. Takže, keď deklarujeme štýly s ID selektor bude nakoniec prepísať všetky rovnaké vyhlásenie z Trieda, typ selektory a Predvolený prehliadač štýly.

Vloženie štýlov

Prišli sme cez všetky základné základné selektory a teraz sa budeme zaoberať tým, ako sú tieto štýly vložené do dokumentu HTML.

Externé štýly

Externé štýly sú štýly, ktoré sa pridávajú do samostatného súboru, zvyčajne v a .css súbor, ktorý je potom prepojený s dokumentom HTML pomocou značku na použitie týchto štýlov.

A všetky štýly deklarované v súboroch sa správajú ako to, čo sme spomenuli v selektory vyššie, a to hlavne prepíše predvolený prehliadač štýlu a prepísať inú deklaráciu štýlu v závislosti od úrovne priority výberov.

Táto prax je najviac odporúčaným spôsobom pripojenia štýlov, najmä ak máte tisíce riadkov kódov CSS s mnohými stránkami, ktoré sa majú pripojiť.

Týmto spôsobom budú štýly ľahko ovládateľné, napríklad môžete oddeliť súbory CSS do viacerých súborov v závislosti od ich špecifickej úlohy, ako napríklad typography.css na ovládanie všetkých štýlov súvisiacich s typografiou atď..

Interné štýly

Vnútorné štýly sú štýly, ktoré sú vložené priamo do dokumentu HTML, vo všeobecnosti vnútri štítok.

Táto prax sa však neodporúča, ak budete mať stovky radov štýlov, pretože vaša stránka HTML bude príliš dlhá a štýl ovplyvní len to, kde sú štýly vložené. Keď necháte povedať desať stránok, budete musieť skopírovať tieto štýly a vložiť ich do všetkých stránok a ak potrebujete zmeniť štýly, musíte ich zmeniť na desať rôznych stránok, čo je samozrejme nudná úloha.

Na základe svojej úrovne priority je vnútorný štýl vyšší, takže prepíše externé štýly.

Inline štýly

Inline štýly sú štýly, ktoré sú priamo vložené do elementu HTML.

 
Toto je odsek
 

Tento príklad bude pridaný 5px okraj prvku odseku a tiež prepíše okraje, ktoré boli deklarované pre tento prvok, tak vo vnútorných, ako aj v externých štýloch.

Ale vyhnite sa tomu, pretože značka bude preplnená všetkými týmito deklaráciami štýlu. ak máte veľa vstavaných štýlov, stane sa dokonca aj nočnou morou, aby ste videli a udržiavali všetky html a štýly.

Ďalšie čítanie: Tri spôsoby vloženia CSS - W3CSchools.

Dôležité pravidlo

Existujú určité okolnosti, keď musíme použiť určitý štýl pre prvok, ale ten istý štýl pre tento prvok bol tiež deklarovaný inde v štýle šablóny alebo v dokumente. Napríklad:

Máme nasledujúcu značku kotvy s vloženými štýlmi

 Toto je odkaz 

A máme v štýle štýlov aj samostatný štýl pre túto kotvovú značku.

 border: 1px solid # 333; farba pozadia: # 555;  

V tomto príklade môžeme použiť !dôležitý pravidlo núti prehliadač používať štýly v štýle šablón namiesto toho v prvku.

 a border: 1px solid # 333! dôležité; farba pozadia: # 555! dôležité;  

!dôležitý pravidlo bude znamenať, že tento štýl je najviac dôležitý a musí sa aplikovať cez iný štýl, aj keď je priamo vložený do prvku (Inline štýly).

Ďalšie čítanie: Dôležité deklarácie CSS: Ako a kedy ich používať - ​​Smashing Magazine.

záver

V tomto článku sme prešli celým predmetom. Teraz môžeme vidieť, že každý selektor a spôsob, akým vkladáme štýly, majú v mechanizme prehliadača rôzne úrovne priorít. Ako som už spomenul vyššie, tieto témy sú určené pre začínajúcich študentov, takže určite nie sú pre začínajúcich web dizajnérov niečo nové.

Myslím si však, že každý web dizajnér vo všeobecnosti súhlasí, že vrátenie sa k základom je niekedy nevyhnutné na prehodnotenie našich základných znalostí o danej téme. V skutočnosti často chýbajú niektoré základné veci, pretože máme tendenciu byť viac ohromení úžasnými (a bláznivými).

Nakoniec som vám poskytol demo a zdrojový súbor, aby ste mohli ďalej preskúmať našu diskusiu v tomto článku.

• demonštrácie
• Stiahnuť zdroj

Dúfam, že sa vám tento príspevok páči a ak zistíte nejakú nepresnosť, alebo mi nejaké dôležité body zmeškali, neváhajte ma upozorniť v sekcii komentárov nižšie.