A CSS stílus prioritás szintjének áttekintése

A Cascading Style Sheet (CSS) úgy gondolom, hogy a legegyszerűbb nyelvek a többi webhez kapcsolódó nyelvhez képest, ezért nem meglepő, hogy sokan, akik most kezdik megtanulni, hogyan kell létrehozni egy webhelyet, többnyire ezt a nyelvet és HTML-t fogják megtanulni.

Ebben a bejegyzésben visszatérünk a CSS alapjaihez. Meg fogjuk vizsgálni a CSS-stílusok kezdeti alkalmazásának módját, mely stílusokat fogják alkalmazni, hogyan változtatják meg a stílusok egyike, míg mások nem.

Tehát ez a bejegyzés kifejezetten a kezdőknek szenteltek, akik éppen most kezdik megragadni a kihívásokat, valószínűleg még mindig hibákat és hibákat okoznak az első stíluslap összeállításakor. Szóval, kezdjük el.

Alapértelmezett böngészőstílusok

A Firefox, a Chrome, a Safari, az Opera és az Internet Explorer jelenleg az első öt asztali böngésző a piacon. Ezek a böngészők és minden más böngésző egy általános szabályt követ, hogy beépített alapértelmezett stílusokat is tartalmazzon a HTML elemek megjelenítéséhez.

Tehát, ha néhány véletlenszerű HTML-elemet hozzáadunk bármilyen stílus nélkül, akkor látni fogja, hogy a böngészőben még mindig megfelelően jelenik meg.

Ha azonban ezeket az elemeket gondosan megvizsgáljuk, a böngésző mindegyikének (valamivel) különböző értékei vannak “alapértelmezett” nyilatkozat, amely következetlenséget okoz a böngészőkben, különösen a régi, például az IE6, a 7 és a Firefox 3.0.

Például, amint a fenti képernyőről is látható, a legújabb Firefox szolgáltatta blockquote alapértelmezés szerint margin: 16px 40px 16px 40px, míg a másik oldalon a Internet Explorer 7 fog megjelenni blockquote val vel margin: 0px 40px.

A fentiekben bemutatott következetlenségek leküzdése érdekében számos webes tervező és fejlesztő inkább az összes ilyen stílus felülírásával szeretne felülírni CSS visszaállítás. Ez a CSS fájl általában szinte minden HTML-t tartalmaz típus kiválasztók, azonos szabályokkal határozzák meg őket.

Számos CSS visszaállítás áll rendelkezésre, de itt vannak az első három kedvencem:

• Normalize.css
• CSS visszaállítás
• HTML5 Reset Stíluslap

Szelektorok

Valószínűleg gyakran olvastad ezt a kifejezést az általad meglátogatott webes tervezési / fejlesztési blogokon; Szelektorok.

A CSS szelektor az a szintaxis, amelyet a HTML-dokumentum bármely részének megcélzására használnak az alkalmazandó stílusokhoz. Három alapkiválasztót fogunk itt megvitatni, mivel valószínűleg az első webhelyén használt közös választók lesznek. A jövőbeni hozzászólásokban másokat fogunk fedezni.

Típusválasztó

A fentiekben említettük, hogy a Típusválasztó a dokumentum bármely HTML-elemeit célozza meg. Például:

 p / ** nyilatkozat ** / 

mindenre illeszkedik p vagy a bekezdés az elemeket és a használatát végül felülírja a böngészőktől kapott alapértelmezett stílusokat.

Osztályválasztó

Ha egy elemhez egy osztályt, vagy akár sok osztályt is felvett, akkor célozhatja az osztályokat is. A Osztályválasztó kezdődik a pont paraméter.

 ./ ** nyilatkozat ** / 

A fenti részlet az összes olyan elemhez illeszkedik, amelyik a dobozosztályt tartalmazza, vagy pontosabban is kiválasztható.

 p.box / ** nyilatkozat ** / 

Csak a p elemet tartalmazó elem doboz osztály.

Amikor a Osztály szelektor, mind az azonos stílusdeklaráció mind a típus és a Alapértelmezett böngésző felülíródik.

ID választó

A ID nagyon korlátozó tulajdonság, csak egy lehet id egy elemre, és egyedinek is kell lennie.

 
Tartalom
 

Abban az esetben, ha van egy id egy elemben használhatjuk a id választó az elemet célozza; az id-választó egy hash-val van meghatározva # paraméter.

 #uniqueID / ** nyilatkozat ** / 

Mivel a ID egyedülálló, a választó típusának legmagasabb prioritási szintje. Szóval, amikor stílusokat hirdetünk a ID a szelektor végül felülírja ugyanazt a nyilatkozatot a Osztály, típus szelektorok és a Alapértelmezett böngésző stílusok.

A stílusok beágyazása

Az összes alapvető alapvető választót végeztük el, és most meg fogjuk vizsgálni, hogy ezek a stílusok beágyazódnak-e egy HTML-dokumentumba.

Külső stílusok

A külső stílusok azok a stílusok, amelyeket külön fájlba adnak, általában a .css fájl, amely a HTML dokumentumhoz kapcsolódik a stílusok alkalmazásához.

És az összes fájlban bejelentett stílus úgy viselkedik, mint amit a Szelektorok a fenti rész, főként felülírja az alapértelmezett böngésző stílus, és felülírja egy másik stílusnyilatkozatot a választók prioritási szintjétől függően.

Ez a gyakorlat a leginkább ajánlott mód a stílusok csatolásához, különösen akkor, ha több ezer CSS-kód sora van, amelyekhez több oldal is csatolható.

Ezáltal a stílusok könnyen kezelhetők, például a CSS-fájlokat különálló fájlokra lehet szétválasztani, például a typography.css-t, hogy vezérelje a tipográfia összes stílusát stb..

Belső stílusok

A belső stílusok azok a stílusok, amelyek közvetlenül a HTML-dokumentumba ágyazódnak be, általában a címke.

Ez a gyakorlat azonban nem ajánlott, ha több száz soros stílusa lesz, mivel a HTML oldal túl hosszú lesz, és a stílus csak akkor befolyásolja, ahol a stílusok beágyazódnak. Amikor tíz oldalt hagyott el, másolni kell ezeket a stílusokat, és be kell őket ágyazni az összes oldalra, és amikor meg kell változtatnia a stílusokat, tíz különböző oldalra kell változtatnia, ami nyilvánvalóan unalmas feladat.

Elsőbbségi szintje alapján a belső stílus magasabb, így felülírja a külső stílusokat.

Inline stílusok

Az inline stílusok a HTML elembe közvetlenül beágyazott stílusok.

 
Ez egy bekezdés
 

A fenti példa hozzáadódik 5px a bekezdéselem eleméhez képest, és felülírja a belső és külső stílusokban az adott elemre bejelentett margókat.

De ne csináld ezt, mert a jelölésed minden stílusdeklarációval elfedik; ha egy csomó stílus van beágyazva, akkor még rémálom lesz, hogy megnézze és fenntartsa az összes html és stílusát.

További irodalom: Három módja a CSS - W3CSchoolok beillesztésének.

A fontos szabály

Vannak olyan körülmények, amikor egy adott stílust kell alkalmazni egy elemhez, de ugyanaz a stílus az elemhez is szerepel a stíluslapban vagy a dokumentumban. Például:

A következő horgonycímke van beágyazott stílusokkal

 Ez egy link 

És a stíluslapon van egy külön stílust is a horgonycímkéhez.

 a border: 1px solid # 333; háttérszín: # 555;  

Ebben a példában a !fontos szabály, hogy a böngészőt kényszerítse a stíluslapok stílusának használatára az elemben található stílus helyett.

 a border: 1px solid # 333! fontos; háttérszín: # 555! fontos;  

A !fontos a szabály azt jelzi, hogy ez a stílus a leginkább fontos és a többi stílust is alkalmazni kell akkor is, ha közvetlenül az elembe van beágyazva (Inline stílusok).

További irodalom:! fontos CSS nyilatkozatok: hogyan és mikor kell használni őket - Smashing Magazine.

Következtetés

A cikkben tárgyaltuk a teljes témát. Láthatjuk, hogy minden egyes választó és a stílusok beágyazásának módja különböző prioritási szinteket tartalmaz a böngésző mechanizmusában. Ahogy már korábban említettem, ezek a témák kezdőknek szánták, így nem feltétlenül újszerűek a tapasztalt webes tervezők számára.

De úgy gondolom, hogy minden webes tervező általában egyetért azzal, hogy az alapokhoz való visszatérés néha szükséges ahhoz, hogy áttekintjük alapismereteinket. Tény, hogy gyakran hiányzik néhány alapvető cucc, hiszen jobban lenyűgözik a fantasztikus (és őrült) ilyen dolgok..

Végül bemutattam egy demo és forrásfájlt, hogy tovább vizsgálhassuk a cikkben tárgyalt vitát.

• Demó
• Letöltés forrása

Remélem, hogy élvezni fogja ezt a bejegyzést, és ha talál néhány pontatlanságot, vagy hiányozok néhány fontos pontról, ne habozzon értesíteni nekem az alábbi megjegyzések részben.