Gjennomgå CSS Style Priority Level

Cascading Style Sheet (CSS) er, tror jeg, det enkleste av språk sammenlignet med andre web-relaterte språk, så det er ikke overraskende å finne mange mennesker som bare begynner å lære å lage et nettsted, vil mest lære dette språket og HTML først.

I dette innlegget vil vi gå tilbake til CSS grunnleggende. Vi skal vurdere hvordan CSS-stilene i utgangspunktet blir brukt, hvilke stiler vil gjelde, hvordan noen formaterklæringer overskriver hverandre mens andre ikke gjør det.

Så, dette innlegget er spesielt dedikert til nybegynnere som bare begynner å ta tak i utfordringene, sannsynligvis gjør det fortsatt feil og feil når de samler deres første stilark. Så, la oss bare komme i gang.

Standard nettleser stiler

Firefox, Chrome, Safari, Opera og Internet Explorer er for øyeblikket de fem beste skrivebordsbrowserne i markedet. Disse nettleserne og alle andre nettlesere følger en standardregel for å inkludere innebygde standardstiler for å gjengi HTML-elementene.

Så når vi legger inn noen tilfeldige HTML-elementer uten noen stilarter lagt til, vil du se at den fremdeles er riktig gjengitt i nettleseren.

Men hvis vi inspiserer elementet nøye, har hver nettleser (litt) forskjellige verdier for deres “misligholde” erklæring som medfører uoverensstemmelse over nettleserne, særlig i den gamle som IE6, 7 og Firefox 3.0.

For eksempel, som du kan se fra ovenstående skjermbilde, gjengis den nyeste Firefox blockquote som standard med margin: 16px 40px 16px 40px, mens på den andre siden av Internet Explorer 7 vil gjengi blockquote med margin: 0px 40px.

For å overvinne inkonsekvensene vist ovenfor, foretrekker mange webdesignere og utviklere å overskrive alle disse stilene med CSS Reset. Denne CSS-filen inneholder vanligvis nesten all HTML Type selektorer, definere dem med like regler.

Det er mange CSS reset tilgjengelig, men her er mine tre beste favoritter:

• Normalize.css
• CSS Reset
• HTML5 Reset Stylesheet

velgere

Du leser sikkert denne termen på tvers av webdesign / utviklingsbloggene du besøkte; velgere.

Selektoren i CSS er syntaksen som brukes til å målrette mot deler på HTML-dokumentet for stilene som skal brukes på. Det er tre grunnleggende valgører vi skal diskutere her, da de sannsynligvis vil være de felles selektorer som brukes på ditt første nettsted. Vi dekker andre i fremtidige innlegg.

Skriv velg

Vi har nevnt en gang over, Typevelger vil målrette mot noen spesifiserte HTML-elementer på dokumentet. For eksempel:

 p / ** erklæring ** / 

vil matche alle p eller avsnitt elementer og bruk av det vil til slutt overskrive standardstilene gitt fra nettleserne.

Klassevalg

Når du har lagt til en klasse eller til og med mange klasser til et element, kan du også målrette mot disse klassene. De Klassevalg begynner med a punktum parameter.

 .boks / ** erklæring ** / 

Ovennevnte kutt vil samsvare med alle elementene som har bokseklassen, eller vi kan også velge mer spesifikt.

 p.box / ** declaration ** / 

Det vil bare målrette mot p element som har eske klasse.

Når vi bruker Klasse selector, alle de samme stilerklæringene fra begge Type velger og Standardnettleser vil bli overskrevet.

IDvelger

De ID er en svært restriktiv egenskap, vi kan bare ha en id på et element, og det må også være unikt.

 
Innhold
 

I tilfelle vi har en id I et element kan vi bruke idvelger å målrette mot det elementet; idvelgeren er definert med en hash # parameter.

 #uniqueID / ** erklæring ** / 

Siden ID er unik, den har det sterkeste prioritetsnivået for typen väljare. Så når vi erklærer stiler med ID selector vil det til slutt overskrive all den samme erklæringen fra Klasse, Type selektorer og Standardnettleser stiler.

Embedding stilene

Vi har kommet gjennom alle de grunnleggende grunnleggende seleksjonene, og nå skal vi se på hvordan disse stilene er innebygd i et HTML-dokument.

Eksterne stiler

Eksterne stilarter er stilene som legges til i en egen fil, vanligvis i en .css fil som da er knyttet til HTML-dokumentet ved hjelp av tagg for å bruke disse stilene.

Og alle stilene deklarert i filene vil oppføre seg som det vi har nevnt i velgere seksjon over, det vil hovedsakelig overskrive standard nettleser stil og overskrive til en annen stildeklarasjon avhengig av prioritetsnivået til velgerne.

Denne praksisen er den mest anbefalte måten å legge ved stilene, spesielt når du har tusenvis av linjer med CSS-koder med mange sider å legge ved.

Ved å gjøre det, vil stilene også være lette å håndtere, for eksempel kan du skille CSS-filene i flere filer avhengig av den spesifikke rollen, for eksempel typography.css, for å kontrollere alle stilarter relatert til typografi og så videre.

Interne stiler

De interne stilene er stilene som er innebygd direkte i et HTML-dokument, vanligvis innenfor stikkord.

Men denne praksisen anbefales ikke når du vil ha hundrevis av stiler som HTML-siden din vil være for lang og stilen vil bare påvirke hvor stilene er innebygd. Når du har sagt ti sider, må du kopiere de stilene og legge dem inn på alle sidene, og når du må endre stilene må du bytte den til ti forskjellige sider, noe som åpenbart er en kjedelig oppgave..

Basert på prioriteringsnivået er den interne stilen høyere, så den vil overskrive de eksterne stilene.

Inline Styles

Inline-stiler er stilene som er direkte innebygd i HTML-elementet.

 
Dette er et avsnitt
 

Dette eksempelet ovenfor vil legge til 5px margin til avsnittet elementet, og det vil også overskrive margene som er deklarert for det elementet både i interne og eksterne stiler.

Men unngå å gjøre dette, da oppslaget ditt vil bli rotete med alle de stilerklæringene; hvis du har en rekke stiler innebygd, vil det til og med bli et mareritt å se og vedlikeholde alle dine html og stiler.

Videre lesning: Tre måter å sette inn CSS - W3CSchools.

Den viktige regelen

Det er noen omstendigheter når vi må bruke en bestemt stil for et element, men den samme stilen for det elementet har også blitt erklært andre steder i stilarket eller i dokumentet. For eksempel:

Vi har følgende ankermerke med innebygde stiler

 Dette er en lenke 

Og vi har også en egen stil for den ankermerket i stilarket.

 en border: 1px solid # 333; bakgrunnsfarge: # 555;  

I dette eksemplet kan vi bruke !viktig regel å tvinge nettleseren til å bruke stilene i stilarket i stedet for den i elementet.

 en border: 1px solid # 333! viktig; bakgrunnsfarge: # 555! viktig;  

De !viktig regelen vil indikere at denne stilen er mest viktig og må brukes over den andre stilen, selv når den er direkte innebygd i elementet (Inline Styles).

Videre lesning:! viktige CSS-erklæringer: hvordan og når du skal bruke dem - smashing magazine.

Konklusjon

Vi har kommet gjennom hele emnet i denne artikkelen. Vi kan se nå at hver velger og måten vi legger inn stilene har forskjellige prioritetsnivåer i nettleserens mekanisme. Som jeg har nevnt tidligere, er dette emnet beregnet for nybegynnernivåer, så de er definitivt ikke noe nytt for erfarne webdesignere.

Men jeg tror at alle webdesignere generelt vil være enige om at det å gå tilbake til grunnleggende er noen ganger nødvendig for å se gjennom vår grunnleggende kunnskap om et emne. Faktisk savner vi ofte noen av de grunnleggende tingene, da vi pleier å være mer imponert over fantastiske (og galne) ting som dette.

Til slutt har jeg gitt en demo og kildefil for å undersøke vår diskusjon i denne artikkelen videre.

• Demo
• Last ned kilde

Jeg håper du liker dette innlegget, og hvis du finner noe unøyaktighet i det, eller jeg har gått glipp av noen viktige punkter, ikke nøl med å varsle meg i kommentarfeltet nedenfor.