In questa lezione vediamo come impostare lo stile del testo.
Come abbiamo già visto nel corso base HTML, possiamo modificare lo stile di alcune parole per metterle in risalto rispetto al resto del testo.
font-style
La proprietà font-style permette di variare lo stile tipografico del testo, in base ai seguenti valori:
normal – testo normale, non inclinato;
italic – testo in corsivo;
oblique – testo inclinato, simile al corsivo.
Uso di font-styleEsempio
La differenza tra italic e oblique è che il primo è un carattere che viene proprio salvato con le lettere già inclinate, mentre il secondo si ottiene inclinando “a forza” le lettere di un carattere normale: nella gran parte dei casi il risultato è identico.
In questa lezione vi parlo degli stili logici e vi spiego come si usano.
Stili
Un testo può essere formattato per farlo distinguere dal resto del documento.
La formattazione può essere fatta applicando uno stile tipografico a seconda dell’effetto che vogliamo ottenere: rendere le parole più spesse, sottolinearle, ecc.
Gli stili si dividono in due categorie:
fisici, quando spiegano solo il modo in cui devono essere visualizzati (trattano solo l’aspetto estetico);
logici, quando indicano la funzione del testo all’interno della pagina (trattano l’aspetto logico-funzionale).
Stili logici
Uno stile logico comunica al browser la funzione di quel testo nella pagina: sarà proprio tale browser a decidere in che modo far visualizzare quel testo.
<strong>
Il tag <strong> indica un testo che deve essere marcato. Normalmente viene rappresentato con un grassetto.
<em>
Il testo in enfasi ha le lettere inclinate come il corsivo e viene inserito mediante il tag <em>
<del>
Con il tag <del> viene indicato un testo che è stato disattivato (ovvero non è più valido perché, ad esempio, è stato sostituito da altro) e appare barrato.
<ins>
Il tag <ins> indica il testo inserito (ad esempio perché sostituisce il testo prima barrato) e questo appare con una sottolineatura.
<mark>
Possiamo far risaltare un testo applicando uno sfondo colorato, mediante l’effetto “evidenziatore” usando il tag <sup>
Qui potete vedere il codice di tutti gli stili sopracitati:
In questa lezione vi parlo degli stili fisici e vi spiego la differenza con gli stili logici.
Stili
Un testo può essere formattato per farlo distinguere dal resto del documento.
La formattazione può essere fatta applicando uno stile tipografico a seconda dell’effetto che vogliamo ottenere: rendere le parole più spesse, sottolinearle, ecc.
Gli stili si dividono in due categorie:
fisici, quando spiegano solo il modo in cui devono essere visualizzati (trattano solo l’aspetto estetico);
logici, quando indicano la funzione del testo all’interno della pagina (trattano l’aspetto logico-funzionale).
Stili fisici
Uno stile fisico obbliga il browser a mostrarci un testo con un determinato aspetto, indipendentemente dalla funzione che il testo ricopre nella pagina.
<b>
Il testo in grassetto è caratterizzato dalle lettere più spesse e si implementa col tag <b>
<i>
Il testo in corsivo ha le lettere inclinate e viene inserito mediante il tag <i>
<u>
Per rendere il testo sottolineato possiamo usare il tag <u>
<strike>
Il tag <strike> rende il testo barrato, cioè attraversato da una linea orizzontale:
<sup>
L’apice si usa per posizionare più in alto il testo e viene inserito col tag <sup>
<sub>
Il pedice si usa per posizionare più in basso un testo e viene inserito col tag <sub>
Qui potete vedere il codice di tutti gli stili sopracitati:
