In modifica colori & stili, in fondo, aggiungere questo codice
HTML
.tab a:link, .tab a:visited {display:block; color: #hex; text-align: left; background: #hex; border-left: 10px solid #hex; padding: 1px; padding-left: 3px; margin-top: 1px}
.tab a:hover {display:block; background: #hex; border-right: 10px solid #hex; text-align: right; border-left: 10px #hex solid}
.PAROLA serve a creare una classe, che verrà richiamata successivamente con l'html inserendo
class="PAROLA" all'interno del tag.
Link con richiamo (da inserire nel punto desiderato)
HTML
<div class="tab">
<a href="URL">Testo</a>
<a href="URL">Testo</a>
<a href="URL">Testo</a>
<a href="URL">Testo</a>
<a href="URL">Testo</a>
</div>
Analizziamo il codice inserito nel CSS
.tab a:link, .tab a:visited conterranno la descrizione della struttura dei link in "default" e una volta che saranno stati cliccati
Eventualmente, sarà possibile separare a:link e a:visited perché assumano diverse caratteristiche, in questo modo
.tab a:link {DESCRIZIONE}
.tab a:visited {DESCRIZIONE}
è quello che ci interessa in particolare, poiché contiene le istruzioni affinché il testo cambi allineamento (da destra a sinistra o viceversa), colore e magari anche colore di sfondo (o dimensioni, effetti, quant'altro si voglia aggiungere).
HTML
.tab a:link, .tab a:visited {display:block; color: #hex; text-align: left; background: #hex; border-left: 10px solid #hex; padding: 1px; padding-left: 3px; margin-top: 1px}
Sostituire HEX con il codice esadecimale che corrisponde al colore desiderato; corrisponde al colore del testo
text-align: left allinea il testo a sinistra. È possibile variare l'allineamento in letf - right - center
background: #hex Si può benissimo decidere di eliminare questa parte. Aggiunge un colore di sfondo al testo.
Esempio:
Senza_sfondo Con_sfondo
Aggiunge un bordo a sinistra della scritta. Il bordo può essere inserito a destra (border-right) o a sinitra, in alto (border-top) o in basso (border-bottom), oppure intorno al blocco della scritta togliendo "-left" e lasciando semplicemente "border". Il bordo può essere
solido (solid),
punteggiato (dotted) o
tratteggiato (dashed).
Esempio:
SOLID Border
SOLID Border-left
DOTTED Border
DOTTED Border-left
DASHED Border
DASHED Border-left
Npx (Sostituire N con un numero) definisce lo spessore del bordo in pixel.
HTML
.tab a:hover {display:block; background: #hex; border-right: 10px solid #hex; text-align: right; border-left: px #hex solid}
Quando il mouse passerà sul link, la scritta si sposterà a destra anziché a sinistra
border-left: px #hex solid Il codice elimina il bordo a sinistra (non è specificato lo spessore in pixel, quindi non appare), ma a scelta si può modificare questo pezzo per inserire il bordo dove e come si desidera
Un esempio base lo trovate qui in alto in tabella
Guida by Kirugoshi ©
