Gennemgang af CSS Style Priority Level
Cascading Style Sheet (CSS) er efter min opfattelse det enkleste sprog sammenlignet med andre web-relaterede sprog, så det er ikke overraskende at finde mange mennesker, der lige begynder at lære at oprette en hjemmeside, for det meste vil lære dette sprog og HTML først.
I dette indlæg vil vi gå tilbage til CSS basics. Vi skal gennemgå, hvordan CSS-stilarterne oprindeligt anvendes, hvilke stilarter der skal anvendes, hvordan nogle stilarter erklærer overskriv hinanden, mens andre ikke gør det.
Så dette indlæg er specielt dedikeret til begyndere, der lige er begyndt at tage fat på udfordringerne, der sandsynligvis stadig laver fejl og fejl, når de udarbejder deres første stilark. Så lad os bare komme i gang.
Standard Browser Styles
Firefox, Chrome, Safari, Opera og Internet Explorer er i øjeblikket de fem bedste desktop-browsere på markedet. Disse browsere og alle andre browsere følger en standardregel for at inkludere indbyggede standardstile for at gøre HTML-elementerne.
Så når vi lægger nogle tilfældige HTML-elementer ind, uden at der er tilføjet nogen stilarter, vil du se, at den stadig er korrekt gengivet i browseren.
Men hvis vi inspicerer disse elementer omhyggeligt, har hver browser (lidt) forskellige værdier for deres “Standard” erklæring, der forårsager uoverensstemmelse på tværs af browsere, især i den gamle som IE6, 7 og Firefox 3.0.
For eksempel, som du kan se fra ovenstående screenshot, gav den nyeste Firefox den blockquote som standard med margin: 16px 40px 16px 40px, mens på den anden side den Internet Explorer 7 vil gøre blockquote med margen: 0px 40px.
For at overvinde de uoverensstemmelser, der er vist ovenfor, foretrækker mange webdesignere og udviklere at overskrive alle disse stilarter med CSS Reset. Denne CSS-fil indeholder generelt næsten alle HTML Type selektorer, definere dem med lige regler.
Der er mange CSS reset til rådighed, men her er mine top tre favoritter:
- Normalize.css
- CSS Reset
- HTML5 Reset Stylesheet
vælgere
Du læser sandsynligvis ofte dette udtryk på tværs af webdesign / udvikling blogs du besøgte; vælgere.
Selektoren i CSS er den syntaks, der bruges til at målrette mod alle dele på HTML-dokumentet for de stilarter, der skal anvendes. Der er tre grundlæggende selektorer, vi skal diskutere her, da de sandsynligvis vil være de fælles selektorer, der anvendes på din første hjemmeside. Vi dækker andre i fremtidige indlæg.
Type vælger
Vi har nævnt en gang ovenfor, typen vælger vil målrette mod bestemte specificerede HTML-elementer på dokumentet. For eksempel:
p / ** erklæring ** /
vil matche alle de p eller den afsnit elementer og brug af det vil til sidst overskrive standard stilarter givet fra browsere.
Klasse vælger
Når du har tilføjet en klasse eller endog mange klasser til et element, kan du også målrette mod disse klasser. Det Klasse vælger begynder med a punktum parameter.
.boks / ** erklæring ** /
Ovennævnte stykke vil matche alle elementer, der har bokseklassen, eller vi kan også vælge mere specifikt.
p.box / ** deklaration ** /
Det vil kun målrette mod p element, der har boks klasse.
Når vi bruger klasse selector, alle de samme stilarter deklaration fra begge Type vælger og Standardbrowser vil blive overskrevet.
ID vælger
Det ID er en meget restriktiv attribut, vi kan kun have en id på et element, og det skal også være unikt.
Indhold
Hvis vi har en id i et element kan vi bruge id vælger at målrette mod det element id vælgeren er defineret med en hash # parameter.
#uniqueID / ** erklæring ** /
Siden ID er unik, den har det stærkeste prioritetsniveau af typen vælger. Så når vi erklærer stilarter med ID vælgeren vil det i sidste ende overskrive den samme erklæring fra klasse, Type selektorer og Standardbrowser stilarter.
Indlejring af stilarter
Vi er kommet igennem alle de grundlæggende grundlæggende selektorer, og nu vil vi undersøge, hvordan disse stilarter er indlejret i et HTML-dokument.
Eksterne stilarter
Eksterne stilarter er de stilarter, der tilføjes i en separat fil, normalt i en .css fil, som derefter er knyttet til HTML-dokumentet ved hjælp af tag til at anvende disse stilarter.
Og alle de stilarter, der er angivet i filerne, vil opføre sig som det vi har nævnt i vælgere afsnit ovenfor, det vil hovedsagelig overskrive standardwebbrowseren stil og overskrive til en anden stildeklaration afhængigt af prioriteringsniveauet for vælgerne.
Denne praksis er den mest anbefalede måde at vedhæfte stilarterne, især når du har tusindvis af linjer af CSS-koder med mange sider, der skal vedhæftes til.
Ved at gøre det vil stilarterne også være lette at håndtere, for eksempel kan du adskille CSS-filerne i flere filer afhængigt af dens specifikke rolle, såsom typografi.css til at styre alle stilarter relateret til typografi og så videre.
Interne stilarter
De interne stilarter er de stilarter, der er indlejret direkte i et HTML-dokument, generelt inde i tag.
Men denne praksis anbefales ikke, når du vil have hundredvis af stilarter, da din HTML-side vil være for lang, og stilen vil kun påvirke, hvor stilarterne er indlejret. Når du har ladet sige ti sider, skal du kopiere disse stilarter og indlejre dem på alle siderne, og når du skal ændre stilarterne, skal du ændre det til ti forskellige sider, hvilket naturligvis er en kedelig opgave..
Baseret på prioriteringsniveauet er den interne stil højere, så den overskriver de eksterne stilarter.
Inline Styles
Inline-stilarter er de stilarter, der er integreret direkte i HTML-elementet.
Dette er et afsnit
Dette eksempel ovenfor vil tilføje 5px margin til stykkeelementet, og det overskriver også de margener, der er erklæret for det pågældende element, både i interne og eksterne stilarter.
Men undgå at gøre dette, da din markering vil være rodet med alle disse stilerklæringer; hvis du har en masse stilarter indlejret, vil det endda blive et mareridt at se og vedligeholde alle dine html og stilarter.
Yderligere læsning: Tre måder at indsætte CSS - W3CSchools på.
Den vigtige regel
Der er nogle omstændigheder, når vi skal anvende en bestemt stil til et element, men den samme stil for det element er også blevet erklæret andetsteds i stilarket eller i dokumentet. For eksempel:
Vi har følgende anker tag med indlejrede stilarter
Dette er et link
Og vi har også en separat stil til den anker tag i stilarket.
en border: 1px solid # 333; baggrundsfarve: # 555;
I dette eksempel kan vi bruge !vigtig Regel for at tvinge browseren til at bruge stilarterne i stilarket i stedet for den i elementet.
en border: 1px solid # 333! vigtig; baggrundsfarve: # 555! vigtigt;
Det !vigtig reglen vil indikere, at denne stil er mest vigtig og skal anvendes over den anden stil, selv når den er direkte indlejret i elementet (Inline stilarter).
Yderligere læsning:! vigtige CSS-erklæringer: Hvordan og hvornår skal de bruges - Smashing Magazine.
Konklusion
Vi har gennemgået hele emnet i denne artikel. Vi kan se nu, at hver vælger og den måde, vi indlejrer stilarterne, har forskellige prioritetsniveauer i browserens mekanisme. Som jeg har nævnt tidligere, er disse emner beregnet til novice niveauer, så de er bestemt ikke noget nyt for erfarne webdesignere.
Men jeg tror, at alle webdesignere generelt vil være enige om at gå tilbage til det grundlæggende, er nogle gange nødvendigt at gennemgå vores grundlæggende kendskab til et emne. Faktisk savner vi ofte nogle af de grundlæggende ting, da vi plejer at være mere imponerede over awesome (og skøre) ting som dette.
Endelig har jeg fremlagt en demo og kildefil for at undersøge vores diskussion i denne artikel yderligere.
- Demo
- Download kilde
Jeg håber du nyder dette indlæg, og hvis du finder nogle unøjagtigheder i det, eller jeg har gået glip af nogle vigtige punkter, tøv ikke med at underrette mig i kommentarfeltet nedenfor.
