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.
