📁
Forum per Webmaster
CSS

Sintassi CSS

Scopriamo la sintassi del css formata dal selettore e dalle regole composte da coppie proprietà-valore

Qual'è la sintassi che regola i css? Per esempio, in che modo è possibile definire tramite i css come debbano essere il testo e il colore di un paragrafo?

p { color: red;}

Come applicare una determinato colore di sfondo e togliere il margine a tutti i titoli h1?

h1 { background-color: yellow; margin: 0; }

Come il css definisce che h1 ed h2 debbano avere padding nullo?

h1, h2 { padding: 0; }

Come si denota dagli esempi la regola è abbastanza semplice e intuitiva da comprendere a chi ha un minimo di domestichezza con l’html. Prendendo per esempio la seguente regola di stile:

p { color : red; }

Si denotano tre elementi, i quali tecnicamente sono definiti con i termini di:

selettore (nell’esempio è “p”)

proprietà (nell’esempio è “color”)

valore (nell’esempio è “red”)

Si denota inoltre che la regola è divisa in due parti: Il selettore posto all’inizio e il blocco delle dichiarazioni in successione racchiuso tra parentesi graffe.
Il blocco delle dichiarazioni è un insieme di dichiarazioni formate da coppie proprietà e valore.
Ogni coppia proprietà e valore, è separata dal carattere di due punti (“:”) e termina con il punto e virgola (“;”): Ogni dichiarazione assegna una determinata caratteristica agli elementi indicati dal selettore.
Per ciascun selettore è possibile stabilire più regole, come anche il selettore può indicare più tipi di elementi che compongono la pagina.

Ogni regola può venire scritta sia stando sulla stessa riga, oppure andando a capo ad ogni elemento. L’andare a capo per il CSS è semplicemente ignorato e ha una funzione solo di chiarezza e ordine visivo che colui che scrive il foglio di stile. Con l’esempio che segue, definiamo le dimensioni in pizze per i quattro bordi del paragrafo (html tag “p”):

p{
  margin-top: 0;
  margin-right: 4px;
  margin-bottom: 6px;
  margin-left: 10px;
}

Come vedete, ognuna delle quattro dichiarazioni finisce con il punto e virgola (“;”) ed il fatto che siano disposte ognuna su una riga assestante, è solamente una questione di ordine visivo, detto anche – da chi del mestiere – identazione.
In talune situazioni è possibile definire delle regole che riassumono in un unico passaggio altre, come nel caso:

p {
  margin: 0 4px 6px 10px;
}

In questo esempi, una semplice regola definisce esattamente ciò che veniva definito dalle quattro regole dell’esempio precedente. I valori 0, 4px, 6px e 10px sono definiti rispettivamente per i lati superiore, destro, basso e sinistro, in pratica una rotazione oraria partendo dall’alto.

E’ altresì possibile definire una sola regola che indichi medesime caratteristiche per i lato alto e basso, e medesime caratteristiche per i lati sinistra, destra.

p {
   margin: 5px 0;
}

Nell’esempio sopra – che si attua semplicemente indicando solo due valori – viene impostato un margine di 5px per i due lati alto e basso, e nessun margine (zero), per i lati sinistra e destra.

Nel caso in cui vangano indicati tre valori come da esempio:

p {
  margin: 4px 10px 2px;
}

essi si riferiranno rispettivamente al lato superiore, ai lati (destro e sinistro) ed al 
lato inferiore; ovvero equivale all’annotazione: p {margin: 4px 10px 2px 10px;}, in pratica il secondo valore accorpa i margini laterali destro e sinistro.

 

Argomenti nella stessa categoria