Pagina Web i collegamenti ipertestuali hanno molte proprietà che è possibile lo stile. È possibile modificare il colore, sottolineatura, sfondo e molti altri aspetti dell'apparenza con i CSS. Ecco alcuni suggerimenti per iniziare.

Istruzioni

Stili di collegamento per tutti i vostri link

1

Il selettore CSS per i collegamenti ipertestuali è il selettore A. Il termine corretto è ancora, non link, ma un elementi sono comunemente detti collegamenti. Un elementi possono essere mirate con i selettori CSS pseudo classe, basati sullo stato del collegamento. Le classi più comuni di pseudo utilizzano questi selettori CSS:

un: link
un: visitati
un: al passaggio del mouse
un: attivo

2

Le regole CSS per vari Stati di collegamento determinare font, testo-decorazione (o meno il collegamento è sottolineato), colore, colore di sfondo o immagine di sfondo, visualizzare proprietà quali inline o blocco, confine, imbottitura, margine e altre proprietà CSS

3

Questa semplice serie di regole prima rende tutti un elemento visualizzato in grassetto. Si passa quindi attraverso gli Stati di collegamento singolo per impostare diversi colori e i valori di testo-decorazione per ogni stato.

a {

font-weight: bold;
}

un: link () {

color: #660066;
text-decoration: none;

}
a: visited {

color: #663366;
text-decoration: none;

}
a: hover {

color: #660066;
text-decoration: underline;

}
a: active {

color: #660066;
text-decoration: none;

}

4

Regole come gli esempi in passaggio 3 si applicano a tutti i link su una pagina intera. Proprietà quali colore di sfondo, bordo e altri possono essere aggiunte alle regole come l'esempio nel passaggio 3.

Stili di collegamento per aree specifiche di una pagina web

5

La maggior parte delle pagine web sono strutturate in divisioni o aree che possono essere identificati con un id o una classe. Quando mettete il link in un div o altre sezioni di pagina web identificato con un id o una classe, è possibile creare selettori discendenti per stile il link con le regole che si applicano solo in quella sezione.

6

L'immagine in apertura di questo articolo ha mostrato un esempio di una pagina con collegamenti utilizzando stili diversi in base ai selettori discendenti. Assumere che le due aree della pagina web sono state create con div con ID assegnato. Il div contenuto utilizza l'id di "contenuto" e il div navbar utilizza l'id "navbar."

7

Uso l'id (o classi) che identificano le varie divisioni di una pagina web per creare selettori che funzionano solo in quella parte della pagina. Usando delle ipotesi formulate nel passaggio 2, regole per questi selettori creare stili diversi nelle due aree di una pagina:

contenuti un: linkcontent una: visitedcontent una: hovercontent una: activenavbar una: linknavbar un: visitednavbar una: hovernavbar un: attivo 8

Si supponga che la pagina utilizza una classe denominata "blogpost" per ogni voce. Collegamenti singolarmente per solo quelle aree della pagina, può essere stile troppo. Selettori discendenti per i collegamenti in solo quell'area della pagina potrebbero assomigliare a questo:

.blogpost un: link
.blogpost un: visitati
.blogpost un: al passaggio del mouse
.blogpost un: attivo

Consigli & Avvertenze

• Selettori di classe una pseudo meno comunemente utilizzati è una: messa a fuoco.
• Per scoprire come fare un link di visualizzazione come una barra di spostamento, vedere l'articolo come stile un elenco con i CSS
• Per ottenere i migliori risultati, mantenere le regole nel vostro foglio di stile in questo ordine: L-V-H-A, o link, visitato, hover, attivo.