CSS3-stijlen negeren - dummies

Met overgenomen CSS3-stijlen komt de mogelijkheid om een ​​overerfde stijlregel te overschrijven. Bekijk bijvoorbeeld de volgende code om een ​​idee te krijgen van wat dit zou kunnen betekenen:

overRide. html body {kleur: rood;} p {kleur: groen;}. myClass {color: blue;} #wherColor {color: purple;} Deze div heeft alleen de stijl van het lichaam.
Dit is een gewone alinea met alinea-indeling






Deze alinea is lid van een klasse
Deze alinea is lid van een klasse en heeft een ID, beide met stijlregels.

De vraag is deze: welke kleur zal het whatColor-element weergeven? Het is een lid van het lichaam, dus het zou rood moeten zijn. Het is ook een paragraaf en de alinea's zijn groen. Het is ook lid van de myClass-klasse, dus het moet blauw zijn. Ten slotte is de naam whatColor en elementen met deze ID moeten paars zijn.

Vier ogenschijnlijk tegenstrijdige kleurregels worden allemaal op dit arme element neergezet. Welke kleur zal het zijn?

CSS heeft een duidelijk classificatiesysteem voor het omgaan met dit soort situaties. Over het algemeen overtreffen meer specifieke regels meer algemene regels. Dit is de prioriteit (van de hoogste naar de laagste prioriteit):

1. Gebruikersvoorkeur

   De gebruiker heeft altijd de uiteindelijke keuze over welke stijlen worden gebruikt. Gebruikers hoeven helemaal geen stijlen te gebruiken en kunnen de stylesheet altijd wijzigen voor hun eigen lokale exemplaar van de pagina. Als een gebruiker een speciale stijl moet toepassen (bijvoorbeeld een hoog contrast voor mensen met een visuele handicap), moet hij die optie altijd hebben.

2. Lokale stijl

   Een lokale stijl (gedefinieerd met het stijlkenmerk in de HTML) heeft de hoogste prioriteit van door ontwikkelaars gedefinieerde stijlen. Het overtreft alle andere stijlen.

3. id

   Een stijl die aan een element-ID is gekoppeld, heeft veel gewicht omdat deze andere stijlen overschrijft die in de stijlpagina zijn gedefinieerd.

4. Klasse

   Stijlen die aan een klasse zijn gekoppeld, hebben voorrang boven de stijl van het element van het object. Als u dus een alinea hebt met een groene kleur die bij een klasse blauw hoort, is het element blauw omdat klassestijlen beter zijn dan elementstijlen.

5. Element

   De elementstijl heeft voorrang op een van de containers. Als een alinea zich bijvoorbeeld in een div bevindt, heeft de alineastijl de potentie om zowel de div als de body te overschrijven.

6. Containerelement

   divs, tabellen, lijsten en andere elementen die worden gebruikt wanneer containers hun stijlen doorgeven. Als een element zich in een of meer van deze containers bevindt, kan het stijlattributen ervan erven.

7. Body

   Alles dat in de body-stijl is gedefinieerd, is een algemene standaardpagina, maar wordt door andere stijlen overschreven.

In de override. html voorbeeld, de id-regel heeft voorrang, dus de alinea wordt paars weergegeven.