PC da Zero - Guida facile e pratica per usare il computer

CREARE SITI WEB in HTML e CSS > Impostare sfondo e bordo del testo


codice css In questa lezione vediamo come impostare altri tipi di proprietà al testo della nostra pagina web.

Scegliamo ad esempio di dare un formato al tag <h2>; rimanendo sempre all'interno dei tag "style".

COLORARE LO SFONDO

Riprendendo il codice dell'esercizio precedente,
- porta il cursore a destra della parentesi grafa chiusa e premi [INVIO] da tastiera per creare una riga
- digita h2
- digita { (aperta parentesi grafa)
- premi il tasto invio
- digita bac
- e dal menu apparso scegli la voce "background-color"
- segli un colore chiaro dalle voci proposte
Ad esempio segli "lightyellow".

La proprietà background-color imposta lo sfondo del testo.

IMPOSTARE I BORDI

Sempre all'interno della parenstesi grafa e dopo il punto e virgola,
- digita bo
- fai un clic su "border"
- digita 5px e premi spazio

"5px" sta ad indicare lo spessore del bordo;
scegliendo un valore diverso otterrai un spessore più o meno grosso.

- digita so
- fai un clic su "solid" e premi spazio

"solid" è il tipo di linea;
porai modificarne l'aspetto scegliendo una delle voci di questo elenco:
dotted
dashed
solid
double
groove
ridge
inset
outset

- digita gr
- fai un clic su "green"

"green" è il colore del bordo;
che ovviamnete potrai modificarne la cromatura scegliendolo dalla gamma dei colori proposti nell'elenco a discesa che appare.

IMPOSTARE LE DIMENSIONI DEL CARATTERE

Termina la formattazione del tag <h2> dichiarando le dimensioni del carattere:
- digita fo
- fai un clic su "font-size"
- digita 12pt.

Ed ecco il raffronto tra il codice immesso e la pagina web derivata da questo codice.


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
...
pagine web citta del mondo

Ti potrebbe interessare anche...

Fare calcoli e creare elenchi con
- Come creare un blog gratis
- Come creare siti web gratis
- Gestisci le tue foto con Picasa
- Naviga veloce con Google Chrome
- Scarica video e musica con Free Studio

Frasi celebri

“Se non lo sai spiegare in modo semplice, non l'hai capito abbastanza bene” (Albert Einstein).