Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 16 di 49
  • livello principiante
Indice lezioni

Personalizzare l'aspetto dei link

Come applicare stili differenti ai link presenti in una pagina
Come applicare stili differenti ai link presenti in una pagina
Link copiato negli appunti

Come abbiamo appreso dalle guide di base del CSS, è possibile personalizzare ogni proprietà dell'elemento <a>, quello che ci consente di inserire collegamenti ipertestuali nella nostra pagina. Possiamo definirne il colore, la dimensione del testo, il colore di sfondo e così via.

Nei moderni layout, però, una pagina non utilizza lo stesso sfondo e/o colore del testo in ogni sezione quindi assegnare un unico stile a tutti i collegamenti potrebbe portare a risultati indesiderati: testi illeggibili, formattazione errata, etc.

In questa lezione vedremo quanto sia semplice assegnare differenti stili ai link all'interno della pagina in maniera da rendere più gradevole e usabile il risultato finale nel layout della pagina.

Stile globale

Ci sono alcune proprietà che sono comuni a tutti i link, indipendentemente dalla sezione in cui sono contenuti nella pagina. Queste proprietà è buona norma inserirle una sola volta all'inizio del foglio di stile per evitare inutili ripetizioni che comportano spreco di spazio e prestazioni.

Queste proprietà saranno quelle che verranno ampliate e personalizzate all'interno di ogni differente stile dei link che definiremo in seguito.

Vediamo quindi un semplice esempio di stile globale:

a:link, a:visited {
    text-decoration: underline;
    color: #F58529;
    background-color: transparent;
}
a:hover, a:active {
    text-decoration: underline overline;
    color: #aaa;
}

Abbiamo semplicemente scelto un colore arancione per i link e una scala di grigio per l'effetto hover sul link.

Stili differenti per sezioni differenti

Prendiamo un esempio classico di sezioni che necessitano di stili differenti dei link. Un post all'interno di un blog contiene una sezione con il titolo, una per eventuali metadati, una per il contenuto e altre sezioni opzionali. Vediamo quindi come assegnare uno stile differente ad ogni sezione del post partendo dal codice visto in precedenza.

Il codice HTML che utilizzeremo per l'esempio è il seguente:

<div class="post">
    <div class="title"><a href='page2.html'>Lorem ipsum dolor sit amet</a></div>
    <div class="meta">Categorie: <a href="#">Lorem</a>, <a href="#">Ipsum</a></div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet... </p>
        <p>Sed consectetur porta felis ac vestibulum... </p>
    </div>
    <div class="comments"><a href="#">25 comments</a></div>
</div>

Lo stile utilizzato per le sezioni è il seguente:

.post {
    width: 500px;
    margin: 0 auto;
    text-align: left;
}
.title {
    background: #FAA53A;
    padding: 10px 0;
}
.meta {
    text-align: right;
}
.content {
    margin-top: 15px;
    text-align: justify;
}
.comments {
    background: #FAA53A;
    padding: 5px 0;
    text-align: right;
}

Utilizzando il solo stile dei link visto in precedenza avremo dei seri problemi di visualizzazione all'interno delle sezioni relative al titolo e ai commenti dato che il colore di sfondo è molto simile a quello dei link. Il risultato ottenuto, infatti, è il seguente:

Figura 1 - Risultato con il solo stile globale
Risultato con il solo stile globale

Abbiamo quindi bisogno di personalizzare lo stile dei link contenuti al loro interno. Per realizzare ciò sfruttiamo una delle regole più importanti del CSS: il selettore discendente.

Attraverso il seguente codice, quindi, possiamo personalizzare facilmente i link contenuti nelle sezioni title e comments senza modificare lo stile di base degli altri elementi:

.title a:link, .title a:visited {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.3em;
}
.comments a:link, .comments a:visited {
    color: white;
}

L'esempio finale è disponibile su questa pagina.

Ti consigliamo anche