Prorietà dei CSS
(Guida CSS)
pagina 2 di 2
Formattazione del Testo
Le proprietà del Carattere
Proprietà |
Valori |
Descrizione |
font |
(i valori devono rappresentare, nell'ordine:) "font-style font-variant font-weight font-size font-family" |
Consente di assegnare in una sola dichiarazione i valori a tutte le proprietà |
font-style |
italic, oblique |
Testo in corsivo o inclinato |
font-variant |
small-caps |
Testo in maiuscoletto Come Questo |
font-weight |
bold, bolder, lighter oppure interi da 100 a 900 |
Grassetto da applicare al carattere |
font-size |
(dal più piccolo al più grande:) xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, numero intero seguito da px, pt, em, cm, % |
Altezza del carattere |
font-family |
Nomi dei font separati da una virgola se più di uno |
Lista dei font che vengono applicati in ordine, cioè se il computer non dispone di un font si prova con quello successivo. |
Le proprietà del Paragrafo
Proprietà |
Valori |
Descrizione |
color |
Esadecimale tipo #******, oppure colore javascript. |
Imposta il colore del testo |
direction |
ltr, rtl |
Direzione di scrittura del testo |
letter-spacing |
in px |
Incrementa o decrementa lo spazio tra i caratteri in un testo |
line-height |
in px, pt, cm, %, etc. |
Imposta l'altezza della linea |
text-align |
center, inherit, justify, left, right |
Allineamento orizzontale del testo |
text-decoration |
none, inherit, underline, overline, line-through, blink |
Decorazione del testo |
text-indent |
in px, pt, cm, em, etc. |
Rientro della prima linea di un blocco di testo |
text-shadow |
in px + colore esadecimale #****** es.: 2px 2px 8px #FF0000 |
Effetto di ombreggiatura applicato al testo |
text-transform |
capitalize, uppercase, lowercase |
Trasformazione in maiuscolo o minuscolo del testo |
unicode-bidi |
normal, embed, bidi-override, initial, inherit |
Utilizzato insieme alla proprietà direzione per impostare o restituire se il testo deve essere ignorato per supportare più lingue nello stesso documento. |
vertical-align |
lunghezza in (px, pt, cm, %), baseline, sub, super, top, text-top, middle, bottom, text-bottom |
Allineamento verticale del testo |
white-space |
nowrap, pre, pre-line, pre-wrap |
Gestione dello spazio interno di un elemento |
word-spacing |
(in px, pt, cm, em, %, etc) oppure inherit, normal |
Incrementa o decrementa lo spazio tra le parole in un testo |
Immagini e colori di Sfondo
Le proprietà dello Sfondo
Proprietà |
Valori |
Descrizione |
background |
(nell'ordine i valori delle proprietà:) color image repeat attachment position |
Specifica in una sola dichiarazione tutte le proprietà di sfondo. |
background-color |
Nome del colore in javascript (es.: red), codice hex (#******), rgb(0-255,0-255,0-255) |
Colore di sfondo di un elemento. |
background-image |
url, none |
Immagine di sfondo di un elemento |
background-repeat |
repeat-x, repeat-y, no-repeat |
L'immagine di sfondo se deve essere ripetuta. |
background-attachment |
scroll, fixed, inherit |
L'immagine di sfondo fissa oppure scorre con la pagina |
background-position |
Coppie di valori x, y. I valori predefiniti sono le combinazioni: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, oppure si possono specificare 2 numeri interi seguiti da px. |
Posizione di un'immagine di sfondo |
Le proprietà delle Immagini
Proprietà |
Valori |
Descrizione |
opacity |
valori da 0.0 a 1.0 - per IE8 e > si usano valori da 0 a 100 (es: filter:alpha(opacity=50)) |
Opacità o trasparenza Immagine |
Elementi di una Pagina Web
Le proprietà dei Bordi
Proprietà |
Valori |
Descrizione |
border |
nell'ordine: width (spessore), style, colore (es.: 1px solid black) |
Tutte le proprietà dei bordi in una sola dichiarazione |
border-bottom border-left border-right border-top |
in ordine: width (spessore), style, colore |
Proprietà del bordo (inferiore, sinistro, destro, superiore) |
border-bottom-color border-left-color border-right-color border-top-color |
Nome del colore in javascript (es.: red), codice hex (#******), rgb(0-255,0-255,0-255) |
Colore del bordo (inferiore, sinistro, destro, superiore) |
border-bottom-style border-left-style border-right-style border-top-style
|
none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset |
Stile del bordo (inferiore, sinistro, destro, superiore) |
border-bottom-width border-left-width border-right-width border-top-width |
thin, medium, thick, lunghezza in pixel |
Larghezza del bordo (inferiore, sinistro, destro, superiore) |
border-color |
in ordine: superiore, destro, inferiore, sinistro |
Imposta il colore dei quattro bordi in una sola dichiarazione |
border-style |
dotted, dashed, double, groove, ridge, solid |
Stile dei quattro bordi |
border-width |
in ordine: superiore, destro, inferiore, sinistro |
Larghezza dei 4 bordi in una sola dichiarazione |
outline |
in ordine: spessore, stile e colore (es.: outline: 5px dotted red;) |
Proprietà di una linea esterna all'elemento, in una sola dichiarazione. |
outline-color |
Nome del colore in javascript (es.: red), codice hex (#******), rgb(0-255,0-255,0-255) |
Colore della linea che circonda l'elemento |
outline-style |
none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset |
Stile della linea che circonda l'elemento |
outline-width |
thin, medium, thick, lunghezza in pixel |
Spessore della linea che circonda l'elemento |
Le proprietà degli Elementi
Proprietà |
Valori |
Descrizione |
display |
none, block, inline |
Visualizzazione di un elemento |
float |
clear, right, left |
Rimuovere un elemento dal normale flusso del documento e lo sposta su uno dei lati del suo elemento contenitore. |
margin |
Espresso in px, pt, cm, %, etc. nell'ordine: superiore, destro, inferiore, sinistro |
Margini intorno ad un elemento in una sola dichiarazione |
margin-top margin-right margin-bottom margin-left |
Espresso in px, pt, cm, % |
Margine intorno ad un elemento (superiore, destro, inferiore, sinistro) |
overflow |
visible, hidden, scroll, auto |
Se ritagliare i contenuti o aggiungere la barra di scorrimento quando il contenuto di un elemento è troppo grande per entrare in una specifica area. |
padding |
Espresso in px, pt, cm, %, etc. nell'ordine: superiore, destro, inferiore, sinistro |
Spazio intorno al contenuto di un elemento in una sola dichiarazione |
padding-top padding-right padding-bottom padding-left |
Espresso in px, pt, cm, % |
Spazio intorno al contenuto di un elemento (superiore, destro, inferiore, sinistro) |
position |
static, relative, fixed, absolute |
Metodo usato per il posizionamento di un elemento nella pagina |
Dimensioni
Le proprietà di dimensione degli elementi
Proprietà |
Valori |
Descrizione |
height |
Espressa da un numero seguito dall'unità di misura: px, cm, %. |
Altezza di un elemento |
max-height |
Espressa da un numero seguito dall'unità di misura: px, cm, %. |
Massima altezza di un elemento |
max-width |
Espressa da un numero seguito dall'unità di misura: px, cm, %. |
Massima larghezza di un elemento |
min-height |
Espressa da un numero seguito dall'unità di misura: px, cm, %. |
Minima altezza di un elemento |
min-width |
Espressa da un numero seguito dall'unità di misura: px,cm, %. |
Minima larghezza di un elemento |
width |
Espressa da un numero seguito dall'unità di misura: px, cm, %. |
Larghezza di un elemento |
Tabelle
Le proprietà delle Tabelle
Proprietà |
Valori |
Descrizione |
border-collapse |
collapse, separate. |
Se i bordi di una tabella devono essere uniti quando le celle sono vuote |
border-spacing |
Richiesti 2 numeri interi che specificano la spaziatura orizzontale e verticale |
Distanza tra i bordi di celle adiacenti |
caption-side |
top, bottom |
Dove mostrare la didascalia di una tabella |
empty-cells |
hide, show |
Se mostrare i bordi e gli sfondi delle celle vuote |
table-layout |
auto, fixed |
Come calcolare la larghezza delle colonne, in base al contenuto o in base a misure fisse |
Stampa
Proprietà |
Descrizione |
orphans |
Minimo numero di linee che si devono lasciare nella parte inferiore di una pagina quando si verifica un salto pagina all'interno di un elemento. |
page-break-after |
Fissa il salto pagina dopo un elemento |
page-break-before |
Fissa il salto pagina prima di un elemento |
page-break-inside |
Consente il salto pagina all'interno di un elemento |
widows |
Imposta il minimo numero di linee che si devono lasciare in cima ad una pagina quando si presenta un salto pagina all'interno di un elemento |
NOTA: Al momento siamo arrivati al CSS3 che è l'evoluzione del CSS1 e del CSS2, infatti nel CSS3 sono "incorporati" in pezzi più piccoli le sintassi delle precedenti versioni, ed elaborate o per meglio dire, divise in "moduli" nuovi.
Alcuni dei moduli CSS3 più importanti sono:
- I selettori
- Box Model
- Sfondi e Bordi
- Valori e contenuti di immagini sostituiti
- Effetti di testo
- Trasformazioni 2D / 3D
- Animazioni
- Layout a colonne multiple
- Interfaccia utente
...È importante dire inoltre che solo i Browser più moderni supportano il CSS3.
|
Come ritieni i contenuti del Sito Web ? ... dai il tuo giudizio!
Giudizio Utenti: 4,3
(Eccellente)
201 voti
Eccellente |
38,4% (78) |
Buono |
56,7% (115) |
Sufficente |
3,4% (7) |
Mediocre |
0,5% (1) |
Scarso |
1% (2) |
|