Modificare l’aspetto dell’elemento <hr>
Traduzione dell'articolo originale "Styling the <hr> element" di Russ Weakley.
12 Novembre 2008
L’elemento <hr> in HTML non ha un tag di chiusura. E’ utilizzato per inserire una linea orizzontale di separazione nella pagina. La quantità di spazio verticale inserita tra la barra ed il contenuto che la circonda dipende dal browser.
Come fare per eliminare l’ombreggiatura che è visualizzata normalmente per l’elemento <hr> in alcuni browsers? E’ possibile modificare l’aspetto di un elemento <hr> in modo tale che appaia in maniera simile in tutti i browsers moderni?
Potete trovare la risposta su css-discuss: "Internet Explorer usa la proprietà “color”, che è scorretta. La proprietà “color” si applica al colore del testo in primo piano, no al colore di sfondo. Comunque, Mozilla (Netscape) e Opera usano la proprietà “background-color”. Nei browsers come Opera e Mozilla, sarà visualizzato il bordo della vostra barra. Per eliminare questo bordo impostate la proprietà “border” uguale a zero.
hr
{
color: red;
background: red;
border: 0;
height: 1px;
}
Aggiungere spazio attorno all’elemento <hr>
Potete anche definire lo spazio sopra e sotto l’elemento <hr> utilizzando i margini. Per esempio, se sopra l’elemento volete uno spazio alto quanto un carattere e sotto uno spazio doppio, potete aggiungere la seguente dichiarazione:
hr
{ color: red;
background: red;
border: 0;
height: 1px;
margin: 1em 0 2em; }
Notate che sono stati assegnati soltanto tre valori alla proprietà “margin”. In questo modo sarà applicato 1em al margine superiore dell’elemento <hr>, nessun margine ai due lati ed un margine di 2em sotto.
Ti è piaciuto questo articolo? Aggiungilo a: del.icio.us
