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

link (23), kolor (17), odsyłacz (20), odnośnik (22), hiperłącze (13), kotwica (18)

Komentarze

Zobacz więcej komentarzy

Dotacje

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

HTML:
A ABBR ACRONYM ADDRESS APPLET AREA ARTICLE ASIDE AUDIO B BASE BASEFONT BDI BDO BIG BLOCKQUOTE BODY BR BUTTON CANVAS CAPTION CENTER CITE CODE COL COLGROUP COMMAND DATALIST DD DEL DETAILS DFN DIALOG DIR DIV DL DT EM EMBED FIELDSET FIGURE FIGCAPTION FONT FOOTER FORM FRAME FRAMESET H1 H2 H3 H4 H5 H6 HEAD HEADER HGROUP HR HTML I IFRAME IMG INPUT INS ISINDEX KBD KEYGEN LABEL LEGEND LI LINK MAP MARK MATH MENU META METER NAV NOFRAMES NOSCRIPT OBJECT OL OPTGROUP OPTION OUTPUT P PARAM PRE PROGRESS Q RP RT RUBY S SAMP SCRIPT SECTION SELECT SMALL SOURCE SPAN STRIKE STRONG STYLE SUB SUMMARY SUP SVG TABLE TBODY TD TEXTAREA TFOOT TH THEAD TIME TITLE TR TRACK TT U UL VAR VIDEO WBR
CSS:
align-content align-items align-self azimuth background background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-radius border-bottom-right-radius border-bottom-left-radius border-top-right-radius border-top-left-radius border-right border-top border-bottom-color border-left-color border-right-color border-top-color border-bottom-style border-left-style border-right-style border-top-style border-bottom-width border-left-width border-right-width border-top-width border-collapse border-color border-spacing border-style border-width bottom box-decoration-break box-shadow box-sizing break-after break-before break-inside caption-side clear clip color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cue cue-after cue-before cursor direction display elevation empty-cells flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font font-family font-size font-size-adjust font-stretch font-style font-variant font-weight height justify-content left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top marker-offset marks max-height max-width min-height min-width opacity order orphans outline outline-color outline-offset outline-style outline-width overflow padding padding-bottom padding-left padding-right padding-top page page-break-after page-break-before page-break-inside pause pause-after pause-before pitch pitch-range play-during position quotes resize richness right size speak speak-header speak-numeral speak-punctuation speech-rate stress table-layout text-align text-decoration text-indent text-shadow text-transform top unicode-bidi vertical-align visibility voice-family volume white-space widows width word-spacing z-index