Come utilizzare CSS per dare uno stile ai collegamenti ipertestuali sulle pagine Web

Aprile 20, 2024

Se hai familiarità con HTML, sai che puoi controllare il colore del testo e dei collegamenti ipertestuali su una pagina web. Ma con i fogli di stile a cascata puoi fare molto di più. Alcuni tag come il tag di ancoraggio hyperlink hanno quelle che vengono chiamate pseudo-classi associate ai diversi stati del tag. Ad esempio, il tag hyperlink ha quattro stati; link, visitato, hover e attivo.

Quando un collegamento non viene utilizzato (non selezionato), questo è il collegamento pseudo-classe o stato. Il visitato lo stato è dopo che il collegamento è stato utilizzato. Il librarsi stato è quando il mouse passa sopra il collegamento e il attivo stato è quando si fa clic sul collegamento. La magia del CSS è che ogni stato del collegamento è controllato in modo indipendente tramite pseudo-classi. Quindi puoi impostare proprietà diverse per ogni stato. È possibile utilizzare qualsiasi proprietà associata al tag anchor del collegamento ipertestuale nei CSS.

Nell'esempio seguente, imposteremo lo stato del collegamento su rosso, lo stato visitato su viola (# 400040), il passaggio del mouse e gli stati attivi su rosso, sottolineato e corsivo.

Nota--La freccia

indica che il codice è racchiuso in una seconda riga e dovrebbe essere davvero tutto su una riga.

Come puoi vedere, abbiamo impostato la proprietà color su rosso per tutti gli stati ad eccezione dello stato visitato, che abbiamo impostato su viola. Poiché vogliamo solo che il collegamento ipertestuale sia sottolineato per il passaggio del mouse e gli stati attivi, abbiamo impostato la proprietà text-decoration su none per gli altri due stati. Infine, abbiamo impostato lo stile del carattere in corsivo per il passaggio del mouse e gli stati attivi, il che farà diventare il testo in corsivo quando passerai sopra o fai clic sul collegamento e abbiamo ripristinato la decorazione del testo per sottolineare. Questo è solo un semplice esempio. Puoi rendere i tuoi stili semplici o fantasiosi come desideri. Tuttavia, ci sono alcune cose da ricordare.

I browser Web differiscono nel modo in cui gestiscono questo. Di solito, se si imposta una proprietà su un determinato valore, verrà ereditata da (passata a) qualsiasi stato elencato dopo di essa. Nel nostro esempio sopra, il primo stato elencato nel nostro codice era lo stato del collegamento e impostiamo la proprietà color su rosso. Il più delle volte, questo sarebbe trasmesso agli altri tre stati a meno che non lo cambiassimo con il codice, come abbiamo fatto per lo stato visitato. Inoltre, se non avessimo ripristinato la decorazione del testo per sottolineare, il testo per il passaggio del mouse e gli stati attivi non sarebbe stato sottolineato perché lo abbiamo disattivato nel primo stato. Ma non puoi contare su tutti i browser per farlo. Pertanto, è meglio impostare tutte le proprietà per ogni stato individualmente.

Quando si progettano collegamenti elaborati, non apportare grandi cambiamenti tra gli stati, ad esempio aumentare notevolmente le dimensioni del testo. Questo farà sì che il browser web ricarichi la pagina e i tuoi visitatori si arrabbieranno molto con te.

L'ordine in cui si elenca il codice per queste pseudo-classi è influenzato dall'ordine in cascata. Discuteremo l'ordine a cascata in un tutorial successivo. Per ora ricorda solo che per prevenire conflitti, codifica gli stati nell'ordine che abbiamo usato sopra; link, visitato, hover e attivo.

Istruzioni Video: 1- Tutorial HTML: Inserire titolo e testo (Aprile 2024).

Come utilizzare CSS per dare uno stile ai collegamenti ipertestuali Su pagine Web, HTML, pseudo-classi associate ai diversi stati del tag, pseudo-classe, collegamento ipertestuale, collegamenti ipertestuali di codifica in CSS, pseudo-classe CSS, stati CSS, stato di un tag, collegamenti elaborati su una pagina web con CSS, link fantasiosi

Articolo Precedente

Articolo Successivo

Ergonomia semplificata

Aprile 2024

La parola "ergonomia" ha molte definizioni. L'origine della parola è greco - ergon, che significa lavoro e nomos che significa leggi naturali. Quindi la traduzione letterale della parola è la...

computer

Twilight - Recensione di eBook

Aprile 2024

Recensione di eBook Titolo del libro: Twilight Autore: Stephenie Meyer Pubblicato: 2005 Numero di pagine: 434 SINOSSI Bella Swan è un'adolescente diciassettenne che vive in Arizona con sua...