Come fare una riga colorata con il CSS
Come realizzare una riga utilizzando il linguaggio CSS. Il CSS può esservi utile in vari modi. Se avete difficoltà a creare un sito web in CSS, soprattutto se siete all'inizio, potete cimentarvi a utilizzare il linguaggio CSS nel codice HTML della vostra pagina web per modificare qualche elemento grafico. Ad esempio, il tag HR consente di visualizzare una riga sulla pagina HTML. È poco utilizzato in quanto l'effetto grafico è obsoleto e ricorda un po' le prime pagine web degli anni '90.
Il linguaggio CSS vi consente di modificare la forma, lo spessore e il colore del tag, rendendolo conforme al design del vostro sito. Come prima cosa, inseriamo il codice CSS nella sezione HEAD della pagina per definire i nuovi colori della riga HR. Nel seguente esempio definiamo il colore blu ( background ), con un'altezza pari a un pixel e uno spessore del bordo pari a zero ( senza bordo ).
<html>
<head>
<style type="text/css">
hr
{
color: #00f;
background: #00f;
border: 0;
height: 1px;
}
</style>
</head>
<body>
esempio di riga orizzontale con <HR>
</body>
</html>
Quando nel codice HTML inseriamo il tag <HR>, l'effetto grafico sul browser dell'utente è, adesso, una riga più sottile di colore blu. Più o meno, l'effetto sulla riga è il seguente:
A questo punto, potete esercitarvi provando a cambiare ii colore della riga e l'altezza della riga, modificando i parametri background ed height. È troppo facile? Bene. Era proprio quello che volevamo. Fare un esempio, quasi banale, per consentire a chiunque non conosca il CSS di avvicinarsi alla logica del linguaggio. Il primo passo verso il CSS. 16 / 08 / 2013
