I fogli di stile

Dicembre 2016
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àValoreDescrizione
font-familyCarattere 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-stylenormale, corsivo, obliquoDefinisce lo stile di scrittura
font-weightlighter, normal, bold o bolder.

valore numerico (100, 200, 300, 400, 500, 600, 700, 800, 900)
Definisce il grassetto (spessore) del carattere
font-sizexx-small, x-small, small, medium, large, x-large, xx-large

dimensione in punti (pt), cm, %
Definisce la dimensione del carattere
font-variantnormal, small-capsDefinisce una variante (minuscole maiuscole)
fontfont: Verdana, Arial, bold italic 8px;Collegamento diretto che permette di mettere tutte le proprietà

Testo e paragrafi

ProprietàValoreDescrizione
color"#RRGGBB"Definisce il colore di un testo
line-heightline-height: 12pt;Definisce l'interlinea
text-alignleft, center, right ou justifyDefinisce l'allineamento del testo
text-indenttext-indent: 5px;Definisce ? (rientro del testo)
text-decorationblink (intermittenza), underline (sottolinato), line-through (sbarrato), overline sovralineato none (nessuna decorazione)Definisce una decorazione
text-shadowtext-shadow: 1px 2px 4px black;Definisce l'ombratura del testo, rispettivamente verso destra, in basso, raggio dell'effetto sfuocato e colore.
text-transformuppercase (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-spacingword-spacing: 6px;Definisce la spaziatura delle parole
widthIn punti (pt), pollici (in), in cm, in pixels (px), o in %Definisce la lunghezza di un elemento di testo o di un'immagine
heightIn 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àValoreDescrizione
background-color"#RRGGBB"Definisce il colore dello sfondo
background-imageurl(http://url)Definisce l'immagine di sfondo
background-repeatrepeat, repeat-x, repeat-y, no-repeatDefinisce il modo di ripetizione dello sfondo
background-attachmentscroll, fixedSpecifica se l'immagine resta fissa con degli spostamenti sullo schermo
background-positiontop, middle, bottom, left, center ou rightPosizione dell'immagine rispetto all'angolo superiore sinistro
backgroundbackground: url(test.jpg) fixed repeat;Collegamento rapido per le proprietà dello sfondo

Margini

ProprietàEsempioDescrizione
margin-topmargin-top: 5px;Valore del margine superiore
margin-rightmargin-right: 0.5em;Valore del margine destro
margin-bottommargin-bottom: 2pt;Valore del margine inferiore
margin-leftmargin-left: 0;Valore del margine sinistro
marginmargin: 5px 0.5em 2pt 0;Collegamento rapido per le proprietà dei margini

Bordi

ProprietàValoreDescrizione
border[-top -left -bottom -right]-widthIn 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]-colorborder-left-color: #RRGGBB;Colore del bordo [superiore, di sinistra, inferiore o di destra]
border[-top -left -bottom -right]-stylesolid (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-collapsecollapse
separate
Effet » 3D » o no
borderborder: 1px 0 0 2px dotted green;Collegamento rapido globale alle proprietà del bordo

Spazi interni

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

Tabelle

ProprietàValoreDescrizione
border-collapseseparate o collapseFusione dei bordi delle celle (collapse) o no (separate)
border-spacingborder-spacing: 4px;Spaziatura delle celle
caption-sidetop, bottom, left o rightPosizione della legenda della tabella
empty-cellsshow o collapseVisualizza (show) o nascondi (collapse) le celle vuote
table-layoutfixed (indipendentemente dal contenuto delle celle) o auto (secondo il contenuto delle celle)Larghezza fissa o variabile
speak-headersalwats (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àValoreDescrizione
list-style-typedecimal, upper-roman, lower-latin, disc, circle, square o noneTipo di elenco puntato e di numerazione
list-style-imagelist-style-image: url(image.png);Permette di personalizzare l'elenco puntato con un'immagine
list-style-positioninside o outsideSpecifica il rientro dell'elenco puntato
list-style Collegamento rapido alle proprietà della lista

Impaginazione

ProprietàValoreDescrizione
@page@page(size: portrait)Definisce l'impaginazione della stampa
sizeauto, landscape o portraitFormato della stampa
margin-topmargin-top: 3 cm;Margine superiore
margin-rightmargin-right: 1.5 cm;Margine destro
margin-bottommargin-right: 1 cm;Margine inferiore
margin-leftmargin-left: 2 cm;Margine sinistro
markscrop (tratti tagliati), cross (riferimento di montaggio), none (nessun segno)Tratti di taglio e riferimenti di montaggio
page-break-beforeAlways, avoidProvoca il salto di pagina prima di un elemento
page-break-afterAlways, avoidProvoca il salto di pagina dopo un elemento
orphansorphans: 2;Evita le linee ORFANE alla fine delle pagina. Definisce il numero di linee minimo per effettuare un rinvio alla pagina seguente
widowswidows: 1;Evita le linee VEDOVE all'inizio della pagina. Definisce il numero di linee minimo per effettuare un rinvio alla pagina precedente

Potrebbe anche interessarti :

CSS - Style sheets
CSS - Style sheets
CSS: Hojas de estilo
CSS: Hojas de estilo
Les feuilles de style
Les feuilles de style
As folhas de estilo
As folhas de estilo
Il documento intitolato « I fogli di stile » da 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.