STILI HTML

di

Per modificare lo stile dei nostri documenti Html si utilizza l’ attributo style.

Ogni tag HTML può contenere attributi  che si inseriscono nel tag di apertura , e sono formati da una coppia di chiave valore.

SINTASSI DI BASE

La sintassi di base per utilizzare l’attributo style è la seguente :

<nometag style = ” chiave : valore;” >

Dove sia la chiave che il valore sono elementi di CSS (Css è un linguaggio utilizzato nella costruzione di pagine Web, che agisce in maniera complementare al linguaggio Html, responsabile per l’aspetto grafico della pagina, che vedremo successivamente).


SFONDO DELLA PAGINA

Attraverso la proprietà background-color dell’ attributo style, è possibile assegnare un colore di sfondo alle nostre pagine html.

<html>
<body style="background-color:green;">
<h1>Titolo della nostra pagina verde </h1>
</body>
</html>

Prima di proseguire , a voi una breve spiegazione del codice che abbiamo appena visto.

  1. <body si tratta del tag che contraddistingue il corpo della nostra pagina
  2. <body style=”background-color:green;”> attributo style ( elemento che fornisce informazioni aggiuntive su nostro tag) e che va inserito nel tag di apertura.

formato da una coppia di chiave (background-color) , valore (green)

COLORE DEL TESTO

Attraverso la proprietà color dell’ attributo style, è possibile assegnare un colore al nostro testo html.

<html>
<body style="background-color:green;">
<h1 style="color:red;">Titolo della nostra pagina verde </h1>
<p style="color:white;">paragrafo bianco </h1>
</body>
</html>

I colori ammessi in HTML sono :

  • nomi colore ( gray , green , white , orange ecc.. )
  • RGB
  • RGBA
  • HEX 
  • HSL
  • HSLA

COLORE DELLO SFONDO DEL TESTO


Attraverso la proprietà background-color dell’ attributo style, è possibile assegnare un colore non solo al testo ma anche allo sfondo di determinati testi.

<html>
<body style=”background-color:black;”>>
<h1 style=”background-color:pink;”>TITOLO SU SFONDO ROSA</h1>
<p style=”background-color:white;”>PARAGRAFO SU SFONDO BIANCO</p>
</body>
</html>

CORNICE ATTORNO AL TESTO

E’ possibile creare attorno agli elementi di html una cornice colorata tramite la proprietà border

<html>
<body>
<h1 style=”border:solid Tomato;”>titolo con bordi</h1>
</body>
</html>

CARATTERE E DIMENSIONE DEL TESTO

Per definire il carattere del testo si utilizza la proprietà font-family dell’ attributo style.

<html>
<body>
<h1 style=”font-family:verdana;”>Titolo con carattere Verdana</h1>
<p style=”font-family:courier;”>Paragrafo con carattere Courier</p>
</body>
</html>

Per definire la dimensione del testo si utilizza la proprietà font-size dell’ attributo style.

<html>
<body>
<h1 style=”font-size:200%;”>testo 1</h1>
<p style=”font-size:80%;”>testo 2</p>
</html>

ALLINEAMENTO DEL TESTO


Per definire come deve essere allineato il testo si utilizza la proprietà text-align dell’ attributo style.

<html>
<body>
<h1 style=”text-align:center;”>TITOLO CENTRATO</h1>
<p style=”text-align:right;”>PARAGRAFO UNO</p>
<p style=”text-align:left;”>PARAGRAFO DUE</p>
</body>
</html>

ᐊ Formattare il testo
Colori ᐅ

Lascia un commento