Jak stylizować linki za pomocą CSS: szczegółowy samouczek dla początkujących

W tym samouczku omówimy stylizację linków internetowych za pomocą CSS. Linki są centralną częścią każdej strony internetowej. Pozwalają one przenieść odwiedzających do innych części, odwoływać się do źródeł, aby podkreślić swoje uwagi, pomóc czytelnikom znaleźć bardziej odpowiednie posty na blogu i nie tylko.

Nauczenie się, jak zmieniać ich wygląd, pozwala upewnić się, że są one rozpoznawalne jako linki i pasują do reszty witryny. CSS oferuje wiele różnych sposobów i właściwości, więc przejrzyjmy je jeden po drugim.

Standardy linków i domyślne style linków

Zanim przejdziemy do wprowadzania zmian w projekcie linków, najpierw poznajmy ich skład. Oto jak element link wygląda w HTML:

 <a href="https://torquemag.io/">TorqueMag</a>

Jak widać, składa się z kilku części:

• <a> — jest to operator do tworzenia elementu łącza. Dlaczego a Ponieważ w języku HTML linki są również nazywane tagami kotwicy .
• href="" — Wszystko w cudzysłowie wskazuje miejsce, na które wskazuje ten link. To adres, na który trafi ktoś, kto w niego kliknie.
• TorqueMag – To jest tekst linku, który pojawia się na stronie, np. tak (nie klikaj, ten link prowadzi donikąd).
• </a> – części, które zamykają element linku i informują przeglądarkę, że tekst linku kończy się tutaj.

Jak dotąd tak łatwo.

Jak domyślnie wygląda link

Ciekawie robi się, gdy patrzysz, jak ten rodzaj linku wygląda na stronie. Prawdopodobnie już to widziałeś.

Jeśli zadeklarujesz jakikolwiek stary link w dokumencie HTML i nie podasz żadnych informacji o stylizacji, przyjmie on domyślną stylizację:

1. Tekst linku jest niebieski, a sam link jest podkreślony.
2. Kiedy najedziesz na nią myszą, kursor zmieni się w małą ikonę dłoni.
3. Kiedy go klikniesz, przez sekundę zmieni kolor na czerwony.
4. Po odwiedzeniu linku jego kolor zmieni się na fioletowy.
5. Gdy przejdziesz do linku za pomocą klawisza tabulatora na klawiaturze, będzie on otoczony niebieskim konturem.

Standardy te zostały ustalone we wczesnych dniach Internetu i niewiele się zmieniły od lat 90-tych. Zabawne jest to, że nawet jeśli nigdy nie myślałeś o tym świadomie, na pewnym poziomie prawdopodobnie byłeś świadomy większości z powyższych rzeczy tylko podczas surfowania po Internecie.

Nauka o stanach łączy

Coś, co również staje się oczywiste z powyższego, to to, że linki mają różne stany, które wpływają na to, jak wyglądają. Możesz kierować je za pomocą różnych pseudoklas CSS, które pozwalają wpływać na ich indywidualny styl. To są:

• a – To jest wspomniany wcześniej tag kotwicy. Dotyczy wszystkich linków na wszystkich etapach.
• a:link – dla normalnego, nieodwiedzonego linku. Z technicznego punktu widzenia, :link kieruje się na wszystkie znaczniki kotwicy, które mają atrybut href . W rzeczywistości nie jest tak często używany. Wiele osób po prostu używa a , ponieważ tagi kotwicy bez atrybutu href są raczej rzadkie, więc często nie ma potrzeby tego typu rozróżniania.
• a:visited — opisuje link, który odwiedził wcześniej bieżący użytkownik, co oznacza, że ​​istnieje w historii przeglądarki.
• a:hover – Styl celu, który pojawia się, gdy użytkownik najedzie kursorem myszy na link.
• a:active – Stylizacja krótko widoczna w momencie kliknięcia w link.
• a:focus – skoncentrowany link, np. do którego użytkownik przeszedł za pomocą klawisza tabulacji. hover i focus są często stylizowane razem.

Ważne jest, aby pamiętać, że podczas zmiany stylu dla kilku stanów łącza naraz należy to zrobić w następującej kolejności.

1. a
2. a:link
3. a:visited
4. a:focus
5. a:hover
6. a:active

Stylizacja stanów łączy jest budowana na sobie nawzajem i kaskadowo spada. Dlatego kolejność ma znaczenie, aby upewnić się, że działają zgodnie z przeznaczeniem.

Spełnianie oczekiwań użytkowników

Ostatnim na marginesie, zanim przejdziemy do tego, jak możesz wprowadzić zmiany w stylu linków za pomocą CSS, jest rozmowa o oczekiwaniach użytkowników. Powodem, dla którego najprawdopodobniej łatwo rozpoznałeś linki domyślne jako linki, jest to, że pewne wartości domyślne są zakorzenione w nas jako użytkownikach od bardzo dawna.

W konsekwencji my – i wszyscy inni – mamy bardzo jasne oczekiwania co do wyglądu linków. Oczekiwania, które, jeśli nie zostaną spełnione, mogą utrudnić ludziom rozpoznanie powiązań takimi, jakimi są. Z tego powodu, pracując nad projektem swojej strony internetowej, dobrze zrobisz, aby pozostać blisko tych oczekiwań.

W praktyce oznacza to:

• Upewnij się, że linki są w jakiś sposób wyróżnione. Kolory lub podkreślenia są w porządku, o ile linki wyróżniają się na stronie. Unikaj takich rzeczy jak kursywa lub pogrubienie .
• Przekaż informację zwrotną, zmieniając linki po najechaniu i, w mniejszym stopniu, kliknięciu ( a:active , pamiętasz?). Nie powinieneś również zadzierać z tym, że kursor zmienia się w symbol ręki, aby wskazać element interaktywny.

Poniżej dowiesz się, jak zmienić wszystkie powyższe. Pamiętaj jednak, że powinieneś robić to z umiarem, aby uniknąć frustracji użytkowników.

Jak zmienić styl tekstu linku za pomocą CSS

Porozmawiajmy najpierw o tym, jak zmienić tekstową część linku, ponieważ to jest jego sedno.

Modyfikowanie koloru tekstu łącza

Rzeczy, które omówimy w tej sekcji, są stosunkowo podobne do naszego artykułu o deklarowaniu kolorów za pomocą CSS. Jeśli więc naprawdę chcesz zagłębić się w szczegóły, radzę zajrzeć również do tego postu.

Możesz zmienić kolor tekstu linku na kilka różnych sposobów: kolorowe słowa i różne systemy notacji kolorów, takie jak kod HEX, rgb() / rgba() , hsl() / hsla() , itd.

 #link-one { color: red; } #link-two { color: #3af278; } #link-three { color: rgb(61, 76, 128); }

Oto jak powyższe wygląda na stronie:

Najczęściej będziesz używać czegoś takiego jak HEX lub rgb() . Używanie nazw kolorów jest niezwykle rzadkie poza prostymi przypadkami testowymi.

Używany system kolorów zależy od różnych czynników, takich jak zgodność przeglądarki lub to, czy potrzebujesz przezroczystości. Jednak, jak widać, przypisywanie kolorów do łączy jest dość proste za pomocą właściwości color i działa w ten sam sposób dla wszystkich innych stanów łączy. W związku z tym możesz łatwo zmienić kolor tekstu dla :hover lub :focus .

Dostosuj kolor tła

Oprócz zmiany koloru tekstu, możesz także zmienić kolor tła swoich linków i ich różne stany. Jest to tak proste, jak użycie właściwości background-color .

Oto znacznik dla powyższego przykładu:

 #link-one { background-color: #fadbd8; color: red; } #link-two { background-color: #f26c2e; color: #3af278; } #link-three { color: rgb(61, 76, 128); } #link-three:focus { background-color: rgb(61, 76, 128); color: #fff; }

Inne opcje stylizacji tekstu

Ponieważ linki to nic innego jak tekst, wszystkie inne sposoby stylizowania tekstu w CSS również mają do nich zastosowanie. Oznacza to, że możesz przypisać inne właściwości do łączy i ich różne stany oraz zlecić im zmianę rozmiaru czcionki, rodzin czcionek lub innych rzeczy, gdy użytkownicy unoszą się nad nimi.

Może to mieć sens w przypadku niektórych projektów, jednak są to mniej popularne sposoby stylizowania linków za pomocą CSS.

Oto znacznik do osiągnięcia powyższych efektów:

 #link-one { background-color: #fadbd8; color: red; font-family: Arial; } #link-two { color: #3af278; font-weight: 600; text-transform: uppercase; } #link-three { color: rgb(61, 76, 128); } #link-three:focus { font-size: 36px; }

Pracuj z podkreśleniem

Jak dowiedzieliśmy się na początku, linki są domyślnie podkreślone. Jeśli chcesz się tego pozbyć, możesz użyć text-decoration: none; (co jest najczęstszym zastosowaniem właściwości text-decoration ).

 a { text-decoration: none; }

Niektórzy wolą również dodawać podkreślenie tylko po najechaniu kursorem, ale nie w przypadku normalnego linku. To również jest łatwe do zrobienia.

 a { text-decoration: none; } a:hover { text-decoration: underline; }

Dodatkowo możesz użyć border: bottom; zamiast text-decoration: underline; aby dodać linię pod linkami. Ludzie używali tego, ponieważ oferował lepsze opcje stylizacji. Jednak w dzisiejszych czasach mamy nowe właściwości dla standardowej metody underline , które pozwalają na więcej dostosowań.

Na przykład text-underline-offset umożliwia kontrolowanie odległości między tekstem a linią pod spodem podczas korzystania z funkcji text-decoration . text-decoration-thickness umożliwia ustawienie niestandardowej szerokości linii. Tak więc pójście trasą border nie jest już tak potrzebne, jak kiedyś.

Poza tym istnieje naprawdę wiele sposobów pracy z linią pod linkami, w tym animacja. Prawdopodobnie mógłbyś napisać o tym kolejny artykuł.

Zmiana stylu kursora po najechaniu kursorem

Jak już mówiliśmy, po najechaniu na łącze kursor myszy zmienia się z małej strzałki w małą wskazówkę.

Do tej pory jest to uniwersalny znak, że masz do czynienia z klikalnym elementem HTML. Jednak możesz nie wiedzieć, że możesz zmienić kursor również na inne rzeczy, od celownika nad strzałkami zmiany rozmiaru do wskaźnika ładowania.

 a { cursor: crosshair; } a { cursor: move; } a { cursor: wait; } a { cursor: n-resize; } a { cursor: grab; }

Jeśli jesteś ciekawy, wypróbuj powyższe w lokalnym środowisku programistycznym, aby zobaczyć ich efekt. Opcji jest dużo więcej, które znajdziesz tutaj.

Ponieważ jednak wskaźnik jest tak uniwersalny, zdecydowanie tego oczekują użytkownicy i zwykle należy się go trzymać. Jeśli z jakiegoś powodu nie działa dla twoich linków, możesz to poprawić za pomocą następującego fragmentu kodu:

 a { cursor: pointer; }

Możliwe jest nawet użycie niestandardowych obrazów, jeśli chcesz użyć własnych kursorów w swojej witrynie. Na przykład niemiecki sklep internetowy z towarami muzycznymi używa własnego, tematycznego kursora.

Jeśli przyjrzysz się, jak to robią za pomocą narzędzi programistycznych przeglądarki, znajdziesz następujący fragment kodu:

 a { cursor: url(../images/hand.cur),pointer; }

Jak widać, możesz po prostu użyć niestandardowego kursora, podając adres do pliku obrazu.

Wprowadź zmiany w:focus

Stylizacja z myślą o focus jest ważną pomocą w ułatwieniach dostępu, więc upewnij się, że pozostaje w pobliżu. Domyślnie podświetlenie odbywa się za pomocą właściwości outline , co powoduje, że wokół niego pojawia się ramka.

Dlaczego pytasz outline , a nie border ?

Bo outline nie zajmuje miejsca na stronie. Zamiast tego znajduje się na górze tła elementu. W ten sposób skupienie linku nie zmienia skoków układu strony ani podobnych.

Jakie masz inne opcje stylizacji dla skoncentrowanego linku?

Dużo ich. Zajmuje wszystko, od background-color po color , font-size , box-shadow , co tylko chcesz.

Oto jak osiągnąć powyższe:

 #link-one:focus { color: red; } #link-two:focus { box-shadow: 0 0 14px 0px; } #link-three:focus { font-size: 36px; }

Używając a:focus , możesz zrobić w zasadzie wszystko, co chcesz. Jedną z najciekawszych aplikacji może być jednak to, że możesz również po prostu dostosować domyślną przeglądarkę za pomocą właściwości outline .

 a:focus { outline: 3px dotted green; }

Oto jak powyższe wygląda na stronie:

Przyciski i pola linków

Oczywiście linki to nie tylko linki tekstowe. W niektórych miejscach często pojawiają się jako pola, takie jak menu nawigacyjne, jako części formularzy lub wezwania do działania.

Nie jest to trudne do osiągnięcia. Zasadniczo wystarczy znaleźć sposób na dodanie miejsca wokół tekstu linku i podać tło lub obramowanie/kontur, aby wyświetlał się jako przycisk lub pole. Poza tym nadal są tym samym elementem linku, którego używaliśmy wcześniej.

Istnieje kilka sposobów, aby to osiągnąć, od prostego dodania wyściółki do systemów takich jak flexbox lub siatka. Poniżej tylko jeden przykład, jak możesz to zrobić, jest o wiele więcej opcji.

 a { background-color: #1a0dab; color: #fff; padding: 1.5rem; }

W tym przypadku CSS zawiera zarówno stylizację linku, jak i kontener, w którym się znajduje. Oczywiście możesz użyć tych samych stanów linków, co wcześniej, aby uwzględnić różne zachowanie dla różnych scenariuszy.

Dołącz ikony do swoich linków

Szybka rzecz, która zasługuje na wyjaśnienie, to możliwość umieszczania ikon w swoich linkach. To jest to, co niektórzy ludzie robią, aby jeszcze wyraźniej pokazać, że coś jest linkiem zewnętrznym, który odciągnie użytkowników od bieżącej strony.

Oto jak to zrobić. Najpierw HTML:

 <a id=link-one href="#">Link Text</a> <a id=link-two href="#">Link Text</a> <a id=link-three href="https://wikipedia.org/">Link Text</a>

Następnie CSS:

 a[href^="http"] { background: url('external-link-icon.png') no-repeat right center; background-size: 16px 16px; padding-right: 15px; }

a[href^="http"] kieruje tylko tagi kotwicy, których adres zaczyna się od http w href="" . Do tego znacznik dodaje obraz tła, który jest ikoną, ustawia go na bez powtarzania, przesuwa go całkowicie w prawo i wyśrodkowuje w pionie. Reszta znaczników definiuje rozmiar ikony i tworzy trochę przestrzeni między nią a tekstem.

Końcowe przemyślenia: stylizacja CSS dla linków

Zmiana stylu linków za pomocą CSS nie jest taka trudna, gdy masz już podstawy. Najważniejszą częścią jest zrozumienie, że przybierają różne stany, które są celem różnych operatorów i pseudoklas. Potem wystarczy użyć wspólnych właściwości CSS, aby zmienić ich projekt na cokolwiek zechcesz. Masz teraz wszystkie informacje potrzebne do rozpoczęcia pracy.

Jaki jest twój ulubiony sposób stylizowania linków za pomocą CSS? Jakieś inne wskazówki, którymi możesz się podzielić? Zrób to w komentarzach!