CSS => Struttura e formattazione di una regola CSS

Osservazioni

Per facilitare la leggibilità, mantenere tutte le dichiarazioni rientrate di un livello dal selettore e la parentesi graffa di chiusura sulla propria riga. Aggiungi uno spazio singolo dopo selettori e due punti e posiziona sempre un punto e virgola dopo la dichiarazione finale.

Buono

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

Male

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

One-Liner

Se ci sono solo una o due dichiarazioni, potresti farla franca con questa. Non raccomandato per la maggior parte dei casi. Sii sempre coerente quando possibile.

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

Regole, selettori e blocchi di dichiarazione

Una regola CSS è composta da un selettore (ad es. h1 ) e un blocco di dichiarazione ( {} ).

h1 {}

Elenchi di proprietà

Alcune proprietà possono assumere più valori, noti collettivamente come un elenco di proprietà .

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

Selettori multipli

Quando si raggruppano selettori CSS, si applicano gli stessi stili a diversi elementi diversi senza ripetere gli stili nel foglio di stile. Utilizzare una virgola per separare più selettori raggruppati.

div, p { color: blue }

Quindi il colore blu si applica a tutti gli elementi <div> e tutti gli elementi <p> . Senza la virgola solo gli elementi <p> che sono figli di un <div> sarebbero rossi.

Questo vale anche per tutti i tipi di selettori.

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

Questa regola si applica a:

<p>
elementi della classe blue
elemento con l'ID first
ogni <span> all'interno di un <div>

Modified text is an extract of the original Stack Overflow Documentation

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

CSS
Struttura e formattazione di una regola CSS

Ricerca…