Brusende regler for CSS3

Den Cascading Style Sheets språket tillater ulike elementer for å endre hvordan en webside vises i nettleseren din. Spesifikasjonen av brusende regler satt av World Wide Web Consortium skaper en standard metode for nettleseren din for å velge hvilke stilelementer vises i nettleseren, og som ikke gjør det. Dette gir deg muligheten til å lage en egendefinert stilark som overstyrer et nettsted standard stilark, så lenge du forstår hvordan du arbeider gripende orden.

Vekt

Tre faktorer rolle når de vurderer vekten av en CSS-element: user agent, også kjent som nettleser, forfatteren av nettstedet og brukeren besøker nettstedet. W3C definerer rekkefølgen på vekt i stilelementer, med den første som den tyngste og den femte som den letteste. Først er bruker stiler merket som viktige, for eksempel "body {font-size: 18px viktig;!}."! Neste kommer forfatter stiler merket som! Viktig, etterfulgt av normal forfatter stiler, normale bruker stiler og brukeragentene stiler.

spesifisitet

Den mest spesifikke CSS element er den som vil sitte på toppen av brusende orden og visning i nettleseren. CSS spesifisitet er en noe kinkig konsept lettest uttrykt ved å se på det som en matte ligningen. Spesifisitet bestemmes av tallene: En HTML-element har en spesifisitet for ett, mens en klasse, kvasi klasse eller attributt har en spesifisitet på 10. En ID har en spesifisitet på 100, og den stilattributt har en spesifisitet på 1000. Eksempel , elementet <p> Text </ p> - uten CSS styling - har en spesifisitet på 1. Hvis du legger til en klasse - <p class = "blue"> Text </ p> - det har en spesifisitet 11; en for HTML <p> og 10 for klassen. Hvis du i stedet bruke en ID, for eksempel <p id = "title"> Tittel </ p>, er spesifisiteten 101: 1 for HTML-elementet og 100 for ID.

Bestille

Når to stilelementer - for eksempel normale stiler fra sidens forfatter med samme spesifisitet - anses ellers likt, vil det elementet som kommer senest i stilarket vinne ut. I et eksempel fra Vitaly Friedman fra Smashing Magazine, hvis du gir H1 element to forskjellige stiler i stilarket, vil den nærmest bunnen av siden vises i nettleseren.

Hvorfor det Matters

Forstå brus bestilling kan hjelpe deg å finne feil i stilarket ditt, for eksempel en utilsiktet overstyring av et element i form av spesifisitet. For eksempel, hvis på ett punkt i arket du skriver "a {color: red;}" og senere skriver du "pa {color: black;}", vil det spesifisitet sette alle dine linker i avsnitt som svart. Dette er fordi <a> bare har en spesifisitet på en, men <p> og <a> vil ha to.

Cascading For saker også for brukere som implementerer tilpassede stilark på sine nettlesere, for eksempel de som øker størrelsen på en font eller eliminere fargeelementer de misliker, slik at de kan forstå hvordan deres CSS vil overstyre forfatterens koding.