CSS Active Link
Przykład 1
Otwórz plik HTML, aby utworzyć linki. W celu stylizacji tych linków utworzymy nasz plik CSS. Używamy Visual Code Studio do wykonania tych przykładów. Tak więc tworzymy plik HTML, a kod HTML jest również podany. Po zakończeniu kodu zapisz go z „.rozszerzenie html ”.
W poprzednim kodzie HTML tworzymy trzy różne linki. Pierwszym utworzonym linkiem jest link „Google”, drugim linkiem jest link „Yahoo”, a ostatni link to link „Firefox”. Będziemy również stylizować te linki w CSS. Ten plik HTML jest dostępny po prostu do tworzenia tych linków. Teraz przejdź do następującego pliku CSS i zobacz, jak stylizować te linki.
Kod CSS
Na poprzednim obrazie używamy selektora „: Active”, którego używamy, aby nadać styl temu linkowi. Gdy użytkownik naciska ten link, kolor tła linku zmienia się „żółty”. Następnie mamy selektor „: link”, który styluje link, który nie jest odwiedzany i zmienia kolor niewidomowanego linku na „niebieski”. Na ekranie pojawi się „niebieski”. Następnie używamy selektora „: odwiedzonego” i ten odwiedzany selektor zmienia kolor odwiedzonego linku na „fioletowy”. Wreszcie, mamy selektor „: Hover”, w którym zmieniamy kolor linku na kolor „czerwony”, gdy kursor przesuwa się nad linkiem. Podczas poruszania myszy na tych linkach kolor tych linków zmienia się na „czerwony”. W tym przykładzie zmieniliśmy kolor linku, gdy na nim zawisujesz i odwiedzisz link lub kolor niewidomowanego linku.
Wyjście
Możesz zobaczyć trzy linki na poprzednim obrazie. Pierwsze dwa linki to kolor „fioletowy”, więc oznacza to, że te dwa linki są odwiedzane. Kolor trzeciego linku jest „niebieski”, co oznacza, że ten trzeci link nie jest odwiedzany, ponieważ ustawiamy te kolory w kodzie CSS dla odwiedzonych i niezapomnianych linków. Kiedy unosimy się na dowolnym linku, jego kolor zmienia się w „czerwony” kolor. Po kliknięciu dowolnego linku kolor tła linku będzie wyglądał „żółty”. Po kliknięciu pierwszego linku Google strona Google pojawi się na ekranie, jak pokazano na poniższym obrazku:
Przykład 2
To kolejny przykład, w którym tworzymy związek między akapitem i podajemy style temu linkowi w CSS. Zobaczmy, jak link jest aktywny między akapitami.
Na poprzednim obrazie widać, że utworzyliśmy akapit za pomocą HTML i dodaliśmy link między akapitem. W tym przykładzie użyjemy CSS, aby zmienić kolor linku i akapitu.
Kod CSS
W poprzednim pliku CSS widać, że zmieniliśmy kolor linku na „niebieski” wewnątrz kręconych aparatów ortodontycznych „: link”, więc ten link pojawi się niebieski między akapitami. Następnie używamy „czerwonego” do odwiedzonego linku. W celu „zawieszonego” wybieramy kolor tła jako „żółty”. „Aktywny” kolor linku jest ustawiony jako „fioletowy”, a aktywny kolor akapitu jest oznaczony jako kolor „#EEE”. Tak więc, gdy link jest aktywny, zmienia kolor linku, a także kolor tła akapitu.
Wyjście
W tym pierwszym wyjściu widać, że kolor linku w akapicie pojawia się „niebieski”, ponieważ ustawiamy go jako „niebieski” w naszym pliku CSS.
W drugim wyjściu kolor łącza zmienia się w „czerwony”, co oznacza, że odwiedziliśmy tutaj link, więc jego kolor został zmieniony z „niebieskiego” na „czerwony”.
Przykład 3
W tym trzecim przykładzie zmienimy rozmiar czcionki, styl czcionki i kolory za pomocą CSS. W tym celu musimy utworzyć różne linki w HTML.
W poprzednim HTML utworzyliśmy pięć różnych linków za pomocą różnych klas wewnątrz „”. Podajemy nazwę klasy jako „Link1”, „Link2”, „Link3”, „Link4” i „Link5”. Używamy tych nazw do zmiany stylu linku.
Kod CSS
Używamy nazwy „Link1” klasy i stosujemy styl w tym pierwszym linku. Pierwszy link pojawia się „czerwony”, gdy jest „aktywny”. Następnie zmieniamy „rozmiar czcionki” drugiego linku. Kiedy unosimy się nad tym linkiem, rozmiar tego linku wzrasta do „150%”. Ustawiamy „kolor tła” trzeciego linku na „czerwony”, więc kolor tła staje się „czerwony”, gdy unosimy się na trzecim linku. Zmieniamy styl czcionki czwartego linku, wykorzystując nieruchomość „rodziny czcionki”. Używamy „dekoracji tekstu” w piątym linku i ustawiamy go na „Podkreśl”. Wyjście jest pokazane.
Wyjście
To wyjście zmienia kolor, gdy unosimy się na pierwszym linku. Kiedy unosimy się nad drugim linkiem, jego rozmiar czcionki zmienia się. Jeśli chodzi o trzeci link, jego kolor tła zmienia się. Styl czcionki zmienia się w „Monospace”, gdy unosisz się nad czwartym linkiem.
Przykład 4
W tym przykładzie utworzymy dwa przyciski linków z linkami wewnątrz przycisków. W pierwszym przycisku umieszczamy link „Gmaila”. W drugim przycisku umieszczamy link „Facebook”. Tak więc, kiedy klikniesz przycisk One, otworzy stronę Gmaila. Po kliknięciu drugiego przycisku otworzy stronę na Facebooku. Teraz chcemy również zastosować styl tych linków.
Gdy ten link jest aktywny, kolor tego linku wydaje się „czerwony”, gdy umieszczamy „kolor: czerwony” wewnątrz kręconych aparatów ortodontycznych „: Active” selektora. Kiedy unosimy się nad tym linkiem, który znajduje się wewnątrz przycisku, kolor przycisku zmienia się „różowy”, gdy ustawiamy ten kolor w pliku CSS. Po odwiedzeniu tych linków kolor będzie „niebieski”, a kolor tła przycisku będzie „biały”.
Wyjście
Poprzednie wyjście pokazuje dwa przyciski linków, w których mamy dwa różne linki, i widać, że kolor obu linków jest „niebieski”, co oznacza, że oba linki są odwiedzane.
Wniosek
W tym przewodniku dowiedzieliśmy się o „aktywnym linku”. Zastosowaliśmy różne styl na różnych linkach za pomocą właściwości CSS. Wykonaliśmy tutaj cztery różne przykłady, ponieważ wiemy, że link jest aktywny po naciśnięciu. Tutaj zmieniliśmy styl aktywnego linku, rozmiar czcionki linku, gdy na nim unosimy się, oraz kolor po wizycie linku. W tym przewodniku wykorzystaliśmy różne kolory do odwiedzanych i niewidocznych linków. Nauczyliśmy się szczegółowo stylizować te aktywne linki w CSS.