Linki są bardzo często spotykane na stronach internetowych, ale wielu projektantów stron internetowych nie zdaje sobie sprawy z mocy, jaką mają dzięki CSS, aby skutecznie manipulować i zarządzać ich linkami. Możesz zdefiniować linki z odwiedzonymi, aktywowanymi i aktywnymi stanami. Możesz także pracować z ramkami i tła, aby nadać liniom więcej pizzazu lub sprawić, by wyglądały jak przyciski lub obrazy.
Większość projektantów stron internetowych zaczyna od zdefiniowania stylu na za etykietka:
a {color: red; }
Spowoduje to ukształtowanie wszystkich aspektów łącza (hover, visited i active). Aby nadać każdej części osobny styl, musisz użyć pseudoklas linków.
Połącz pseudo-klasy
Istnieją cztery podstawowe typy pseudoklasy linków, które możesz zdefiniować:
- : link - jest to domyślny styl linku
- : visited - po kliknięciu łącza
- : hover - gdy mysz znajduje się nad linkiem (pre-click)
- : active - prawo po kliknięciu łącza
Aby zdefiniować pseudoklasy łącza, użyj go z za tag w selektorze CSS. Aby zmienić kolor odwiedzonych wszystkich linków na szary, napisz:
a: visited {color: grey; }
Jeśli styl jednej pseudoklasy łącza, dobrze jest je wszystkie style. W ten sposób nie zdziwi Cię brak wyników. Jeśli chcesz zmienić kolor odwiedzanych na szary, a wszystkie pozostałe pseudo-właściwości twoich linków pozostaną czarne, napisz:
a: link, a: hover, a: active {color: black; } a: visited {color: gray; }
Zmień kolory linków
Najpopularniejszym sposobem tworzenia linków jest zmiana koloru, gdy mysz najedzie na nie kursorem:
a {color: # 00f; } a: hover {color: # 0f0; }
Ale nie zapominaj, że możesz wpłynąć na to, jak link wygląda, gdy go klikają przy pomocy: aktywnej właściwości:
a {color: # 00f; } a: active {color: # f00; }
Lub w jaki sposób wygląda ten link po odwiedzeniu go za pomocą właściwości: visited:
a {color: # 00f; } a: visited {color: # f0f; }
Aby złożyć to wszystko razem:
a {color: # 00f; } a: visited {color: # f0f; } a: hover {color: # 0f0; } a: active {color: # f00; }
Umieść tła na łączach, aby dodać ikony lub wypunktowania
Grając nieco w tle, możesz utworzyć link z powiązaną ikoną. Wybierz małą ikonę o wielkości 15 na 15 pikseli, chyba że Twój tekst jest większy. Umieść tło na jednej stronie łącza i ustaw opcję powtarzania na nie powtarzaj. Następnie wstaw link, aby tekst w łączu przesunął się wystarczająco daleko w lewo lub w prawo, aby zobaczyć ikonę.
a {padding: 0 2px 1px 15px; background: #fff url (ball.gif) left center no-repeat; kolor: # c00; }
Po uzyskaniu ikony możesz ustawić inny obraz jako ikony aktywowane i odwiedzane, aby zmienić link:
a {padding: 0 2px 1px 15px; background: #fff url (ball.gif) left center no-repeat; kolor: # c00; } a: hover {background: #fff url (ball2.gif) left center no-repeat; } a: active {background: #fff url (ball3.gif) left center no-repeat; }
Spraw, aby Twoje łącza wyglądały jak przyciski
Przyciski są bardzo popularne, ale dopóki nie pojawił się CSS, trzeba było utworzyć przyciski za pomocą obrazów, dzięki czemu ładowanie stron trwa dłużej. Na szczęście istnieje styl granicy, który może pomóc w łatwym tworzeniu efektu podobnego do przycisku za pomocą CSS.
a {border: 4px wstęp; wypełnienie: 2px; dekoracja tekstowa: brak; } a: active {border: 4px inset; }
Uwaga: kiedy umieszczasz kolory na początkowych i wewnętrznych stylach, przeglądarki nie są w stanie renderować ich tak, jak można by oczekiwać. A więc, tutaj jest bardziej wytworny przycisk z kolorowymi obramowaniami:
a {border-style: solid; szerokość obramowania: 1px 4px 4px 1px; dekoracja tekstowa: brak; wypełnienie: 4px; border-color: # 69f # 00f # 00f # 69f; }
Możesz także wpływać na styl aktywowania i aktywacji linku przycisku, po prostu użyj tych pseudoklas:
a: link {border-style: solid; szerokość obramowania: 1px 4px 4px 1px; dekoracja tekstowa: brak; wypełnienie: 4px; border-color: # 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc; }
