CREARE SITI WEB in HTML e CSS > Impostare sfondo e bordo del testo
Vediamo ora come impostare altri tipi di proprietà al testo.
Scegliamo ad esempio di dare un formato al tag <h2>.
1 - porta il cursore a destra della parentesi grafa chiusa e premi [INVIO] da tastiera per creare una riga
2 - clicca sulla scheda "Style"
3 - apri il menu a discesa del comando "CSS Selectors" (seconda icona)
4 - clicca sulla voce "H2"
h2 { }
5 - apri il menu a discesa del comando "CSS Properties" (terza icona)
6 - clicca sulla proprietà "background-color"
La proprietà "background-color" imposta lo sfondo del testo.
7 - scegli il colore scrivendo il suo nome in inglese o scegliendolo da Tools > Colors
h2 { background-color: yellow; }
Nell'esempio è stato scelto il colore giallo (yellow).Per inserire un bordo intorno al testo,
1 - apri il menu a discesa del comando "CSS Properties" (terza icona)
2 - clicca sulla proprietà "border"
h2 { background-color: yellow;
border: ;
}
border: ;
}
3 - indica lo spessore (es. 5px), il tipo di linea (es. solid) e il colore (es. green) separandoli con uno spazio vuoto.
h2 { background-color: yellow;
border: 5px solid green;
}
border: 5px solid green;
}
Potrai a scelta impostare il bordo,
con uno spessore diverso, agendo sul valore numerico;
con un colore diverso, agendo sul nome del colore;
con un tipo di linea diversa scegliendola dal seguente elenco:
dotted
dashed
solid
double
groove
ridge
inset
outset
dashed
solid
double
groove
ridge
inset
outset
Termina la formattazione del tag <h2> dichiarando le dimensioni del carattere:
1 - apri il menu a discesa del comando "CSS Properties" (terza icona)
2 - clicca sulla proprietà "font-size"
3 - digita come valore 12pt
| codice HTML | risultato pagina web |
|
... <head> <title>Le città nel mondo</title> <style type="text/css"> <!-- h1 { font-size: 14pt; color: red; text-align: center; } h2 { background-color: yellow; border: 5px solid green; font-size: 12pt; } --> </style> </head> <body> <h1>Le città nel mondo</h1> <h2>Europa</h2> <h3>Italia</h3> Roma, Milano, Venezia ... |
 |