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

Naviga nella cronologia in modo interattivo

← Differenza precedente Differenza successiva →

Contenuto cancellato Contenuto aggiunto

In linea

Versione delle 17:42, 28 apr 2007

Template:Linguaggio CSS 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:
- in: pollici; un pollice vale circa 2.54 centimetri
- cm: centimetri
- mm: millimetri
- pt: punti — un pt per CSS vale 1/72 di pollice
- pc: pica — 1 pica vale 12 punti

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

Ereditarietà

Avviene quando noi per un oggetto definiamo una proprietà, tutti i suoi elemtenti discendenti ereditarieranno quella proprietà. Non tutte le proprietà sono ereditabili.

Per esempio, se all'elemento <body> applichiamo la proprietà color:red, tutti i suoi elementi discendenti della pagina erediteranno questa proprietà, a meno chè non viene decisa inline dall'elemento stesso.

@@ Riga 1: / Riga 1: @@
 {{Linguaggio CSS}}
-Parleremo in questa pagina di alcune delle proprietà più importanti delle pagine di stile, ovvero le unità di misura, il concetto di ereditarietà e i box.
+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 ==
-==Unità di misura==
+In alcuni casi, una proprietà accetta solo valori definiti tra una serie di parole chiave; negli altri casi il CSS accetta diversi di valori.
-Le unità di misura possono essere espresse in due modi: relative e assolute. La differenza sta nel fatto che quelle assolute possono variare a seconda del browser o della macchina, a differenza di quelle relative.
+=== Numeri interi e reali ===
+I '''numeri''' devono essere indicati senza separatori per le migliaia, usando un punto (.) come separatore decimale. &Egrave; 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:
-===Assolute===
+*'''relative''': specificano una grandezza che dipende da un'altra grandezza. Sono:
-Ecco l'elenco delle unità di misura assolute:
+**'''em''': è relativa all'altezza font in uso. Se, ad esempio, il font è alto 12pt, 1em varrà 12pt, 2em varranno 24pt.
-*'''in''' pollici (inch)
+**'''ex''': funziona come em, ma è relativa all'altezza della lettera <code>x</code> nel set di caratteri in uso.
-*'''cm''' centimetri
+**'''px''': pixel, sono relativi al dispositivo di output (solitamente lo schermo) e alle impostazioni del computer dell'utente
-*'''mm''' millimetri
+*'''assolute''': le unità di misura assolute sono equivalenti a quelle usate nella realtà. Sono:
-*'''pt''' punti (1=1/72 di pollice)
+**'''in''': [[w:Pollice (unità di misura)|pollici]]; un pollice vale circa 2.54 centimetri
-*'''pc''' pica (1=12 punti)
+**'''cm''': [[w:Centimetro|centimetri]]
+**'''mm''': [[w:Millimetro|millimetri]]
+**'''pt''': [[w:Punto tipografico|punti]] — un pt per CSS vale 1/72 di pollice
+**'''pc''': [[w:Pica (unità di misura)|pica]] — 1 pica vale 12 punti
+=== 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 '''[[w:Uniform_Resource_Identifier|uri]]''' specificano un percorso assoluto (es. <nowiki>http://esempio/dir/file</nowiki>) oppure uno relativo (nell'esempio di prima, dir/file).<br/>
+I valori URI vanno usati tramite la notazione <code>url(percorso)</code>. <code>percorso</code> può essere delimitato da apici (').
-===Relative===
+=== Stringhe ===
+Le '''strighe''' sono delle sequenze alfanumeriche di caratteri, ovvero del testo.
-*'''em''' Altezza del font in uso
+<br/>In CSS vanno delimitate da una coppia di virgolette singole o doppie, finendo con lo stesso apice con cui si è iniziato. Ad esempio:
-*'''ex''' Altezza del carattere x
+ 'questa è una stringa'
-*'''px''' Pixel
+ "questa anche"
+ 'questa no (è chiusa in modo scorretto)"
-Ricordiamo che è possibile esprimere le unità di misura in percentuale rispetto alla dimensione di un elemento.
+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 [[w:RGB|RGB]]. Per una lista completa dei colori esadecimali, vedi [[Aiuto:Colori|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:
+<div style="float:left; width:49%">
+*<span style="height:1em; background-color:black; border:1px solid black; ">&nbsp;&nbsp;&nbsp;</span> black
+*<span style="width:1em; height:1em; background-color:silver; border:1px solid black;">&nbsp;&nbsp;&nbsp;</span> silver
+*<span style="width:1em; height:1em; background-color:gray; border:1px solid black;">&nbsp;&nbsp;&nbsp;</span> gray
+*<span style="width:1em; height:1em; background-color:white; border:1px solid black;">&nbsp;&nbsp;&nbsp;</span> white
+*<span style="width:1em; height:1em; background-color:maroon; border:1px solid black;">&nbsp;&nbsp;&nbsp;</span> maroon
+*<span style="width:1em; height:1em; background-color:red; border:1px solid black;">&nbsp;&nbsp;&nbsp;</span> red
+*<span style="width:1em; height:1em; background-color:purple; border:1px solid black;">&nbsp;&nbsp;&nbsp;</span> purple
+*<span style="width:1em; height:1em; background-color:fuchsia; border:1px solid black;">&nbsp;&nbsp;&nbsp;</span> fuchsia
+</div>
+<div style="float:right; width:49%">
+*<span style="width:1em; height:1em; background-color:green; border:1px solid black;">&nbsp;&nbsp;&nbsp;</span> green
+*<span style="width:1em; height:1em; background-color:lime; border:1px solid black;">&nbsp;&nbsp;&nbsp;</span> lime
+*<span style="width:1em; height:1em; background-color:olive; border:1px solid black;">&nbsp;&nbsp;&nbsp;</span> olive
+*<span style="width:1em; height:1em; background-color:yellow; border:1px solid black;">&nbsp;&nbsp;&nbsp;</span> yellow
+*<span style="width:1em; height:1em; background-color:navy; border:1px solid black;">&nbsp;&nbsp;&nbsp;</span> navy
+*<span style="width:1em; height:1em; background-color:blue; border:1px solid black;">&nbsp;&nbsp;&nbsp;</span> blue
+*<span style="width:1em; height:1em; background-color:teal; border:1px solid black;">&nbsp;&nbsp;&nbsp;</span> teal
+*<span style="width:1em; height:1em; background-color:aqua; border:1px solid black;">&nbsp;&nbsp;&nbsp;</span> aqua
+</div>
 ==Ereditarietà==