Lo strumento degli stili sta piano piano soppiantando tutta una serie di attributi per la formattazione del testo e non solo, anche per l'aspetto estetico di tutti gli elementi di HTML dalle immagini alle tabelle.
Lo stile si può applicare in quattro modi diversi ad un elemento HTML:
Li vediamo uno alla volta. Ogni oggetto di HTML ha delle proprietà che si possono modificare.
Vediamo ad esempio come si può modificare un testo nei quattro modi descritti.
In questo esempio vediamo come sia possibile cambiare un font per una frase per poi tornare al font di prima. E' possibile anche cambiare il size oppure il solo colore della scritta oppure la grossezza.
La sintassi per lo stile fuori tag è la seguente:
| Esercizio1: Scrivere il proprio nome con una lettera per colore e dimensioni che si riducono dalla prima lettera all'ultima. |
Questo tag cambierà font, colore, e altre cose a qualche parola dello stesso paragrafo!
Si dichiara lo stile come attributo di un tag:
Questo paragrafo intero è in Arial (o Helvetica) corsivo.
Si possono cambiare stili ad esempio relativi ad un intero paragrafo, dichiarando uno stile speciale, ad esempio "eleganza"
e poi applicando lo stile ad un paragrafo dichiarando che è di classe "eleganza":
Ciao, sono il Garamond a 26 punti!
E' possibile anche cambiare tutti i tag standard (e non solo quelli con un nome speciale: ad esempio, tutti i tag di tipo H3 in questo documento sono scritti in blu).
Si riporta lo stile in un file esterno (che qui abbiamo chiamato code.css e che si trova nella stessa cartella di sistema in cui è questo documento. Supponiamo che sia dichiarata una classe simile dell'esempio precedente:
Poi, all'interno del documento HTML, nella intestazione, si dichiara la relazione con un documento di foglio di stile:
Dopodiché si dichiara il tag di classe allo stesso modo dello stile a livello di documento:
Ciao, sono il Garamond a 18 punti dichiarato in foglio di stile!
L'utilità dei fogli di stile è nell'organizzazione di una pagina HTML: essa è massimamente chiara e non appesantita da quintali di tag di formattazione; tutto quello che riguarda l'aspetto (lo stile) è demandato ad un foglio esterno (CSS) che raccoglie ordinatamente tutte le formattazioni, mentre nel documento HTML è sufficiente invocare la classe o il tag che serve.
Aggiunge dello spazio extra tra le lettere del testo. La sintassi è la seguente: letter-spacing:4px.
Cambia l'interlinea all'interno di un paragrafo.
|
Esempio1:
il paragrafo che segue ha un'interlinea di 28 punti tipografici:
Nato a Firenze nel 1449, figlio di Pietro di Cosimo e Lucrezia Tornabuoni, Lorenzo fu
una delle figure capitali del Rinascimento italiano. La sua educazione, che raggiunse
presto una raffinata erudizione, fu curata dai maggiori dotti presenti all’epoca in
Firenze. Nel 1469, dopo il matrimonio con Clarice Orsini e la morte del padre, assunse
il potere della città, consolidando in breve tempo un vastissimo potere personale.
|
|
Esempio2:
il paragrafo che segue ha un'interlinea di 10 punti tipografici:
Nato a Firenze nel 1449, figlio di Pietro di Cosimo e Lucrezia Tornabuoni, Lorenzo fu
una delle figure capitali del Rinascimento italiano. La sua educazione, che raggiunse
presto una raffinata erudizione, fu curata dai maggiori dotti presenti all’epoca in
Firenze. Nel 1469, dopo il matrimonio con Clarice Orsini e la morte del padre, assunse
il potere della città, consolidando in breve tempo un vastissimo potere personale.
|
Imposta le decorazioni al testo, come la sottolineatura, sopralineatura, il lampeggio...
| Esempio: un esempio interessante è il link senza sottolineatura. |
| Esercizio 1: realizzare tutte le combinazioni possibili con la proprietà text-decoration. |
|
Questo testo ha un'indentazione negativa nella prima riga e il margine sinistro spostato a destra. Attenzione perché il testo può finire fuori margine!! Questo testo ha un'indentazione positiva nella prima riga. |
La proprietà margin è una proprietà applicabile a tutti i tag.
In generale ogni oggetto HTML ha queste proprietà:
Copyright @ 2000-2017 Marco Barbato htttp://www.betaingegneria.it
Quest'opera è distribuita con Licenza Creative Commons Attribuzione - Condividi allo stesso modo 4.0 Internazionale.