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.

pagina 1 2