HTML5 Questione di Stile

Scritto da ambrix on 23/04/2018. Postato in Corsi Programmazione, NotInHome, Web Design

Lezione 04 In questo capitolo, aggiungeremo un po’ di Stile con i famosi CSS. È ora di rendere le cose più belle, no?

Nelle lezioni precedenti abbiamo visto come gli attributi possono dare informazioni aggiuntive ai tag. A quanto pare, per ogni tag HTML possiamo usare l’attributo style per modellare il suo aspetto. Per ora aggiungeremo un valore all’attributo style. Proviamo a cambiare il colore di sfondo dell’intera sezione <body>?

<!doctype html>
<html>
 <body style="background-color:blue;">
  Una questione di Stile.
 </body>
</html>

Una questione di Stile.

Possiamo anche assegnare al paragrafo uno stile particolare.

<!doctype html>
<html>
 <body style="background-color:lightgrey;">
  <p style="color:red;">Una questione di Stile.</p>
 </body>
</html>

Una questione di Stile.

Il punto e virgola ci abilita ad usare più istruzioni del codice CSS. Cambiamo il font del nostro testo mantenendo il colore del testo sul rosso.

<!doctype html>
<html>
 <body style="background-color:lightgrey;">
  <p style="color:red; font-family:arial;">Una questione di Stile.</p>
 </body>
</html>

Una questione di Stile.

E’ evidente quindi che attraverso gli attributi possiamo definire lo stile del tag. Potremmo aggiungere la dimensione del testo (font-size), o deciderne l’allineamento (text-align).

<!doctype html>
<html>
 <body style="background-color:lightgrey;">
  <p style="color:red; font-family:arial; text-align:center; font-size:28px">Una questione di Stile.</p>
 </body>
</html>

Una questione di Stile.

Finora abbiamo modificato lo stile del singolo tag, considerandone l’intero contenuto. Possiamo, tuttavia, anche stilizzare porzioni di codice HTML. Ad esempio, se vogliamo raggruppare un insieme di parole e cambiarne il colore, possiamo usare il tag span . Oppure, possiamo usare il tag div per raggruppare intere righe di codice.

<!doctype html>
<html>
 <body>
  <div>
   <h1>Le mie collezioni</h1>
   <p>Da <span style="color:red;">Dylan Dog
</span> in poi, a spasso nel tempo ...</p>
  </div>
 </body>
</html>

Le mie collezioni

Da Dylan Dog in poi, a spasso nel tempo …

Ogni volta che vogliamo cambiare qualcosa all’interno di un tag, possiamo usare <span>. Inoltre, la versatilità di utilizzo del <div> ci permette di creare contenuti a nostro piacimento.

<!doctype html>
<html>
 <body>  
  <div style="color:yellow;background-color:black;text-align:center">
   <h1>Le mie collezioni</h1>
   <p>Da <span style="color:red;">Dylan Dog
</span> in poi, a spasso nel tempo ...</p>
  </div>
 </body>
</html>

Le mie collezioni

Da Dylan Dog in poi, a spasso nel tempo …

I tag <span> e <div> sono un toccasana per progettare siti web con i CSS. Ne sapremo di più in seguito, quando useremo entrambi in file differenti.

Ritorna alla precedente <– []–> Vai alla successiva