Guida ai fogli di stile CSS - Corso base - Capitolo 2: regole e selettori, unità di misura, commenti.

Capitolo 2: La struttura delle istruzioni CSS: regole, selettori. Le unità di misura. I commenti. Un primo esempio: altezza e larghezza. Raggruppamento dei selettori.

Un foglio di stile è un documento in chiaro (modificabile con qualsiasi editor di testo, anche il semplice Blocco Note) contenente REGOLE ed eventuali COMMENTI.

Le regole, come suggerisce il nome, definiscono aspetti e proprietà degli elementi della pagina.

Sono così definite:

selettore {

proprietà1: valore1;

proprietà2: valore2;

...

}

Il selettore è un elemento della pagina, come ad esempio il testo h1, i paragrafi P, l'intero Body o anche una determinata classe di elementi (vedremo, nell'ultimo capitolo, cosa sono le classi CSS e che potenzialità offrono).

All'interno del blocco del selettore, delimitato dalle parentesi graffe { } (tutte le istruzioni poste all'interno di queste parentesi si riferiranno al selettore), abbiamo le dichiarazioni, composte da coppie proprietà-valore.

Le proprietà definiscono aspetti dell'elemento da modificare, come il colore, il bordo, le dimensioni. Tra il nome della proprietà ed il valore ad essa associato va sempre posto il simbolo : (due punti), mentre ogni dichiarazione deve terminare con il simbolo ; (punto e virgola).

I valori delle proprietà vanno messi tra virgolette SOLO SE si tratta di stringhe di testo o nomi di font.

Se i valori esprimono quantità numeriche provviste di unità di misura, tra il valore e la sigla dell'unità di misura non devono esserci spazi; scriveremo quindi, ad esempio, 14cm, 10px, ecc....

...già, ma quali sono le unità di misura riconosciute dai CSS ?

A seconda dei casi (dimensioni, colori, valori URL, tempo, ...), avremo un determinato "set" di unità di misura; per le dimensioni, abbiamo:

Vedremo in seguito come definire i colori e come trattare gli URL.

Esistono anche unità di misura per gli angoli:

• deg (degree, gradi);
• grad (gradians);
• rad (radians, radianti);

per il tempo (usate negli stili audio):

• s (secondi);
• ms (millisecondi);

e per le frequenze (usate negli stili audio):

• hz (Hertz);
• khz (KiloHertz).

Come anticipato, è possibile inserire dei commenti nei documenti CSS; l'utilizzo dei commenti semplifica la comprensione del foglio di stile in caso di documenti particolarmente lunghi o articolati.

I commenti vengono "aperti" con il simbolo:

/*

e "chiusi" con il simbolo:

*/

per cui tutto ciò che si trova tra questi segni verrà ignorato dal browser; es.:

body {

/* Riga di commento, ignorata dal browser. */

}

 

Abbiamo visto come definire, per ogni selettore, gruppi di dichiarazioni (proprietà-valore); in caso di gruppi di dichiarazioni identiche per più selettori, è possibile "raggruppare" le regole, scrivendo i nomi dei selettori separati da virgole ed associando loro un unico gruppo di dichiarazioni, ad es.:

h1, h2, h3: {

color: yellow;

}

imposterà il giallo come colore di scrittura per i blocchi h1, h2 e h3.

Prima di concludere questo capitolo, vediamo come impostare delle proprietà comuni a (quasi) tutti gli elementi il cui aspetto è gestibile mediante CSS: le dimensioni.

Iniziamo con l'altezza, che in genere è definita automaticamente, per un elemento, in base al suo contenuto, ma che può essere "forzata" ad assumere dimensioni fisse, minime o massime; ecco le proprietà che riguardano questo argomento:

• height : [vari valori possibili, vd. sotto]

Proprietà che determina l'altezza di un elemento, non applicabile a colonne di tabelle ed elementi inline.

I valori possibili sono: valori numerici con unità di misura, valori in percentuale, il valore "auto" (automatico: l'altezza verrà determinata dal contenuto); es.: height: 80%; height: 100px; ...

 

• min-height : [vari valori possibili, vd. sotto]

Proprietà che imposta un'altezza minima per l'elemento, che verrà rispettata anche in caso di elemento vuoto o con contenuto di dimensione inferiore a quella specificata da min-height.

I valori possibili sono: valori numerici con unità di misura e valori in percentuale; es.: min-height: 30%; min-height: 2cm; ...

 

• max-height: [vari valori possibili, vd. sotto]

Simile a min-height, anche per i valori possibili, ma imposta la dimensione massima.

 

Riguardo l'altezza degli elementi, va citata anche la proprietà:

• overflow: visible | hidden | scroll | auto

che definisce come "comportarsi" nel caso in cui il contenuto di un elemento superi i limiti imposti per l'altezza dello stesso mediante height o max-height: con visible, viene mostrato il contenuto eccedente (problematico !); con hidden, il contenuto eccedente verrà nascosto; con scroll, verranno mostrate delle barre di scorrimento che permetteranno di scorrere il contenuto (scelta consigliata); con auto, il tutto verrà affidato al browser (in genere, ciò significherà "scroll").

In maniera del tutto analoga, esistono le proprietà:

• width: [stesse possibilità di height]
• min-width: [stesse possibilità di min-height]
• max-width: [stesse possibilità di max-height]

che permettono di definire, quindi, la larghezza "di base", la larghezza minima e la larghezza massima di un elemento; es: min-width: 100px; max-width:300px;

Da notare che overflow ha senso solo con l'altezza, per questo non ne esistono versioni separate per height e width.