Jak stylizować linki za pomocą CSS?

Linki to podmioty wskazujące nowe lokalizacje. Te hiperłącza lub linki odgrywają istotną rolę na stronach internetowych, gdy chcesz, aby użytkownicy odwiedzili inne treści dostępne online. Oznaczają one treści dostępne w tej samej stronie internetowej lub treści dostępne na innych stronach internetowych. Teraz wiemy, jak znaczące jest sprawienie, aby Twoja witryna wyglądała wizualnie, dlatego styl hiperłącza jest równie ważna, jak stylizacja innego elementu na Twojej stronie. Musisz zastanawiać się, jak to zrobić. Cóż, trzymaj się mocno, ponieważ ten post poprowadzi Cię o stylizację linków.

Jak stylizować linki?

Linki lub hiperłącza na stronie internetowej można zaprojektować przy użyciu różnych właściwości CSS. Linki do stylizacji mogą obejmować zmianę ich koloru, wielkości czcionki, rodziny czcionek itp.

Przykład
Załóżmy, że chcesz, aby hiperłącze na Twojej stronie miało odważny styl, a jej kolor powinien być zielony. Użyj następującego fragmentu kodu.

Wyjście

Kolor i masa czcionki linku zostały pomyślnie zmienione.

Stylowe linki według stanów

Linki wyświetlane na stronie internetowej mają różne stany i można je zaprojektować na podstawie ich obecnego stanu. Różne stany, które może mieć link;

Odp.: Link (link, który nie został jeszcze odwiedzony przez użytkownika)

Odp.: Odwiedzono (link odwiedzany przez użytkownika)

Odp.: Wpadek (Stan linku, gdy kursor myszy jest przesuwany na link)

Odp.: Aktywne (Stan linku, gdy użytkownik kliknie link)

Stylowe linki zgodnie z ich stanami są konieczne, ponieważ pozwalają użytkownikowi zrozumieć warunek linku i uniemożliwia użytkownikowi stawienie czoła jakimkolwiek zamieszaniu.

Przykład
Użyj następującego fragmentu kodu, aby stylizować linki na swojej stronie według ich stanu.

Wyjście

1. Gdy link nie jest jeszcze odwiedzany przez użytkownika.
   
2. Kiedy użytkownik odwiedza link.
   
3. Kiedy użytkownik przynosi mysz na link.
   
4. Gdy użytkownik kliknie link.
   

Notatka: Podczas stylizacji wielu linków zachowaj wyżej wymienione zamówienie, aby twoje linki zachowały się odpowiednio. Załóżmy, że najpierw unosisz styl, zamiast odwiedzić styliza.

Jak usunąć domyślne podkreślenie z HerLinks

Domyślnie istnieje podkreślenie linków na stronie internetowej, która czasami może być niechciana. Możesz pozbyć się podkreślenia z linków za pomocą właściwości dekoracji tekstu CSS. Poniższy fragment kodu pokazuje, jak można to zrobić.

W powyższym przykładzie domyślne podkreślenie jest usuwane z niezapomnianego łącza, ustawiając wartość właściwości dekoracji tekstu na „Brak”. Możesz użyć powyższego fragmentu kodu, aby usunąć również podkreślenie z innych stanów linku.

Wyjście

Domyślne podkreślenie jest pomyślnie usuwane z niewidomowanego linku.

Linki jako przyciski

Czasami zwykłe linki tekstowe pojawiające się na stronie internetowej mogą być nudne, aby uczynić je bardziej atrakcyjnymi, możesz sprawić, że linki pojawiają się jako przyciski na swojej stronie internetowej. Tworzenie linków jako przyciski wykorzystują wiele właściwości CSS, takich jak wyściółka, granica, kolor tła itp.

Poniższy przykład ilustruje, jak używasz linków jako przycisków.

W powyższym fragmencie kodu link jest wyświetlany jako przycisk. Niewidziane i odwiedzone stany przycisku są stylizowane inaczej niż stany aktywne linku.

Wyjście

1. Nieprzestrzegany i odwiedzony stan przycisku.
   
2. Podnoszenie i aktywne stany łącza przycisku.
   

Link we wszystkich jego stanach został pomyślnie zaprojektowany jako przycisk.

Wniosek

Linki do stylizacji lub hiperłącza na stronie internetowej są równie ważne, jak stylizacja każdego innego elementu. Do celów stylistyki stosuje się różne właściwości CSS, takie jak kolor, kolor tła, rodzina czcionki, styl czcionki itp. Linki można również zaprojektować zgodnie z ich stanami, które są niewidoczerpane, odwiedzane, zawieszone i aktywne, w celu zwiększenia wyglądu linków pojawiających się na stronach internetowych, możesz używać linków jako przycisków. W tym spisie omawia, jak stylizować linki za pomocą CSS za pomocą odpowiednich przykładów.