Pregled razine prioriteta CSS-a

Cascading Style Sheet (CSS) je, čini mi se, najjednostavniji jezik u odnosu na druge jezike povezane s webom, stoga ne čudi da mnogi ljudi koji tek počinju učiti kako izraditi web-lokaciju najprije nauče ovaj jezik i HTML najprije.

U ovom postu vraćamo se na osnove CSS-a. Pregledat ćemo kako se početno primjenjuju CSS stilovi, koji će se stilovi primjenjivati, kako se neke deklaracije stilova prepisuju, dok druge ne.

Dakle, ovaj post je posebno namijenjen početnicima koji tek počinju shvaćati izazove, vjerojatno još uvijek prave pogreške i pogreške prilikom sastavljanja svoje prve stilske tablice. Dakle, počnimo.

Zadani stilovi preglednika

Firefox, Chrome, Safari, Opera i Internet Explorer trenutno su prvih pet preglednika na radnoj površini na tržištu. Ovi preglednici i svi ostali preglednici slijede standardno pravilo za uključivanje ugrađenih zadanih stilova za prikaz HTML elemenata.

Dakle, kada stavimo neke nasumične HTML elemente bez ikakvih stilova, vidjet ćete da je i dalje ispravno prikazan u pregledniku.

No, ako pažljivo pregledamo te elemente, svaki preglednik ima (malo) različite vrijednosti za svoj “zadano” deklaracija koja uzrokuje nedosljednost u preglednicima, osobito u starom poput IE6, 7 i Firefox 3.0.

Na primjer, kao što možete vidjeti iz gornje slike zaslona, ​​najnoviji Firefox je prikazao blockquote prema zadanim postavkama s margina: 16px 40px 16px 40px, dok s druge strane Internet Explorer 7 će prikazati blockquote s margina: 0px 40px.

Kako bi prevladali gore prikazane nedosljednosti, mnogi web dizajneri i programeri radije prepisuju sve te stilove Resetiranje CSS-a. Ova CSS datoteka obično sadrži gotovo sav HTML Tip selektora, definirajući ih jednakim pravilima.

Dostupno je mnogo resetiranja CSS-a, ali ovdje su moja tri najbolja favorita:

• Normalize.css
• Resetiranje CSS-a
• HTML5 Reset stylesheet

selektora

Vjerojatno često čitate ovaj pojam na web-lokacijama koje ste posjetili; selektora.

Selektor u CSS-u je sintaksa koja se koristi za ciljanje bilo kojeg dijela HTML dokumenta za stilove na koje se primjenjuje. Postoje tri osnovna selektora o kojima ćemo ovdje raspravljati, jer će vjerojatno biti uobičajeni selektori korišteni na vašoj prvoj web stranici. Mi ćemo pokrivati ​​druge u budućim postovima.

Odabir tipa

Spomenuli smo jednom gore, selektor tipa će ciljati sve navedene HTML elemente na dokumentu. Na primjer:

 p / ** izjava ** / 

će odgovarati svim p ili stav elemente i pomoću njega će na kraju prebrisati zadane stilove dane u preglednicima.

Odabir klase

Kada ste elementu dodali klasu ili čak mnoge klase, možete ciljati i te klase. Odabir klase počinje s točka parametar.

 .kutija / ** izjava ** / 

Gornji isječak će odgovarati svim elementima koji imaju klasu okvira ili možemo i preciznije odabrati.

 p.box / ** izjava ** / 

Ciljat će samo p element koji ima kutija klasa.

Kada koristimo klasa selektor, sve iste deklaracije stilova iz oba Tip izbornik i Zadani preglednik će biti prepisana.

Odabir ID-a

iskaznica je vrlo restriktivan atribut, možemo imati samo jedan iskaznica na element i mora biti jedinstven.

 
Sadržaj
 

U slučaju da imamo iskaznica u elementu možemo koristiti Izbornik id ciljati taj element; izbornik id je definiran sa hashom # parametar.

 #uniqueID / ** izjava ** / 

Od iskaznica je jedinstven, ima najveću razinu prioriteta vrste selektora. Dakle, kada proglašavamo stilove s iskaznica Izbornik će na kraju prebrisati sve iste izjave iz klasa, Tip selektora i Zadani preglednik stilovi.

Ugrađivanje stilova

Prošli smo kroz sve osnovne selektore i sada ćemo istražiti kako su ti stilovi ugrađeni u HTML dokument.

Vanjski stilovi

Vanjski stilovi su stilovi koji se dodaju u zasebnu datoteku, obično u a .css koji se zatim povezuju s HTML dokumentom pomoću da biste primijenili te stilove.

I svi stilovi prijavljeni u datotekama ponašat će se kao što smo spomenuli u selektora u gornjem dijelu, naime, uglavnom će prepisati zadani preglednik stil i prepisati na drugu deklaraciju stila, ovisno o razini prioriteta selektora.

Ta je praksa najpreporučljiviji način za povezivanje stilova, osobito kada imate tisuće redaka CSS kodova s ​​mnogo stranica.

Na taj način stilovi će se lako moći upravljati, na primjer, možete odvojiti CSS datoteke u nekoliko datoteka ovisno o njegovoj specifičnoj ulozi, kao što je typography.css za kontrolu svih stilova vezanih uz Tipografiju i tako dalje.

Interni stilovi

Unutarnji stilovi su stilovi koji su ugrađeni izravno u HTML dokument, uglavnom unutar označiti.

No, ova praksa se ne preporučuje kada ćete imati stotine linija stilova jer će vaša HTML stranica biti predugačka, a stil će utjecati samo na mjesto gdje su stilovi ugrađeni. Kada kažete deset stranica, morat ćete kopirati te stilove i ugraditi ih na sve stranice, a kada trebate promijeniti stilove morate ga promijeniti na deset različitih stranica, što je očito zamoran zadatak..

Na temelju razine prioriteta, interni stil je veći, pa će prepisati vanjske stilove.

Inline Styles

Inline stilovi su stilovi koji su izravno ugrađeni u HTML element.

 
Ovo je odlomak
 

Ovaj će se primjer dodati 5px margine na element stavka i također će prebrisati margine koje su deklarirane za taj element u internim i eksternim stilovima.

Ali nemojte to činiti, jer će vaša oznaka biti pretrpana svim tim deklaracijama stila; ako imate ugrađenu hrpu stilova, to će čak postati noćna mora za prikaz i održavanje svih vaših html-ova i stilova.

Daljnje čitanje: Tri načina umetanja CSS - W3CSchools.

Važno pravilo

Postoje neke okolnosti kada moramo primijeniti određeni stil za element, ali isti stil za taj element je također deklariran negdje drugdje u stilskom listu ili u dokumentu. Na primjer:

Imamo sljedeću oznaku sidra s ugrađenim stilovima

 Ovo je veza 

Također imamo poseban stil za tu sidrenu oznaku u stilu.

 a border: 1px solid # 333; boja pozadine: # 555;  

U tom primjeru možemo upotrijebiti !važno Pravilo kako bi primoralo preglednik da koristi stilove u stilskom listu umjesto onog u elementu.

 a border: 1px solid # 333! background-color: # 555!  

!važno Pravilo će pokazati da je ovaj stil najviše važno i mora se primijeniti na drugi stil čak i kada je izravno ugrađen u element (Inline Styles).

Daljnje čitanjevažne CSS deklaracije: Kako i kada ih koristiti - Smashing Magazine.

Zaključak

Prošli smo kroz cijeli predmet u ovom članku. Sada možemo vidjeti da svaki selektor i način na koji ugrađujemo stilove imaju različite razine prioriteta u mehanizmu preglednika. Kao što sam već spomenuo, ti su predmeti namijenjeni početničkim razinama pa definitivno nisu nešto novo za iskusne web dizajnere.

No, mislim da će se svaki web-dizajner uopće složiti da je povratak na osnove ponekad nužan za pregled našeg temeljnog znanja o predmetu. Zapravo, često nam nedostaju neke osnovne stvari, jer smo obično impresionirani strašnim (i ludim) stvarima kao što je ovaj.

Konačno, pružio sam demo datoteku i izvornu datoteku kako biste dalje razmatrali našu raspravu u ovom članku.

• Demo
• Preuzimanje izvora

Nadam se da ćete uživati ​​u ovom postu i ako u njemu pronađete neku netočnost ili sam propustio neke važne točke, ne oklijevajte me obavijestiti u odjeljku komentara.