Slik overstyrer du CSS3-stiler - dummier

Med arvelige CSS3-stiler kommer evnen til å overstyre en arvelig stilregel. For eksempel, ta en titt på følgende kode for å få en ide om hva dette kan bety:

overRide. html body {color: red;} p {color: green;}. myClass {color: blue;} #whatColor {color: purple;} Denne diven har bare stilen fra kroppen.
Dette er et vanlig avsnitt med avsnitt styling






Dette avsnittet er medlem av en klasse
Dette avsnittet er medlem av en klasse og har en ID, begge med stilregler.

Spørsmålet er dette: Hvilken farge vil whatColor-elementet vise? Det er et medlem av kroppen, så det skal være rødt. Det er også et avsnitt, og avsnittene er grønne. Det er også medlem av myClass-klassen, så det skal være blått. Endelig heter det whatColor, og elementene med denne IDen skal være lilla.

Fire tilsynelatende motstridende fargeregler blir alle falt på dette fattige elementet. Hvilken farge vil det være?

CSS har et klart rangeringssystem for å håndtere denne typen situasjon. Generelt, mer spesifikke regler trumf mer generelle regler. Her er forrangen (fra høyeste til laveste forrang):

1. Brukervennlighet

   Brukeren har alltid det endelige valget om hvilke stilarter som brukes. Brukere er ikke pålagt å bruke noen stiler i det hele tatt, og kan alltid endre stilarket til sin egen lokale kopi av siden. Hvis en bruker trenger å bruke en spesiell stil (for eksempel høy kontrast for personer med synshemming), bør han alltid ha det alternativet.

2. Lokal stil

   En lokal stil (definert med stilattributtet i HTML) har den høyeste forrangen til utviklerdefinerte stiler. Det overrules alle andre stiler.

3. id

   En stil festet til et element-ID har stor vekt fordi den overstyrer alle andre stilarter som er definert i stilarket.

4. Klasse

   Stiler knyttet til en klasse tilsidesetter stilen til objektets element. Så, hvis du har et avsnitt med en fargegrønn som tilhører en klasse farget blå, blir elementet blått fordi klassestiler utvider elementstiler.

5. Element

   Elementstilen har forrang over noen av dens containere. For eksempel, hvis et avsnitt er inne i en div, har avsnittet stilen potensial til å overstyre både div og kroppen.

6. Containerelement

   divs, tabeller, lister og andre elementer som brukes som containere, passerer deres stiler på. Hvis et element er inne i en eller flere av disse beholderne, kan det arve stilattributter fra dem.

7. Kropp

   Alt som er definert i kroppsstilen, er en generell sidestandard, men den blir overstyrt av andre stiler.

I overRide. html eksempel, id-regelen har forrang, så avsnittet vises i lilla.