to Top Page
Hot Web Guide
GUESTBOOK (Libro degli ospiti)
Consiglia il Sito ad un amico
BOOKMARK (Aggiungi ai Preferiti)
-

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)
197 voti
Eccellente 38,2% (76)
Buono 57,8% (115)
Sufficente 3% (6)
Mediocre 0,5% (1)
Scarso 0,5% (1)