CSS/Regole e sintassi: differenze tra le versioni

Contenuto cancellato Contenuto aggiunto
Ramac (discussione | contributi)
Ramac (discussione | contributi)
spostamento unità di misura
Riga 60:
 
All'interno di un foglio di stile è possibile inserire dei commenti, ossia porzioni di testo che verranno ignorate dal browser, delimitati da ''/*'' e ''*/'', che si possono estendere su una o più righe.
 
=== 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 <code>x</code> 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''': [[w:Pollice (unità di misura)|pollici]]; un pollice vale circa 2.54 centimetri
**'''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 (').
 
==== Stringhe ====
Le '''strighe''' sono delle sequenze alfanumeriche di caratteri, ovvero del testo.
<br/>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 [[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>
[[Categoria:Linguaggio CSS|Le regole e la sintassi]]