I fogli di stile

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.

Fai una domanda
I nostri contenuti sono creati in collaborazione con esperti di high-tech, sotto la direzione di Jean-François Pillou, fondatore di CCM.net. CCM è un sito di high-tech leader a livello internazionale ed è disponibile in 11 lingue.
Potrebbe anche interessarti
Il documento intitolato « I fogli di stile » dal sito CCM (it.ccm.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.