Przejdź do treści

Nagłówek i treść

Kolor odsyłaczy

<body link="kolor nowych" vlink="kolor odwiedzonych" alink="kolor aktywnych">...</body>
gdzie "kolor nowych", kolor odwiedzonych" i "kolor aktywnych" oznaczają definicje kolorów [zobacz: Kolory], przy czym:
kolor nowych
Kolor odsyłaczy które nie zostały jeszcze użyte
kolor odwiedzonych
Kolor odsyłaczy, które zostały już użyte
kolor aktywnych
Kolor aktywnego odsyłacza, czyli takiego który właśnie został użyty
[zobacz: Odsyłacze].

Polecenie pozwala określić kolor odsyłaczy na stronie. Staraj się używać barw, które będą się dobrze wyróżniały na kolorze tła oraz odróżniały od koloru tekstu (aby odsyłacze były dobrze widoczne).

Równocześnie z kolorem odsyłaczy hipertekstowych powinniśmy określić odpowiedni kolor tła, nawet jeśli odpowiada nam domyślny. Pamiętaj, że użytkownik może zmienić domyślny kolor tła w swoim systemie operacyjnym, a wtedy istnieje prawdopodobieństwo, że będzie on podobny do koloru odsyłaczy ustalonego na Twojej stronie, co wywoła brak możliwości odczytania lub bardzo utrudni czytanie.

Atrybuty LINK, VLINK i ALINK są zdeprecjonowane przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Podświetlenie

Aby bardziej urozmaicić wygląd odnośników tekstowych, można posłużyć się poleceniami stylów CSS. Pozwalają one swobodnie zmieniać kolor i inne cechy odsyłaczy po wskazaniu ich myszką. Jeśli usuniemy wskaźnik myszki znad takich łączy, zostanie im przywrócony pierwotny wygląd.

  • Aby wszystkie odsyłacze na stronie zmieniały kolor po wskazaniu myszką, należy w treści nagłówkowej dokumentu (w ramach <head>...</head>) umieścić następujący tekst: 
    <style type="text/css">
/* <![CDATA[ */
a:hover { color: kolor }
/* ]]> */
</style>
    gdzie "kolor" oznacza definicję koloru.

    Przykład:

    zmień kolor
  • Aby dodać tło, należy wpisać (tak jak poprzednio w treści nagłówkowej): 
    <style type="text/css">
/* <![CDATA[ */
a:hover { background-color: kolor }
/* ]]> */
</style>

    Przykład:

    pokaż tło
  • Aby połączyć powyższe efekty: 
    <style type="text/css">
/* <![CDATA[ */
a:hover { color: kolor1; background-color: kolor2 }
/* ]]> */
</style>

    Przykład:

    zmień kolor i pokaż tło
  • Aby zupełnie usunąć podkreślenie pod odsyłaczami: 
    <style type="text/css">
/* <![CDATA[ */
a { text-decoration: none }
/* ]]> */
</style>

    Przykład:

    odsyłacz bez podkreślenia
  • Aby usunąć podkreślenie pod zwykłymi odsyłaczami i dodać je po wskazaniu myszką: 
    <style type="text/css">
/* <![CDATA[ */
a { text-decoration: none }
a:hover { text-decoration: underline }
/* ]]> */
</style>

    Przykład:

    pokaż podkreślenie
  • Aby zupełnie usunąć podkreślenie tylko pod niektórymi odsyłaczami - np. w menu serwisu (kod do wstawienia w wybranym miejscu strony): 
    <a href="adres.html" style="text-decoration: none">opis</a>
    [Zobacz: Odsyłacze]

Aby dowiedzieć się więcej, zobacz: Selektory pseudoklas.

Zobacz także

Więcej tematów

Dotacje

Pomogła Ci ta strona? Chcesz, aby dalej się rozwijała?
Dotpay - Bezpieczne transakcje internetowePayPalWpłać dobrowolną dotację...