Come Stile un collegamento con i CSS

December 9

Come Stile un collegamento con i CSS


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

istruzione

stili di collegamento per tutti i link

1 Il selettore CSS per i collegamenti ipertestuali è il selettore A. Il termine corretto è ancora, non collegare, ma un elementi sono comunemente chiamati i collegamenti. A elementi possono essere mirati con selettori CSS pseudo classe, in base allo stato del collegamento. Le classi pseudo più comuni usano questi selettori CSS:

un collegamento
a: visited
a: hover
a: active

2 regole CSS per i diversi stati di collegamento determinano carattere, text-decoration (se il collegamento è sottolineata), colore, colore di sfondo o background-image, proprietà di visualizzazione, come altre proprietà CSS in linea o blocco, bordo, padding, margini e

3 Questo semplice insieme di regole prima rende tutti un display elemento in grassetto. Si passa quindi attraverso i singoli Stati link per impostare diversi colori ei valori di testo-decorazione per ogni stato.

un {

font-weight: bold;
}

un collegamento {

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 riportati nel passaggio 3 si applicano a tutti i link su una pagina intera. Proprietà quali background-color, di confine e gli altri possono essere aggiunti alle leggi come l'esempio al punto 3.

stili di collegamento per le aree specifiche di una pagina web

5 La maggior parte delle pagine web sono disposti in divisioni o aree che possono essere identificati con un ID o classe. Quando si inserisce link a una sezione di pagina web o altro div identificato con un id o classe, è possibile creare selettori discendenti allo stile legami con regole che si applicano solo in quella sezione.

6 L'immagine in apertura di questo articolo ha mostrato un esempio di una pagina con i link che utilizzano stili diversi in base selettori discendenti. Assumere le due aree della pagina web sono stati creati con div con ID assegnati. Il div contenuti utilizza l'ID "contenuti" e il div barra di navigazione utilizza l'ID "barra di navigazione".

7 Utilizzare l'ID (o classi) che identificano varie divisioni di una pagina web per creare selettori che funzionano solo in quella parte della pagina. Utilizzando le ipotesi formulate al punto 2, le regole per questi selettori creerebbero stili diversi in due aree di una pagina:

il contenuto di una: linkcontent una: visitedcontent una: hovercontent una: activenavbar una: linknavbar una: visitednavbar una: hovernavbar a: active

8 Supponiamo che la pagina utilizza una classe denominata "blogpost" per ogni voce. È possibile lo stile link singolarmente solo per quelle aree della pagina, anche. selettori discendenti per i collegamenti solo in quella zona della pagina potrebbe assomigliare a questo:

.blogpost a: link
.blogpost a: visited
.blogpost a: hover
.blogpost a: active

Consigli e avvertenze

  • A meno comunemente usati selettori di pseudo classe è una: messa a fuoco.
  • Per scoprire come fare un display link come una barra di navigazione, vedere l'articolo Come Stile un elenco con i CSS
  • Per ottenere i migliori risultati, mantenere le regole nel foglio di stile in questo ordine: LVHA, o collegamento, ha visitato, hover, attivo.