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

individuelle Links

 

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>