Homepagebau	Dateiversion: diesen Beitrag diskutieren, ergänzen, eine Frage stellen

Beschreibung:

Sicher ist ihnen schon einmal aufgefallen, dass auf einigen Webseiten Hyperlinks nicht unterstrichen sind, oder die Farbe verändern, wenn die Maus darüber bewegt wird. Das erreicht man via CSS mit ein paar einfachen Handgriffen, die wir ihnen in diesem Abschnitt näher erläutern wollen

Hyperlinks:

Alle Hyperlinks werden durch den Tag "A" umschlossen. Daher werden wir auch die Formatierung eben dieses Tags nun modifizieren.

Das besondere an diesem Tag ist, dass man zusätzlich verschiedene Ereignisse unterscheiden kann.

a	Standardeinstellungen
a:link	nur echte Links (ohne Textanker)
a:hover	wenn die Maus über dem Link ist
a:active	wenn Link angeklickt wird
a:visited	besuchter Link

Bitte beachten: "a:visited" sollte, wenn verwendet, vor den Formatierungsanweisungen für "a:active" stehen.

Beispiel:

Hyperlinks nicht unterstreichen: 

TEST

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

Hyperlinks mit Strich oben und unten:

TEST

<style type="text/css">
    a { text-decoration: underline + overline; }
</style>

Hyperlinks blau einrahmen:
(lesen sie dazu mehr im Artikel über CSS-Rahmen)

 TEST 

<style type="text/css">
    a { border-style: solid;
        border-color: #0000FF;
        border-width: 3;       }
</style>

Hover-Effekt
Hyperlinks schwarz darstellen und blau wenn die Maus darauf zeigt:

TEST

<style type="text/css">
    a       { color: black; }
    a:hover { color: blue;  }
</style>

genau der gleiche Effekt einmal mit Farbangabe in Hexadezimal- und einmal als RGB-Werte:

<style type="text/css">
    a       { color: #000000; }
    a:hover { color: #0000FF; }
</style>

<style type="text/css">
    a       { color: RGB(0,0,0);   }
    a:hover { color: RGB(0,0,255); }
</style>

Hyperlinks nur unterstreichen, wenn Maus darauf zeigt:

TEST

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

Hyperlinks über- UND unterstrichen:

TEST

<style type="text/css">
    a       { text-decoration: none;               }
    a:hover { text-decoration: underline overline; }
</style>

Aktive Hyperlinks grau und kursiv darstellen:

TEST

<style type="text/css">
    a:active { font-style: italic;
               color:      #CCCCCC;  }
</style>

Autor: Thomas Meyer

Home: www.All-Community.de

Kontakt: