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

Contenuto cancellato Contenuto aggiunto
Shadd (discussione | contributi)
Ramac (discussione | contributi)
spostamento unità di misura
Riga 1:
{{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 ==
==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. È 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 (%)
===Assolute 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à==