Dare una veste grafica al testo.

In questo tutorial vediamo come formattare il testo applicando i fogli di stile.

Nel body della pagina web scriviamo un testo inserendolo nel tag <p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Creiamo un foglio di stile incorporato nella head della pagina web, definendo delle proprietà per il tag <p>

Codice:

p {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #000;
}

Risultato:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Adesso creiamo una classe di stile per formattare singole parole inserite nel testo. Le mettiamo in corsivo e di colore rosso. La classe la inseriamo nella head della pagina web. Da notare che la dimensione e il tipo di carattere non occorre riscriverli.

Codice:

.corsivo {
	font-style:italic;
	color:#f00;
}

Nel tag <p> che abbiamo creato prima, inseriamo un tag che comprenda le parole da formattare con la classe “corsivo”.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed <span class="corsivo">do eiusmod tempor incididunt </span>ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Risultato:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Possiamo assegnare al testo ulteriori formattazioni. Creiamo una classe di stile per mettere il testo in grassetto e sottolineato. Anche questa classe la inseriamo nella head della pagina web. Da notare che la dimensione e il tipo di carattere non occorre riscriverli.

Codice:

.grassetto {
	font-weight:bold;
	text-decoration:underline;
}

Nel tag <p> che abbiamo creato prima, inseriamo un altro tag che comprenda le parole da formattare con la classe “grassetto”.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed <span class="corsivo">do eiusmod tempor incididunt</span> ut labore et dolore magna aliqua. Ut enim ad  minim veniam, quis nostrud exercitation ullamco <span class="grassetto">laboris nisi ut aliquip</span>  ex ea commodo consequat.</p>

Risultato:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lascia un commento

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