Standardowo, linki umieszczone w naszym kodzie wyglądają dosyć niesympatycznie. Są w niebieskim, rzucającym się kolorze i zmieniają kolor po kliknięciu. W tym artykule poznasz podstawy formatowania i edycji linków czyli odnośników na stronie.

W kilku prostych poleceniach dowiesz się jak sprawić aby odnośniki „ZACZEŁY WYGLĄDAĆ” ! :).

Podstawą w kodzie HTML jest umieszczenie naszego odnośnika. Na potrzeby naszego artykułu uzupełnię je już o odpowiednie nazwy class:

<a href="www.google.pl" class="link_1">www.google.pl</a>
<a href="www.google.pl" id="link_2">www.google.pl</a>
<a href="www.google.pl">www.google.pl</a>

Tak wymienione linki możemy formatować w CSS w następujący sposób:

<style type="text/css">
a{ 
color: green;
text-decoration: none;
 }
</style>

Te proste polecenie nada wszystkim naszym linkom na stronie kolor zielony (tutaj macie oczywiście dowolność w kolorystyce), oraz usunie wszystkie decoracje teksty, czyli te nieprzyjemne podkreślenia pod linkami.

Ale co w przypadku jeśli nie chcemy edytować wszystkich linków na naszej stronie a tylko kilka wybarnych.

Wtedy musimy zastosować klasy. W nawszym wypadku będzie to klasa „link_1” którą widać w początkowym kodzie.

<style type="text/css">
a.link_1{ 
color: green;
text-decoration: none;
 }
</style>

Taki kawałek kodu sprawi iż tylko linki które mają klasę „link_1” zostaną w odpowiedni sposób sformatowane. Te polecenia pozwalają nam na grupowanie linków na stronie, lub zmieniać ich kolor na podstronach.

Można to robić jeszcze za pomocą ID, lecz należy pamiętać iż ID odnosi się do pojedynczego elementu na stronie, czyli dane ID powinno być użyte tylko raz na danej stronie.

Działanie Linków / Reakcja

Linki możemy jeszcze sformatować pod względem ruchy myszki i ich interakcji na nich.

Dodając do znacznik jedno z poniższych poleceń możemy powiedzieć odnośnikowi jak się ma zachować:

<style type="text/css">
            a:link //Normany nie odwiedzony link
            {
                color: green;
                text-decoration: none;
            }
            a:visited // własciwości linku odwiedzonego
            {
                color: #00ff00;
                text-decoration: none;
            }
            a:hover // właściwości linku najechanego myszką
            {
                color: black;
                text-decoration: none;
            }
            a:active // właściwości aktywnego linku
            {
                color: #0000ff;
            }
            
        </style>

Stosując powyższe polecenia mówi linkowi jak ma wyglądać przy danej akcji. Odwiedzony będzie miał kolo 00FF00,  a najechany myszką zrobi się czarny.

Dzięki za dotarcie od końca artykułu – jeśli pomoc się przydała to zostaw miły komentarz.