Corso HTML e CSS (25^ lezione): Stilizzare il testo (parte 2^)

Impariamo a costruire un sito Web

Lezione 25: CSS: Stilizzare il testo (parte 2^).

Terminiamo l’analisi degli attributi con i loro relativi valori che permettono la stilizzazione del testo.


letter-spacing Definisce lo spazio tra una lettera e l’altra di un testo.

I valori che questa proprietà può assumere sono:

normal Bssuno spazio extra tra i caratteri. Questo è il default.
spaziatura Specifica la spaziatura dei caratteri espressa in pixels, em, cm , etc.
inherit Specifica che la spaziatura sarà ereditata dall’elemento padre.

Es d’uso:

h1 {

letter-spacing:2px;

}

Specifica che l’intestazione <h1> avrà una spaziatura tra i caratteri maggiorata. Il risultato sarà:

Intestazione con spaziatura maggiorata

line-height Definisce l’altezza della riga di testo e quindi in definitiva lo spazio in verticale tra una riga e l’altra.

I valori che questa proprietà può assumere sono:

normal L’altezza della riga è quella normale. Questo è il default.
numero Se si indica un numero, questo verrà moltiplicato per il font-size per ottenere l’altezza della riga.
Lunghezza Se si indica una lunghezza, espressa in pixels, em, cm , etc., questa verrà presa come ‘altezza della riga.
% Se si indica una lunghezza espressa in % (es. 150%), significa che l’altezza della riga si otterrà come % del font-size.
inherit Specifica che il valore sarà ereditato dall’elemento padre.

Es d’uso:

p {

line-height:80%;

}

Il risultato a video sarà:

Questa spaziatura tra le righe
è stata impostata all’80%.

text-align Gestione dell’allineamento orizzontale di un testo all’interno di un elemento.

I valori che può assumere sono:

left Allinea il testo a sinistra.
right Allinea il testo a destra.
center Allinea il testo al centro.
justify Giustifica il testo (righe turre di ugual lunghezza adattando gli spazi tra le parole).
inherit Specifica che l’allineamento sarà quello dall’elemento padre.

Es d’uso:

.Centra {

h1 {text-align:center}

}

Uso:

<h1 class=”Centra”>Titolo</h1>

Il risultato sarà:

Titolo

text-decoration Imposta un tipo di decorazione di un testo.

I valori che può assumere sono:

none Testo normale. Questo è il default.
underline Sottolinea il testo.
overline Aggiunge una linea sopra al testo.
line-through Sbarra il testo come <del>.
blink Testo che lampeggia.
inherit La decorazione del testo sarà ereditata dall’elemento padre.

Es d’uso:

.Sottolinea {

h1 {text-decoration:underline;}

}

Uso:

<h3 class=”Sottolinea”>Titolo</h3>

Il risultato sarà:

Titolo

text-indent Imposta la tabulazione da sinistra verso destra di un elemento.

I valori che possono essere assegnati a questa proprietà sono:

lunghezza Imposta un’indentazione fissa in px, pt, cm, em, etc.
% Imposta un’indentazione in % della larghezza dell’elemento padre.
inherit Specifica che Il valore dell’indentazione sarà ereditato dall’elemento padre.

Es d’uso:

p
{

text-indent:25px;

}

I paragrafi avranno un’indentazione di 25px

text-transform Imposta, a seconda del valore, un testo in maiuscolo, in minuscolo o le iniziali in maiuscolo.

I valori che possono essere assegnati a questa proprietà sono:

none Il maiuscolo non viene impostato. Il testo resta com’è. Questo è il default.
capitalize Imposta la prima lettera di ciascuna parola in maiuscolo.
uppercase Trasforma tutti i caratteri in maiuscolo.
lowercase Trasforma tutti i caratteri in minuscolo.
inherit Specifica che Il valore di trasformazione sarà ereditato dall’elemento padre.
text-justify Da usare con “text-align:justify”. Specifica il metodo di giustificazione.

I valori accettati sono:

auto L’algoritmo di giustificazione viene determinato dal browser.
inter-word Aumenta e diminuisce lo spazio tra le parole.
inter-ideograph Valido solo per Cina, Giappone e Korea (linguaggi ad ideogrammi)
inter-cluster Tipo il precedente; questo valore viene usato solo per i linguaggi del sud-est asiatico.
distribute Distribuisce la spaziatura non solo tra le parole, ma anche tra le lettere delle parole.
kashida Giustificazione usata principalmente per la scrittura araba. Consiste nell’estendere l’unione di due caratteri allungando visivamente le parole.
none Giustificazione disabilitata.

Per la nostra scrittura, se occorre giustificare si può usare inter-word oppure distribute, ma auto è la scelta migliore.

text-overflow Specifica cosa fare se il testo supera i limiti del suo contenitore.

I valori che può assumere sono:

clip Tagliare il testo eccedente.
ellipsis Aggiungere i puntini  (“…”) per evidenziare che è stato tagliato il testo.
stringa Aggiungere al testo la stringa indicata per evidenziare che è stato tagliato il testo.

Questa opzione è supportata solo da Firefox dalla versione 9 in poi, quindi va evitata.

Es d’uso:

Nel CSS scriviamo:

div.overfl
{

white-space:nowrap;

text-overflow:ellipsis;

width:180px;

overflow:hidden;

border:1px solid #000000;

}

e nel foglio html:

<div class=”overfl”>

Questo testo è troppo lungo per essere inserito completamente nel box.

</div>

e a video vedremo:

Questo testo è troppo lungo per essere inserito completamente nel box.

Da notare due proprietà:


white-space:nowrap; è stata aggiunta per evitare che il testo vada a capo.


overflow:hidden; questa è necessaria perché altrimenti il testo uscirebbe dal box.

white-space Definisce come il browser deve gestire gli spazi bianchi e a capo.

I valori che possono essere assegnati a questa proprietà sono:

normal Più spazi bianchi consecutivi verranno sempre ridotti ad un solo spazio bianco. Il testo andrà a capo quando occorre. Questo è il default.
nowrap Più spazi bianchi consecutivi verranno sempre ridotti ad un solo spazio bianco. Il testo non andrà mai a capo se non quando incontra il tag <br />
pre Gli spazi bianchi consecutivi verranno preservati. Il testo andrà a capo quando incontra un’interruzione di linea. Si comporta come il tag <pre> dell’html.
pre-line Più spazi bianchi consecutivi verranno sempre ridotti ad un solo spazio bianco. Il testo andrà a capo quando occorre e quando incontra un’interruzione di linea.
pre-wrap Gli spazi bianchi consecutivi verranno preservati. Il testo andrà a capo quando occorre e quando incontra un’interruzione di linea.
inherit Il valore della proprietà white-space andrà ereditato dall’elemento padre.

Es d’uso:

A titolo di esempio, vediamo l’effetto
dei due valori ‘normal’ e ‘pre-line‘.

Nell’html scriviamo:

<p>

Testo del mio contenuto – riga1.

Testo del mio contenuto – riga2.

Testo del mio contenuto – riga3.

</p>

Se applichiamo la proprietà {white-space:normal;} otterremo:

Testo del mio contenuto – riga1.
Testo del mio contenuto – riga2.
Testo del mio contenuto – riga3.

Se applichiamo la proprietà {white-space:pre-line;} otterremo:

Testo del mio contenuto – riga1.
Testo del mio contenuto – riga2.
Testo del mio contenuto – riga3.

word-spacing Definisce lo spazio tra una parola e l’altra..

I valori che questa proprietà può assumere sono:

normal Lo spazio tra una parola e l’altra è quello normale. Questo è il default.
Lunghezza Se si indica una lunghezza, espressa in pixels, em, cm , etc., questa verrà presa come distanza fissa tra le parole.
inherit Specifica che il valore sarà ereditato dall’elemento padre.

Es d’uso:

p {

word-spacing:10px;

}

Il risultato a video sarà:

Lo spazio tra una parola e l’altra è 10px.

vertical-align Gestione dell’allineamento verticale.

I valori accettati sono:

Lunghezza Sposta in alto od in basso un elemento del valore specificato. Sono ammessi valori negativi.
% Sposta in alto od in basso un elemento della % indicata rispetto all’altezza della riga. Sono ammessi valori negativi.
baseline Baseline è la linea immaginaria su cui poggia la base delle lettere. Questo valore allinea la baseline dell’elemento con la baseline dell’elemento padre. Questo è il default.
sub Allinea l’elemento come se fosse un deponente.
super Allinea l’elemento come se fosse un esponente.
top Allinea il margine superiore dell’elemento col margine del più alto elemento della riga.
text-top Allinea il margine superiore dell’elemento col margine del più alto font dell’elemento padre.
middle Allinea l’elemento centralmente rispetto all’altezza dell’elemento padre.
bottom Allinea la base dell’elemento col margine del più basso elemento della riga.
text-bottom Allinea la base dell’elemento col margine del più basso font dell’elemento padre.
inherit Il valore della proprietà vertical-align andrà ereditato dall’elemento padre.

Per la nostra scrittura, se occorre giustificare si può usare inter-word oppure distribute, ma auto è la scelta migliore.

Es d’uso:

Scriviamo:

<p>
<img src=”http://www.weweb.in/Wordpress/wp-content/uploads/2012/10/Logo-150×150.jpg” alt “” width=”150″ height=”150″ style=”vertical-align:-65px;” />Questo è il nostro logo.
</p>

e otterremo il seguente risultato. Come si vede la scritta è stata sollevata dalla baseline di 65px.

Questo è il nostro logo.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *