NOTA! Questo sito utilizza i cookie e tecnologie simili.

Se non si modificano le impostazioni del browser, l'utente accetta. Per saperne di piu'

Approvo

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:

in Inches, cioè pollici, unità di misura tipica del mondo anglosassone (sconsigliata nei documenti web per via di possibili problemi con la resa su monitor).
cm Centimetri (sconsigliato nei documenti web per via di possibili problemi con la resa su monitor).
mm Millimetri (sconsigliato nei documenti web per via di possibili problemi con la resa su monitor).
pt Punti. Unità di misura tipografica.
pc Picas. 1 pc equivale a 12 punti.
em em-height. Unità di misura relativa: 1 em equivale all'altezza media di un carattere nel font scelto.
ex ex-height. 1 ex equivale all'altezza della lettera x, in minuscolo, nel font scelto.
px Pixel, unità di misura di base per i monitor, la più comune (e più facile da gestire, in caso di documenti web).
% Valori percentuali, relativi all'elemento contenitore (eventualmente, l'area della finestra del browser; es.: 10%, 50%... anche in questo caso, non bisogna separare il valore numerico dal simbolo dell'unità di misura (mai scrivere, ad esempio, 10 %, quindi).

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.

 

 
Vai all'inizio della pagina