Granskning av CSS Style Priority Level

Cascading Style Sheet (CSS) är enligt min mening det enklaste av språk jämfört med andra webbrelaterade språk, så det är inte förvånande att hitta många som bara börjar lära sig hur man skapar en webbplats kommer mest att lära sig detta språk och HTML först.

I det här inlägget kommer vi att gå tillbaka till CSS basics. Vi ska granska hur CSS-stilar ursprungligen tillämpas, vilka stilar som ska tillämpas, hur vissa formatdeklarationer skriver över varandra medan andra inte gör det.

Så det här inlägget är speciellt tillägnad för nybörjare som bara börjar hänga med utmaningarna, förmodligen gör de fortfarande misstag och fel när de sammanställer sitt första stilark. Så, låt oss bara komma igång.

Standard webbläsarstilar

Firefox, Chrome, Safari, Opera och Internet Explorer är för närvarande de fem största skrivbords webbläsare på marknaden. Dessa webbläsare och alla andra webbläsare följer en standardregel för att inkludera inbyggda standardstilar för att göra HTML-elementen.

Så när vi lägger in några slumpmässiga HTML-element utan några tillagda stilar ser du att den fortfarande är korrekt gjord i webbläsaren.

Men om vi inspekterar elementet noggrant har varje webbläsare (något) olika värden för deras “standard” deklaration som orsakar inkonsekvens över webbläsarna, särskilt i den gamla som IE6, 7 och Firefox 3.0.

Till exempel, som du kan se från ovanstående skärmdump, gjordes den nyaste Firefox Block citat som standard med marginal: 16px 40px 16px 40px, medan på andra sidan den Internet Explorer 7 kommer att göra Block citat med marginal: 0px 40px.

För att övervinna de inkonsekvenser som visas ovan föredrar många webbdesigners och utvecklare att skriva över alla dessa stilar med CSS Reset. Den här CSS-filen innehåller vanligtvis nästan alla HTML-filer Typ väljare, definierar dem med samma regler.

Det finns många CSS-återställningar tillgängliga, men här är mina tre bästa favoriter:

• Normalize.css
• CSS Reset
• HTML5 Reset Stylesheet

väljare

Du läser förmodligen ofta den här termen över webbdesign / utveckling bloggar du besökte; väljare.

Valet i CSS är syntaxen som används för att rikta in delar på HTML-dokumentet för de stilar som ska tillämpas på. Det finns tre grundläggande väljare som vi kommer att diskutera här, eftersom de förmodligen kommer att vara de gemensamma väljare som används på din första hemsida. Vi täcker andra i framtida inlägg.

Typväljare

Vi har nämnt en gång ovan, typväljaren kommer att rikta in några angivna HTML-element i dokumentet. Till exempel:

 p / ** deklaration ** / 

kommer att matcha alla p eller den paragraf element och använda det kommer så småningom att överskriva standardstilarna som ges från webbläsarna.

Klassväljare

När du har lagt till en klass eller till och med många klasser till ett element, kan du också rikta in på de här klasserna. De Klassväljare börjar med a punkt parameter.

 .rutan / ** deklaration ** / 

Ovanstående kod kommer att matcha alla element som har lådans klass, eller vi kan också välja mer specifikt.

 p.box / ** declaration ** / 

Det kommer endast att riktas mot p element som har låda klass.

När vi använder Klass väljare, alla samma stildeklaration från båda Typ väljare och Standard webbläsare kommer att skrivas över.

ID-väljare

De ID är ett mycket restriktivt attribut, vi kan bara ha en id på ett element och det måste också vara unikt.

 
Innehåll
 

Om vi ​​har en id i ett element kan vi använda idväljare att rikta detta element idväljaren definieras med en hash # parameter.

 #uniqueID / ** deklaration ** / 

Sedan ID är unik, den har den starkaste prioritetsnivån för typen av väljare. Så när vi förklarar stilar med ID väljaren kommer det till slut att skriva över samma deklaration från Klass, Typ selektorer och Standard webbläsare stilar.

Inbäddning av stilar

Vi har kommit igenom alla grundläggande grundläggande väljare och nu ska vi titta på hur dessa stilar är inbäddade i ett HTML-dokument.

Externa format

Externa format är de stilar som läggs till i en separat fil, vanligtvis i en .css fil som då är länkad till HTML-dokumentet med hjälp av tagg för att tillämpa dessa stilar.

Och alla stilar som deklareras i filerna kommer att verka som vad vi har nämnt i väljare avsnitt ovan, nämligen det kommer över huvud taget att överskrivas standardwebbläsaren stil och skriv över till en annan stildeklaration beroende på valörernas prioritetsnivå.

Denna praxis är det mest rekommenderade sättet att fästa stilar, särskilt när du har tusentals rader av CSS-koder med många sidor att bifoga.

Genom att göra det kommer stilar också att hanteras enkelt, till exempel kan du separera CSS-filerna i flera filer beroende på dess specifika roll, till exempel typografi.css för att styra alla stilar relaterade till typografi och så vidare.

Interna stilar

De interna formaten är de stilar som är inbäddade direkt i ett HTML-dokument, vanligtvis inom märka.

Men denna övning rekommenderas inte när du kommer att ha hundratals olika stilar eftersom din HTML-sida kommer att vara för lång och stilen påverkar bara var stilar är inbäddade. När du har låtit säga tio sidor måste du kopiera de här stilerna och bädda in dem på alla sidor och när du behöver ändra stilar måste du ändra den till tio olika sidor, vilket är uppenbarligen en tråkig uppgift.

Baserat på prioritetsnivå är den interna stilen högre, så den kommer att skriva över de externa formaten.

Inline Styles

Inline-stilar är de stilar som är direkt inbäddade i HTML-elementet.

 
Detta är en paragraf
 

Detta exempel ovan kommer att lägga till 5px marginal till styckementet och det kommer också att skriva över de marginaler som har deklarerats för det här elementet både i interna och externa format.

Men undvik att göra detta, eftersom din markering kommer att vara rörig med alla de stildeklarationerna; om du har en massa stilar inbäddade blir det till och med en mardröm för att se och behålla all din html och stil.

Vidare läsning: Tre sätt att infoga CSS - W3CSchools.

Den viktiga regeln

Det finns vissa omständigheter när vi måste tillämpa en specifik stil för ett element, men samma stil för det här elementet har också deklarerats annorstädes i stilarket eller i dokumentet. Till exempel:

Vi har följande ankare tagg med inbäddade stilar

 Detta är en länk 

Och vi har också en separat stil för den ankaretiketten i stilarket.

 en border: 1px solid # 333; bakgrundsfärg: # 555;  

I det exemplet kan vi använda !Viktig regel att tvinga webbläsaren att använda stilerna i stilarket istället för den i elementet.

 en border: 1px solid # 333! important; bakgrundsfärg: # 555! viktigt;  

De !Viktig regel kommer att indikera att denna stil är mest Viktig och måste appliceras över den andra stilen även när den är direkt inbäddad i elementet (Inline Styles).

Vidare läsning:! Viktiga CSS-förklaringar: Hur och när du ska använda dem - Smashing Magazine.

Slutsats

Vi har kommit igenom hela ämnet i den här artikeln. Vi kan se nu att varje väljare och det sätt som vi bäddar in stilar har olika prioritetsnivåer i webbläsarens mekanism. Som jag tidigare nämnt är dessa ämnen avsedda för nybörjarnivåer, så de är definitivt inte något nytt för erfarna webbdesigners.

Men jag tror att varje webbdesigner i allmänhet kommer överens om att gå tillbaka till grunderna är ibland nödvändig för att granska vår grundläggande kunskap om ett ämne. Faktum är att vi ofta saknar några av de grundläggande grejerna, eftersom vi tenderar att vara mer imponerade av fantastiska (och galna) saker som detta.

Slutligen har jag lämnat en demo och källfil för att du ska kunna undersöka vår diskussion i den här artikeln vidare.

• demo
• Hämta källa

Jag hoppas att du gillar det här inlägget och om du hittar några felaktigheter i det, eller jag har missat några viktiga punkter, tveka inte att meddela mig i kommentarfältet nedan.