Livello di difficoltà: |
|
I Css, Cascade style sheets, che in italiano significa fogli di stile a cascata, sono una tecnologia per migliorare le proprie pagine Web. Sono stati implementati dal W3 Consorzium nella quarta versione di Html.
|
| |
Specificare una linea grafica uniforme al sito
Cascade style sheets
Come si spiegava nel passo dedicato ai background, il layout di un sito puo' risultare un punto essenziale per la realizzazione di un sito veramente professionale. I Css, possono aiutare i webmasters in tutto cio':
Right margin
Imposta il margine destro di un certo elemento. Se espresso in percentuale esso viene calcolato rispetto alla larghezza dell'elemento superiore. Sono ammessi anche valori negativi.
p { margin-right: 20% }
Left margin
Definisce il margine sinistro di un certo elemento. Se espresso in percentuale esso viene calcolato rispetto alla larghezza dell'elemento superiore. Sono ammessi anche valori negativi.
p { margin-left: 30% }
Top margin
Specifica il margine superiore di un certo elemento. Se espresso in percentuale esso viene calcolato rispetto alla larghezza dell'elemento superiore. Sono ammessi anche valori negativi.
p { margin-top: 40% }
Bottom margin
Attribuisce il margine inferiore a un certo elemento. Se espresso in percentuale esso viene calcolato rispetto alla larghezza dell'elemento superiore. Sono ammessi anche valori negativi.
p { margin-bottom: 10px }
Margin
Definisce tutti i margini di un elemento. Se espresso in percentuale esso viene calcolato rispetto alla larghezza dell'elemento superiore. Sono ammessi anche valori negativi.
Se specificati 4 valori, si intendono rispettivamente: il margine superiore, destro, inferiore, sinistro. Se ne vengono attribuiti solo 2 o 3, i valori omessi erediteranno il valore del lato a essi opposto. Se altresi' ne venisse indicato uno solo, tale valore varra' per tutti e quattro i lati.
p { margin: 5pt 7pt }
Right padding
Imposta lo spazio necessario tra il lato destro di una box e l'elemento in essa contenuta. In questo caso pero', non sono permessi valori negativi.
p { padding-right: 2ex }
Left padding
Definisce lo spazio necessario tra il lato sinistro di una box e l'elemento in essa contenuta. In questo caso pero', non sono permessi valori negativi.
p { padding-left: 5% }
Top padding
Definisce lo spazio necessario tra il lato superiore di una box e l'elemento in essa contenuta. In questo caso pero', non sono permessi valori negativi.
p { padding-top: 10em }
Bottom padding
Definisce lo spazio necessario tra il lato inferiore di una box e l'elemento in essa contenuta. In questo caso pero', non sono permessi valori negativi.
p { padding-bottom: 2px }
Padding
Definisce lo spazio necessario tra tutti i lati di una box e l'elemento in essa contenuta. In questo caso pero', non sono permessi valori negativi. Se specificati 4 valori, si intendono rispettivamente: il margine superiore, destro, inferiore, sinistro. Se ne vengono attribuiti solo 2 o 3, i valori omessi erediteranno il valore del lato a essi opposto. Se altresi' ne venisse indicato uno solo, tale valore varra' per tutti e quattro i lati.
p { padding: 2px 6px 4 px 5px }
Border left width
Imposta lo spessore del bordo sinistro. Non sono ammessi valori negativi. I valori che puo' assumere sono:
thin fine.
medium medio. (default)
thick grosso.
oppure altre unita' di misura come pixel, centimetri ecc.
Per esempio:
p { border-left-width: medium }
Border right width
Imposta lo spessore del bordo destro. Non sono ammessi valori negativi. I valori che puo' assumere sono:
thin fine.
medium medio. (default)
thick grosso.
oppure altre unita' di misura come pixel, centimetri ecc.
Per esempio:
p { border-right-width: thin }
Border top width
Definisce lo spessore del bordo superiore. Non sono ammessi valori negativi. I valori che puo' assumere sono:
thin fine.
medium medio. (default)
thick grosso.
oppure altre unita' di misura come pixel, centimetri ecc.
Per esempio:
p { border-left-width: thick }
Border bottom width
Stabilisce lo spessore del bordo inferiore. Non sono ammessi valori negativi. I valori che puo' assumere sono:
thin fine.
medium medio. (default)
thick grosso.
oppure altre unita' di misura come pixel, centimetri ecc.
Per esempio:
p { border-bottom-width: medium }
Border width
Imposta lo spessore di tutti i bordi. Non sono ammessi valori negativi. Se specificati 4 valori, si intendono rispettivamente: il margine superiore, destro, inferiore, sinistro. Se ne vengono attribuiti solo 2 o 3, i valori omessi erediteranno il valore del lato a essi opposto. Se altresi' ne venisse indicato uno solo, tale valore varra' per tutti e quattro i lati. I valori che puo' assumere sono:
thin fine.
medium medio.
thick grosso.
oppure altre unita' di misura come pixel, centimetri ecc.
Per esempio:
p { border-width: medium }
Border left color
Imposta il colore del bordo sinistro. Per esempio:
p { border-left-color: yellow }
Border right color
Imposta il colore del bordo destro. Per esempio:
p { border-right-color: black }
Border top color
Imposta il colore del bordo superiore. Per esempio:
p { border-left-color: green }
Border bottom color
Imposta il colore del bordo inferiore. Per esempio:
p { border-bottom-color: white }
Border left style
Imposta come il bordo sinistro che delimita la box deve essere visualizzato. I valori che puo' assumere sono:
none nessun bordo. (default)
dashed linea sfumata.
double linea doppia.
dotted linea tratteggiata.
solid linea continua.
ridge linea sporgente.
groove linea scavata.
ouset effetto 3D sporgente che utilizza i colori indicati dall'attributo color
inset effetto 3D scavato che utilizza i colori indicati dall'attributo color
Per esempio:
p { border-left-style: dashed }
Border right style
Specifica come il bordo destro che delimita la box deve essere visualizzato. I valori che puo' assumere sono:
none nessun bordo. (default)
dashed linea sfumata.
double linea doppia.
dotted linea tratteggiata.
solid linea continua.
ridge linea sporgente.
groove linea scavata.
ouset effetto 3D sporgente che utilizza i colori indicati dall'attributo color
inset effetto 3D scavato che utilizza i colori indicati dall'attributo color
Per esempio:
p { border-right-style: dashed }
Border top style
Imposta come il bordo superiore che delimita la box deve essere visualizzato. I valori che puo' assumere sono:
none nessun bordo. (default)
dashed linea sfumata.
double linea doppia.
dotted linea tratteggiata.
solid linea continua.
ridge linea sporgente.
groove linea scavata.
ouset effetto 3D sporgente che utilizza i colori indicati dall'attributo color
inset effetto 3D scavato che utilizza i colori indicati dall'attributo color
Per esempio:
p { border-top-style: dashed }
Border style
Definisce come tutti i bordi che delimitano la box devono essere visualizzati.
Imposta lo spessore di tutti i bordi. Se specificati 4 valori, si intendono rispettivamente alla distanza del lato superiore, destro, inferiore, sinistro. Se ne vengono attribuiti solo 2 o 3, i valori omessi erediteranno il valore del lato a essi opposto. Se altresi' ne venisse indicato uno solo, tale valore varra' per tutti e quattro i lati
I valori che puo' assumere sono:
none nessun bordo. (default)
dashed linea sfumata.
double linea doppia.
dotted linea tratteggiata.
solid linea continua.
ridge linea sporgente.
groove linea scavata.
ouset effetto 3D sporgente che utilizza i colori indicati dall'attributo color
inset effetto 3D scavato che utilizza i colori indicati dall'attributo color
Per esempio:
p { border-style: groove }
Pagina successiva ->
Clicca per proseguire nella lettura dell'articolo
|
