CSS => Struktur och formatering av en CSS-regel

Anmärkningar

För att underlätta läsbarheten ska du hålla alla deklarationer indragna en nivå från deras väljare och den stängande lockiga stag på sin egen linje. Lägg till ett enda utrymme efter väljare och kolon, och placera alltid ett semikolon efter den slutliga deklarationen.

Bra

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

Dålig

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

One-Liner

Om det bara finns en eller två förklaringar, kan du komma undan med den här. Rekommenderas inte för de flesta fall. Var alltid konsekvent när det är möjligt.

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

Regler, väljare och deklarationsblock

En CSS- regel består av en väljare (t.ex. h1 ) och deklarationsblock ( {} ).

h1 {}

Fastighetslistor

Vissa egenskaper kan ta flera värden, gemensamt kända som en egenskapslista .

/* 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;
}

Flera väljare

När du grupperar CSS-väljare tillämpar du samma stilar på flera olika element utan att upprepa stilarna i ditt formatmall. Använd ett komma för att skilja flera grupperade väljare.

div, p { color: blue }

Så den blå färgen gäller för alla <div> -element och alla <p> -element. Utan komma skulle bara <p> element som är ett barn till en <div> vara röda.

Detta gäller även alla typer av väljare.

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

Denna regel gäller för:

<p>
delar av den blue klassen
element med ID first
varje <span> inuti en <div>

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

CSS
Struktur och formatering av en CSS-regel

Sök…