CSS/Unità di misura, ereditarietà e box model: differenze tra le versioni

Wikibooks, manuali e libri di testo liberi.
< CSS
Contenuto cancellato Contenuto aggiunto
Ramac (discussione | contributi)
m →‎Colori: correzione
Ramac (discussione | contributi)
m →‎Ereditarietà: sistemazione paragrafo
Riga 71: Riga 71:


==Ereditarietà==
==Ereditarietà==
Nei fogli di stile l'ereditarietà, come suggerisce la parola, si verifica quando, definito uno stile per un elemento HTML, a tutti i suoi elementi figli (cioè contenuti anche indirettamente in esso) verrà applicato lo stesso stile (si dice che la proprietà viene ''ereditata''). Non tutte le proprietà sono ereditabili.
Nei fogli di stile l'ereditarietà, come suggerisce la parola, si verifica quando, definito uno stile per un elemento HTML, a tutti i suoi elementi figli (cioè contenuti anche indirettamente in esso) verrà applicato lo stesso stile (si dice che la proprietà viene ''ereditata'').


Per esempio, se all'elemento <code>&lt;body&gt;</code> applichiamo un colore rosso tramite la dichiarazione <code>color: red</code>, tutti i suoi elementi discendenti (quindi tutti gli elementi della pagina) erediteranno questa proprietà, a meno chè non venga impostato diversamente ''inline'' dal singolo elemento tramite l'attributo <code>style</code>, che ha una maggiore specificità.
Per esempio, se all'elemento <code>&lt;body&gt;</code> applichiamo un colore rosso tramite la dichiarazione <code>color: red</code>, tutti i suoi elementi discendenti (quindi tutti gli elementi della pagina) erediteranno questa proprietà, a meno che non venga stabilito diversamente nelle dichiarazioni di altri elementi discendenti del tag <code>body</code>. Infatti l'ereditarietà è l'ultima possibilità per attribuire uno stile ad un elemento.


Non tutte le proprietà sono ereditabili: non avrebbe senso, ad esempio, forzare l'ereditarietà delle dimensioni di un elemento o i suoi margini, in quanto sono normalmente diversi per ogni singolo elemento; saranno invece ereditate proprietà che rendano la pagina omogenea, come appunto il colore o le dimensioni del testo.
Per forzare l'ereditarietà di una proprietà per una particolare dichiarazione, è possibile usare il valore speciale '''inherit''' (eredita), che è un valore valido per qualsiasi proprietà.

Per forzare l'ereditarietà di una proprietà per una particolare dichiarazione, è possibile usare il valore speciale '''inherit''' (eredita), che è un valore valido per qualsiasi proprietà e imposta il valore dell'elemento appena genitore.


== Il box model ==
== Il box model ==

Versione delle 13:51, 8 lug 2007

Indice del libro

Parleremo in questa pagina di alcune delle proprietà più importanti delle pagine di stile, ovvero le unità di misura, la definizione dei valori, il concetto di ereditarietà e i box.

Definire i valori

In alcuni casi, una proprietà accetta solo valori definiti tra una serie di parole chiave; negli altri casi il CSS accetta diversi di valori.

Numeri interi e reali

I numeri devono essere indicati senza separatori per le migliaia, usando un punto (.) come separatore decimale. È possibile inoltre specificare il segno del numero (+ o -) anche se la maggior parte delle volte non serve in quanto molte proprietà accettano solo valori positivi.

Grandezze

Le grandezze sono usate per definire lunghezze orizzontali e verticali. e sono espresse da un numero (intero o reale) seguito da una unità di misura.

Le principali unità di misura si dividono in:

  • relative: specificano una grandezza che dipende da un'altra grandezza. Sono:
    • em: è relativa all'altezza font in uso. Se, ad esempio, il font è alto 12pt, 1em varrà 12pt, 2em varranno 24pt.
    • ex: funziona come em, ma è relativa all'altezza della lettera x nel set di caratteri in uso.
    • px: pixel, sono relativi al dispositivo di output (solitamente lo schermo) e alle impostazioni del computer dell'utente
  • assolute: le unità di misura assolute sono equivalenti a quelle usate nella realtà. Sono:

Percentuale

I valori in percentuale servono per esprimere percentuali del valore che assume la proprietà stessa dell'elemento padre e vanno espresse con un numero seguito dal simbolo di percentuale (%)

URI

I valori uri specificano un percorso assoluto (es. http://esempio/dir/file) oppure uno relativo (nell'esempio di prima, dir/file).
I valori URI vanno usati tramite la notazione url(percorso). percorso può essere delimitato da apici (').

Stringhe

Le strighe sono delle sequenze alfanumeriche di caratteri, ovvero del testo.
In CSS vanno delimitate da una coppia di virgolette singole o doppie, finendo con lo stesso apice con cui si è iniziato. Ad esempio:

'questa è una stringa'
"questa anche"
'questa no (è chiusa in modo scorretto)"

Nel caso si voglia inserire in una stringa delimitata, ad esempio, da apici un apice è necessario usare il carattere di commutazione \ (barra retroversa). Ad esempio:

'questa non è una 'stringa'
'questa invece è una \'stringa'

Colori

Un colore può essere identificato con tre metodi differenti:

  • tramite un numero esadecimale che indica le componenenti RGB. Per una lista completa dei colori esadecimali, vedi la tavolozza dei colori
  • tramite la funzione
rgb (<rosso>, <verde>, <blu>)

dove <rosso>, <verde> e <blu> sono le componenti RGB del colore espresse con un valore intero da 0 a 255.

  • tramite una delle parole chiave predefinite, che sono:
  •     black
  •     silver
  •     gray
  •     white
  •     maroon
  •     red
  •     purple
  •     fuchsia
  •     green
  •     lime
  •     olive
  •     yellow
  •     navy
  •     blue
  •     teal
  •     aqua
  • tramite un colore associato alle proprietà di sistema. Ad esempio:
  •     bakground (il colore di sfondo del desktop)
  •     buttonFace (il colore di sfondo dei pulsanti)
  •     buttonText (testo dei pulsanti)
  •     captionText (testo delle etichette)
  •     grayText (testo disabilitato)

Ereditarietà

Nei fogli di stile l'ereditarietà, come suggerisce la parola, si verifica quando, definito uno stile per un elemento HTML, a tutti i suoi elementi figli (cioè contenuti anche indirettamente in esso) verrà applicato lo stesso stile (si dice che la proprietà viene ereditata).

Per esempio, se all'elemento <body> applichiamo un colore rosso tramite la dichiarazione color: red, tutti i suoi elementi discendenti (quindi tutti gli elementi della pagina) erediteranno questa proprietà, a meno che non venga stabilito diversamente nelle dichiarazioni di altri elementi discendenti del tag body. Infatti l'ereditarietà è l'ultima possibilità per attribuire uno stile ad un elemento.

Non tutte le proprietà sono ereditabili: non avrebbe senso, ad esempio, forzare l'ereditarietà delle dimensioni di un elemento o i suoi margini, in quanto sono normalmente diversi per ogni singolo elemento; saranno invece ereditate proprietà che rendano la pagina omogenea, come appunto il colore o le dimensioni del testo.

Per forzare l'ereditarietà di una proprietà per una particolare dichiarazione, è possibile usare il valore speciale inherit (eredita), che è un valore valido per qualsiasi proprietà e imposta il valore dell'elemento appena genitore.

Il box model

Per box model si intende l'insieme delle regole per la definizione degli stile degli elementi blocco. Ogni box comprende alcuni elementi di base:

  • un'area del contenuto vero e proprio (il testo, un'immagine, ecc...), di cui è possibile definire l'altezza e la larghezza (width e height)
  • un padding, ossia uno spazio vuoto tra il contenuto e il bordo dell'elemento
  • un bordo (border), del quale è possibile impostare colore, stile e spessore
  • un margine (margin) che identifica uno spazio intercorrente tra l'elemento e gli altri elementi presenti nella pagina. Nel caso di due box con margini allineati in verticale, la loro distanza sarà data dalla somma dei due margini. Se sono allineati orizzontalmente, intervegono le regole del margin collapsing e la distanza effettiva tra i due elementi sarà pari al valore del margine maggiore.

L'altezza e la larghezza effettive di un elemento saranno quindi date dalla somma delle dimensioni del contenuto orizzonti/veritcali (width e height), dal valore del padding orizzontale/verticale e dallo spessore dei bordi orizzontali/verticali.