Jak używać CSS do stylizowania hiperłączy na stronach internetowych

Kwiecień 29, 2024

Jeśli znasz HTML, wiesz, że możesz kontrolować kolor tekstu i hiperłączy na stronie internetowej. Ale dzięki kaskadowym arkuszom stylów możesz zrobić znacznie więcej. Niektóre znaczniki, takie jak znacznik hiperłącza, mają tak zwane pseudoklasy powiązane z różnymi stanami znacznika. Na przykład znacznik hiperłącza ma cztery stany; link, odwiedzone, najechanie kursorem i aktywne.

Gdy łącze nie jest używane (nie wybrane), to znaczy połączyć pseudoklasa lub stan. The odwiedził stan jest po użyciu łącza. The unosić się stan jest, gdy mysz przechodzi nad linkiem i aktywny stan jest po kliknięciu łącza. Magią CSS jest to, że każdy stan łącza jest kontrolowany niezależnie przez pseudoklasy. Możesz więc ustawić różne właściwości dla każdego stanu. Możesz użyć dowolnej właściwości powiązanej ze znacznikiem kotwiczącym hiperłącza w CSS.

W poniższym przykładzie ustawimy stan łącza na czerwony, stan odwiedzania na fioletowy (# 400040), najechanie myszą i stany aktywne na czerwony, podkreślony i kursywą.

Uwaga--Strzała

wskazuje, że kod jest zawinięty do drugiej linii i naprawdę powinien znajdować się w jednej linii.

Jak widać, ustawiliśmy właściwość color na czerwony dla wszystkich stanów z wyjątkiem stanu odwiedzonego, który ustawiliśmy na fioletowy. Ponieważ chcemy, aby hiperłącze było podkreślone tylko dla stanów aktywowania i aktywowania, dla pozostałych dwóch stanów ustawiliśmy właściwość text-decoration na none. Na koniec ustawiliśmy styl czcionki na kursywę dla stanów najechania kursorem i aktywnych, co spowoduje, że tekst stanie się kursywą po przejściu lub kliknięciu linku, i ponownie ustawiliśmy dekorację tekstu na podkreślenie. To tylko prosty przykład. Możesz sprawić, by twoje style były tak proste lub fantazyjne, jak tylko chcesz. Jest jednak kilka rzeczy do zapamiętania.

Przeglądarki internetowe różnią się sposobem obsługi tego. Zwykle, jeśli ustawisz właściwość na określoną wartość, zostanie ona odziedziczona (przekazana) wszystkim stanom wymienionym po niej. W powyższym przykładzie pierwszym stanem wymienionym w naszym kodzie był stan łącza i ustawiliśmy właściwość color na czerwony. Przez większość czasu byłoby to przekazywane do pozostałych trzech stanów, chyba że zmienimy to za pomocą kodu, tak jak w przypadku stanu odwiedzanego. Ponadto, gdybyśmy nie ustawili dekoracji tekstu z powrotem na podkreślenie, tekst dla stanów aktywowania i aktywowania nie zostałby podkreślony, ponieważ wyłączyliśmy go w pierwszym stanie. Ale nie możesz na to liczyć. Dlatego najlepiej ustawić wszystkie właściwości dla każdego stanu osobno.

Projektując fantazyjne linki, nie wprowadzaj dużych zmian między stanami, takich jak gwałtowny wzrost rozmiaru tekstu. Spowoduje to, że przeglądarka internetowa przeładuje stronę, a twoi goście będą bardzo zła na ciebie.

Kolejność, w jakiej podajesz kod dla tych pseudoklas, zależy od kolejności kaskadowej. Omówimy kolejność kaskadową w późniejszym samouczku. Na razie pamiętaj tylko, że aby zapobiec konfliktom, koduj stany w kolejności, w jakiej użyliśmy powyżej; link, odwiedzone, najechanie kursorem i aktywne.

Instrukcje Wideo: Kurs HTML odc.1: Tworzenie stron www. Pierwszy projekt, wiedza podstawowa (Kwiecień 2024).

Jak używać CSS do stylizowania hiperłączy na stronach internetowych, HTML, pseudoklasy związane z różnymi stanami znacznika, pseudoklasa, hiperłącze, hiperłącza kodujące w CSS, pseudoklasa CSS, stany CSS, stan znacznika, fantazyjne linki na stronie internetowej z CSS, fantazyjne linki

Poprzedni Artykuł

Następny Artykuł

Powiązane Artykuły

komputery

Animacja tablicy - ujawnienie maski

Kwiecień 2024

Będziemy kontynuować prace nad pierwszą sceną animacji tablicy Mygrafico, która zostanie wykorzystana jako film promujący markę firmy na kanale YouTube. W ostatnim ruchuR w samouczku narysowaliśmy...

komputery

Dodawanie cienia do animowanego obiektu Flash

Kwiecień 2024

Jeden z najlepszych dodatków do FlashaR technikami była zdolność animowania filtrów. W tym samouczku utworzymy bardzo prostą animację odbijającej się piłki, a następnie animujemy cień, aby podążać za...