CSS => Structuur en opmaak van een CSS-regel

Opmerkingen

Houd voor alle leesbaarheid alle verklaringen één niveau ingesprongen vanaf hun selector en de afsluitende accolade op zijn eigen regel. Voeg een spatie toe na selectors en dubbele punten en plaats altijd een puntkomma na de laatste verklaring.

Mooi zo

p {
    color: maroon;
    font-size: 16px;
}

Slecht

p{
 color: maroon;
font-size:16px }

Oneliner

Als er slechts één of twee verklaringen zijn, komt u er misschien mee weg. Niet aanbevolen voor de meeste gevallen. Wees altijd consistent wanneer mogelijk.

p { color: maroon; font-size: 16px; }

Regels, selectors en declaratieblokken

Een CSS- regel bestaat uit een selector (bijvoorbeeld h1 ) en declaratieblok ( {} ).

h1 {}

Onroerendgoedlijsten

Sommige eigenschappen kunnen meerdere waarden aannemen, gezamenlijk bekend als een eigenschappenlijst .

/* Two values in this property list */
span {
    text-shadow: yellow 0 0 3px, green 4px 4px 10px;
}

/* Alternate Formatting */
span {
    text-shadow:
        yellow 0 0 3px,
        green 4px 4px 10px;
}

Meerdere selectors

Wanneer u CSS-selectors groepeert, past u dezelfde stijlen toe op verschillende elementen zonder de stijlen in uw stijlblad te herhalen. Gebruik een komma om meerdere gegroepeerde selectors te scheiden.

div, p { color: blue }

De blauwe kleur is dus van toepassing op alle elementen <div> en alle elementen <p> . Zonder de komma zouden alleen <p> elementen die een kind zijn van een <div> rood zijn.

Dit geldt ook voor alle soorten selectors.

p, .blue, #first, div span{ color : blue }

Deze regel is van toepassing op:

<p>
elementen van de blue klasse
element met de ID first
elke <span> binnen een <div>

Modified text is an extract of the original Stack Overflow Documentation

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

CSS
Structuur en opmaak van een CSS-regel

Zoeken…