18 Gestione del testo: proprietà di base
-
il font da usare
-
la sua dimensione
-
la sua consistenza
-
l'interlinea tra i paragrafi
-
l'allineamento del testo
-
la sua decorazione (sottolineature e simili)
font-family La proprietà font-family serve a impostare il tipo di carattere di una qualunque porzione di testo. Si applica a tutti gli elementi ed è ereditata. consente all'autore di impostare nei CSS non un font singolo e unico, ma un elenco di caratteri alternativi p {font-family: arial, Verdana, sans-serif;} inserire alla fine l'indicazione di una famiglia generica. Esse sono cinque: (tra parentesi riportiamo i caratteri predefiniti su ciascuna sui sistemi Windows) |
I nomi dei font della lista vanno separati dalla virgola. I caratteri con nomi composti da più parole vanno inseriti tra virgolette selettore {font-family: <font 1>, <font2>, ....,<famiglia generica>;} div {font-family: Georgia, "Times New Roman", serif;} |
font-size definisce le dimensioni. Applicabile a tutti gli elementi ed ereditata selettore { font-size: <valore>; } Valori dimensioni in senso assoluto o relativo . Dimensione relativa significa che essa viene calcolata in base alla dimensione del testo dell'elemento parente p {font-size: 12px;} |
Sono valori assoluti:
Sono valori relativi:
|
font-weight Serve a definire la consistenza o "peso" visivo del testo. Si applica a tutti gli elementi ed è ereditata. - è ereditata selettore {font-weight: <valore>;} Valori: p {font-weight: 900;} |
|
font-style Imposta le caratteristiche del testo in base ad uno di questi tre valori: selettore {font-style: <valore>;} p {font-style: italic;} |
La proprietà si applica a tutti gli elementi ed è ereditata |
Line-height sistema di interlinea - serve a definire l'altezza di una riga di testo all'interno di un elemento blocco - è ereditata selettore {line-height: <valore>;} non usare mai la percentuale p {line-height: 1.5;} |
|
font proprietà a sintassi abbreviata che serve a impostare con una sola dichiarazione tutte le principali caratteristiche del testo selettore {font: <valori>;} singole proprietà non vanno separati da virgole, i nomi dei font costituiti da più parole vanno racchiusi tra virgolette la dichiarazione dovrebbe sempre finire con la coppia font-size > font-family proprietà line-height si imposta invece così, facendo seguire il suo valore a quello di font-size e separando i due con una slash font-size/line-height p {font: bold 12px/1.5 Georgia, "Times New Roman", serif;} abbiamo definito: font-weight, dimensione/ interlinea, font-family |
|
Usare i font di sistema è possibile impostare, invece della normale lista di caratteri, un valore corrispondente ai cosiddetti font di sistema. Se si intende usare uno dei font di sistema non è necessario specificare altri valori oltre alla keyword p {font: menu;} |
|
Allinerare il testo: Text-align La proprietà serve a impostare l'allineamento del testo. E' ereditata e si applica a tutti gli elementi. selettore { text-align: <valore>; } |
|
Text-decoration Imposta particolari decorazioni e stili per il testo. Ereditabile e applicabile a tutti gli elementi p {text-decoration: <valore> o <valori>;} p {text-decoration: none;} |
|
19 Gestione del testo: proprietà avanzate
font-size-adjust migliorare la leggibilità di un carattere alternativo tra quelli indicati con la proprietà font-family - è ereditata selettore {font-size-adjust: <valore>;} p {font-size-adjust: 0.50;} |
supportata solo dai browser Gecko-based (Mozilla, Netscape 6/7) |
font-stretch Consente di rendere il testo più o meno espanso del normale. Proprietà non supportata da nessun browser. Ereditata selettore {font-stretch: <valore>;} p {font-stretch: ultra-expanded;} |
ultra-expanded, extra-expanded, expanded, semi-expanded, normal, semi-condensed, condensed, extra-condensed, ultra-condensed - con funzione relativa: wider e narrower |
font-variant Consente di trasformare il testo in maiuscoletto – ereditata selettore {font-variant: <valore>;} |
h2 {font-variant: small-caps;} |
text-indent Definisce l'indentazione della prima riga in ogni elemento contenente del testo. Proprietà ben supportata ed ereditata selettore {text-indent: <valore>;} |
il valore con unità di misura è assoluto, quello in percentuale è relativo p {text-indent: 10px;} |
text-shadow Crea un'ombreggiatura per il testo specificato. La proprietà non è supportata da nessun browser e non è ereditata selettore {text-shadow: <valore colore> <valore x> <valore y> <valore blur>;} |
h1 {text shadow: blue 2px 2px 3px;} |
text-transform La proprietà serve a cambiare gli attributi del testo relativamente a tre aspetti: maiuscolo, minuscolo, prima lettera maiuscola. selettore {text-transform: <valore>;} |
|
white-space Questa proprietà serve a gestire il trattamento degli spazi bianchi presenti in un elemento. E' ereditata selettore {white-space: <valore>;} p {white-space: pre;} |
|
letter-spacing Aumenta lo spazio tra le lettere di una parola. Proprietà ben supportata ed ereditata selettore { letter-spacing: <valore>; } h1 { letter-spacing: 5px; } |
|
word-spacing Serve ad aumentare lo spazio tra le parole comprese in un elemento. Proprietà ben supportata ed ereditata selettore { word-spacing: <valore>; } p { word-spacing: 1.2em; } |
|