I fogli di stile (CSS) sono un un linguaggio informatico che viene utilizzato per la formattazione del testo in una pagina HTML, ecco come sono strutturato nello specifico.

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.
valore 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 sovralineato 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) |
Definisce 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 o 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 |
Foto: © Pixabay.