I fogli di stile

Proprietà dei caratteri

Proprietà Valore Descrizione
font-family Carattere preciso (Arial, Times, Verdana)
Famiglia (serif, senza-serif, fantasy, monospazio, corsivo)
Definisce uno o più nome di caratteri o di famiglie di caratteri. Se più caratteri sono definiti, sarà usato il primo trovato sul sistema dell'utente.
font-style normale, corsivo, obliquo Definisce lo stile di scrittura
font-weight lighter, normal, bold o bolder.
valeure numerico (100, 200, 300, 400, 500, 600, 700, 800, 900)
Definisce il grassetto (spessore) del carattere
font-size xx-small, x-small, small, medium, large, x-large, xx-large
dimensione in punti (pt), cm, %
Definisce la dimensione del carattere
font-variant normal, small-caps Definisce una variante (minuscole maiuscole)
font font: Verdana, Arial, bold italic 8px; Collegamento diretto che permette di mettere tutte le proprietà

Testo e paragrafi

Proprietà Valore Descrizione
color "#RRGGBB" Definisce il colore di un testo
line-height line-height: 12pt; Definisce l'interlinea
text-align left, center, right ou justify Definisce l'allineamento del testo
text-indent text-indent: 5px; Definisce ? (rientro del testo)
text-decoration blink (intermittenza), underline (sottolinato), line-through (sbarrato), overline sopralineato none (nessuna decorazione) Definisce una decorazione
text-shadow text-shadow: 1px 2px 4px black; Definisce l'ombratura del testo, rispettivamente verso destra, in basso, raggio dell'effetto sfuocato e colore.
text-transform uppercase (maiuscolo), lowercase (minuscolo) o capitalize (prima lettera in maiuscolo) Definisce la struttura del testo
white-space normal (rinvio automatico alla linea), pre (idem inserito), nowrap (nessun rinvio automatico di linea) Spaziatura
word-spacing word-spacing: 6px; Definisce la spaziatura delle parole
width In punti (pt), pollici (in), in cm, in pixels (px), o in % Definisce la lunghezza di un elemento di testo o di un'immagine
height In punti (pt), pollici (in), in cm, in pixels (px), o in % Definisce l'altezza di un elemento di testo o di un'immagine

Colori e sfondi

Proprietà Valore Descrizione
background-color "#RRGGBB" Definisce il colore dello sfondo
background-image url(http://url) Defisce l'immagine di sfondo
background-repeat repeat, repeat-x, repeat-y, no-repeat Definisce il modo di ripetizione dello sfondo
background-attachment scroll, fixed Specifica se l'immagine resta fissa con degli spostamenti sullo schermo
background-position top, middle, bottom, left, center ou right Posizione dell'immagine rispetto all'angolo superiore sinistro
background background: url(test.jpg) fixed repeat; Collegamento rapido per le proprietà dello sfondo

Margini

Proprietà Esempio Descrizione
margin-top margin-top: 5px; Valore del margine superiore
margin-right margin-right: 0.5em; Valore del margine destro
margin-bottom margin-bottom: 2pt; Valore del margine inferiore
margin-left margin-left: 0; Valore del margine sinistro
margin margin: 5px 0.5em 2pt 0; Collegamento rapido per le proprietà dei margini

Bordi

Proprietà Valore Descrizione
border[-top -left -bottom -right]-width In punti (pt), pollici (in), in cm, in pixels (px), o in % Spessore del bordo [superiore, di sinistra, inferiore o di destra]
border[-top -left -bottom -right]-color border-left-color: #RRGGBB; Colore del bordo [superiore, di sinistra, inferiore o di destra]
border[-top -left -bottom -right]-style solid (neretto), dashed (a tratti), dotted (a punti), double (doppio riempimento) o ridge (in 3D) Stile del bordo [superiore, di sinistra, inferiore o di destra]
border-collapse collapse
separate
Effet » 3D » o no
border border: 1px 0 0 2px dotted green; Collegamento rapido globale alle proprietà del bordo

Spazi interni

Proprietà Valore Descrizione
padding-top padding-top: 3px; Spazio interno tra l'elemento e il bordo superiore
padding-right padding-right: 0.25em; Spazio interno tra l'elemento e il bordo destro
padding-bottom padding-bottom: 0; Spazio interno tra l'elemento e il bordo inferiore
padding-left padding-left: 2pt; Spazio interno tra l'elemento e il bordo sinistro
padding padding: 3px 0.25em 0 2pt; Collegamento rapido verso l'insieme delle proprietà di spazio interno

Tabelle

Proprietà Valore Descrizione
border-collapse separate o collapse Fusione dei bordi delle celle (collapse) o no (separate)
border-spacing border-spacing: 4px; Spaziatura delle celle
caption-side top, bottom, left o right Posizione della legenda della tabella
empty-cells show o collapse Visualizza (show) o nascondi (collapse) le celle vuote
table-layout fixed (indipendentemente dal contenuto delle celle) o auto (secondo il contenuto delle celle) Larghezza fissa o variabile
speak-headers alwats (sistematicamente prima di ogni cella) o once (una sola volta) Proprirtà per non udenti che indicano il comportamento da tenere durante la lettura delle celle d'intestazione di una tabella

Liste

Proprietà Valore Descrizione
list-style-type decimal, upper-roman, lower-latin, disc, circle, square o none Tipo di elenco puntato e di numerazione
list-style-image list-style-image: url(image.png); Permette di personalizzare l'elenco puntato con un'immagine
list-style-position inside ou outside Specifica il rientro dell'elenco puntato
list-style   Collegamento rapido alle proprietà della lista

Impaginazione

Proprietà Valore Descrizione
@page @page(size: portrait) Definisce l'impaginazione della stampa
size auto, landscape o portrait Formato della stampa
margin-top margin-top: 3 cm; Margine superiore
margin-right margin-right: 1.5 cm; Margine destro
margin-bottom margin-right: 1 cm; Margine inferiore
margin-left margin-left: 2 cm; Margine sinistro
marks crop (tratti tagliati), cross (riferimento di montaggio), none (nessun segno) Tratti di taglio e riferimenti di montaggio
page-break-before Always, avoid Provoca il salto di pagina prima di un elemento
page-break-after Always, avoid Provoca il salto di pagina dopo un elemento
orphans orphans: 2; Evita le linee ORFANE alla fine delle pagina. Definisce il numero di linee minimo per effettuare un rinvio alla pagina seguente
widows widows: 1; Evita le linee VEDOVE all'inizio della pagina. Definisce il numero di linee minimo per effettuare un rinvio alla pagina precedente
Ultime modificazione il venerdì 6 febbraio 2009 alle 16:51:57 da Jeff
Il documento intitolato « I fogli di stile » da Kioskea.net (it.kioskea.net) è reso disponibile sotto i termini della licenza Creative Commons. È possibile copiare, modificare delle copie di questa pagina, nelle condizioni previste dalla licenza, finché questa nota appaia chiaramente.
Posizionamento CSS
Fogli di stile