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.
1. 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).
2. Sfondo della pagina html
Attraverso la proprietà background-color dell’ attributo style, è possibile assegnare un colore di sfondo alle nostre pagine html.
Vediamolo subito con un esempio pratico.
<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.
- <body si tratta del tag che contraddistingue il corpo della nostra pagina
- <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)
3. Colore del testo
Attraverso la proprietà color dell’ attributo style, è possibile assegnare un colore al nostro testo html.
<html>
<body>
<body style=”background-color:green;”>
<h1 style=”color:red”>titolo rosso</h1>
<p style=”color:white”>paragrafo bianco</p>
</body>
</html>
I colori ammessi in HTML sono :
- nomi colore ( gray , green , white , orange ecc.. )
- RGB
- RGBA
- HEX
- HSL
- HSLA
4. 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>
5. 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>
6. 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>
7. 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>
Continua a leggere
