Collegamento attivo CSS
Esempio 1
Apri il tuo file HTML per creare collegamenti. Per lo styling di questi collegamenti, creeremo il nostro file CSS. Stiamo usando lo studio del codice visivo per eseguire questi esempi. Quindi, creiamo il file HTML e il codice HTML è anche fornito qui. Dopo aver completato il codice, salvalo con ".Estensione HTML ".
Nel precedente codice HTML, creiamo tre diversi collegamenti. Il primo link che abbiamo creato è il link "Google", il secondo link è il link "Yahoo" e l'ultimo link è il link "Firefox". Abbandoneremo anche questi collegamenti in CSS. Questo file HTML è qui per la semplice creazione di questi collegamenti. Ora, passa al seguente file CSS e guarda come modellare questi collegamenti.
Codice CSS
Nell'immagine precedente, utilizziamo il selettore ": attivo", che usiamo per dare stile a quel collegamento. Quando l'utente preme questo link, il colore di sfondo del collegamento diventa "giallo". Quindi abbiamo il selettore "Link", che consente il collegamento che non viene visitato e cambia il colore del collegamento non visitato a "Blue". Apparirà "blu" sullo schermo. Successivamente, utilizziamo il selettore ": visitato" e questo selettore visitato cambia il colore del collegamento visitato a "viola". Infine, abbiamo il selettore "Hover" in cui cambiamo il colore del collegamento a un colore "rosso" quando il cursore si muove sul collegamento. Quando muovi il mouse su questi collegamenti, il colore di questi collegamenti cambia in "rosso". In questo esempio, abbiamo modificato il colore del link quando ci si litiga e visiti il link o il colore del link non visitato.
Produzione
Puoi vedere tre collegamenti nell'immagine precedente. I primi due collegamenti sono il colore "viola", quindi significa che questi due collegamenti vengono visitati. Il colore del terzo link è "blu", il che significa che questo terzo link non viene visitato mentre impostiamo questi colori nel codice CSS per i collegamenti visitati e non visitati. Quando ci libramo su qualsiasi link, il suo colore si trasforma in un colore "rosso". Quando facciamo clic su qualsiasi link, il colore dello sfondo del collegamento apparirà "giallo". Quando facciamo clic sul primo link Google, la pagina Google verrà visualizzata sullo schermo, come mostrato nella seguente immagine:
Esempio 2
Questo è un altro esempio in cui creiamo un collegamento tra il paragrafo e diamo stili a questo link in CSS. Vediamo come il collegamento è attivo tra i paragrafi.
Nell'immagine precedente, puoi vedere che abbiamo creato un paragrafo usando HTML e aggiunto un collegamento tra il paragrafo. Useremo CSS in questo esempio per cambiare il colore del collegamento e del paragrafo.
Codice CSS
Nel precedente file CSS, puoi vedere che abbiamo modificato il colore del link a "blu" all'interno delle parentesi graffe di ": link", quindi questo link apparirà blu tra i paragrafi. Quindi, utilizziamo un colore "rosso" per il collegamento visitato. Per "Hover", selezioniamo il colore di sfondo come "giallo". Il colore "attivo" del collegamento è impostato come "viola" e il colore del paragrafo attivo è designato come colore "#eee". Quindi, quando il collegamento è attivo, cambia il colore del collegamento e il colore di sfondo del paragrafo.
Produzione
In questo primo output, puoi vedere che il colore del link nel paragrafo appare "blu" mentre lo impostiamo come "blu" nel nostro file CSS.
Nel secondo output, il colore del collegamento si trasforma in "rosso", il che significa che abbiamo visitato il link qui, quindi il suo colore è cambiato da "blu" a "rosso".
Esempio 3
In questo terzo esempio, cambieremo le dimensioni del carattere, lo stile dei caratteri e i colori del link usando CSS. Per questo, dobbiamo creare collegamenti diversi in HTML.
Nel precedente HTML, abbiamo creato cinque diversi collegamenti utilizzando le diverse classi all'interno del "". Diamo il nome della classe come "link1", "link2", "link3", "link4" e "link5". Usiamo questi nomi per cambiare lo stile del collegamento.
Codice CSS
Usiamo il nome "link1" della classe e applichiamo lo stile su questo primo link. Il primo collegamento appare "rosso" quando è "attivo". Quindi, cambiamo la "dimensione del carattere" del secondo collegamento. Quando ci libramo su questo link, la dimensione di questo link aumenta al "150%". Impostamo il "colore di sfondo" del terzo collegamento a "rosso", quindi il colore di sfondo diventa "rosso" quando ci litighiamo sul terzo collegamento. Cambiamo lo stile del carattere del quarto link utilizzando la proprietà "Font-Family". Usiamo la "delerazione del testo" nel quinto link e lo impostiamo su "sottolinearsi". L'output è mostrato.
Produzione
Questo output cambia il suo colore quando ci passiamo al primo collegamento. Quando ci libramo sul secondo link, la dimensione del carattere cambia. Quando si tratta del terzo link, il suo colore di sfondo cambia. Lo stile del carattere cambia in "monospace" quando si libra sul quarto link.
Esempio 4
In questo esempio, creeremo due pulsanti di collegamento con collegamenti all'interno dei pulsanti. Nel primo pulsante, posizioniamo il collegamento di "Gmail". All'interno del secondo pulsante, mettiamo il link di "Facebook". Quindi, quando fai clic sul pulsante uno, aprirà la pagina Gmail. Quando si fa clic sul secondo pulsante, aprirà la pagina Facebook. Ora, vogliamo anche applicare lo stile di questi collegamenti.
Quando questo collegamento è attivo, il colore di questo collegamento appare "rosso" mentre posizioniamo il "colore: rosso" all'interno delle parentesi graffe del selettore ": attivo". Quando ci libramo su questo link, che si trova all'interno del pulsante, il colore del pulsante diventa "rosa" mentre impostiamo questo colore nel file CSS. Dopo aver visitato questi collegamenti, il colore sarà "blu" e il colore dello sfondo del pulsante sarà "bianco".
Produzione
L'output precedente mostra due pulsanti di collegamento in cui abbiamo due collegamenti diversi e puoi vedere che il colore di entrambi i collegamenti è "blu", il che significa che entrambi i collegamenti vengono visitati.
Conclusione
Abbiamo imparato il "collegamento attivo" in questa guida. Abbiamo applicato uno stile diverso su collegamenti diversi utilizzando le proprietà CSS. Abbiamo eseguito quattro vari esempi qui poiché sappiamo che il collegamento è attivo quando viene premuto. Qui, abbiamo cambiato lo stile del collegamento attivo, la dimensione del carattere del link quando ci litighiamo e il colore dopo aver visitato il collegamento. Abbiamo usato colori diversi per i collegamenti visitati e non visitati in questa guida. Abbiamo imparato a modellare questi collegamenti attivi in CSS in dettaglio.