Titoli con CSS

In questo tutorial vi insegnerò a creare dei titoli simili a quelli che utilizzo solitamente nei miei Layout:

h1 {display:block; height:18px; ... }

• Per prima cosa notiamo che andremo a lavorare e modificare l'aspetto del tag HTML <h1></h1>
• In questo tutorial non vi spiegherò l'utilizzo dell'attributo display:block; in quanto ho intenzione di scrivere a breve un tutorial a parte, per il momento prendete per buono che va inserito anche questo attributo.
• Ora dobbiamo specificare l'altezza del nostro rettangolo con il tag: height: valore_altezza px;

h1 {display:block; height:18px; background-image:url(indirizzo_immagine); background-repeat:no-repeat;}

• Richiamiamo attraverso l'attributo background-image: l'immagine che vogliamo utilizzare come sfondo del nostro rettangolo.
• Con l'attributo background-repeat: possiamo stabilire se ed in hce modo verrà ripetuta l'immagine, io in questo caso ho scelto di non ripeterla, ma voi potete modificare questo valore a seconda dell'immagine che sceglierete di usare come sfondo.
• no-repeat: l'immagine non verrà ripetuta
• repeat: l'immagine verrà ripetuta sia orrizzontalmente che verticalmente
• repeat-x: l'immagine verrà ripetuta solo orizzontalmente
• repeat-y: l'immagine verrà ripetuta solo verticalmente

h1 {display:block; height:18px; background-image:url(indirizzo_immagine); background-repeat:no-repeat; color:#FFFFFF; text-align:center; font-size:12px; }

• Ora concentriamoci sul testo. Possiamo impostare il colore attraverso l'attributo color:.
• L'attributo text-align: ci permette di decirede dove posizionare il nostro testo: a destra (right), a sinistra (left) oppure al centro (center)
• Per modificarene l'altezza usiamo l'attributo font-size: possiamo inserire un valore da 1 a 7, oppure la reale altezza in pixel.
• Nel caso in cui si voglia modificare anche il tipo di carattere basterà utilizzare: font-family: e inserire di seguito il nome del carattere.

h1 {display:block; height:18px; background-image:url(indirizzo_immagine); background-repeat:no-repeat; color:#FFFFFF; text-align:center; font-size:12px; border: 1px solid #ffffff}

You can help me to take on-line my site voting it or click on my Google Ads!
Potete aiutarmi a tenere on-line il sito votandolo o cliccando sui banner bublicitari di Google Ads