Hyperlinks gestalten
Standardmäßig sind Hyperlinks blau und unterstrichen und werden lila, sobald sie besucht wurden. Dies muss man aber nicht so lassen, mit CSS stehen einem alle Möglichkeiten offen.
Eine horizontale Navigation könnte so realisiert werden.
Unterstreichung entfernen oder gestalten
Sehr beliebt ist bei Webautoren die Möglichkeit, die Unterstreichung der Links zu entfernen und auch deren Farbe zu ändern.
Beispiel ohne Funktion: klick
a {
text-decoration: none; //das Gegenteil wäre underline
color: red;
}
Natürlich sollte man dafür sorgen, dass Hyperlinks weiterhin als solche zu erkennen sind!
Wer dennoch auf den unterstrichenen Link nicht verzichten will, hat mit border-bottom mehr Freiheiten, denn es lassen sich sowohl (unabhängig von der Textfarbe) Farbe als auch Linienart der Unterstreichung ändern.
Beispiel ohne Funktion: klick
a {
border-bottom: 1px dotted red; //gepunktet und rot
}
a:hover {
border-bottom: 1px solid red;
}
Grafik integrieren
Auch läßt sich z.B. eine Grafik in den Link integrieren:
a {
font-family: sans-serif;
color: #50558E;
text-decoration: none;
padding: 0 1px 0 16px;
border-bottom: 1px dotted #FF3366;
background: url(pics/pfeil.gif) no-repeat 2px 4px;
}
Die Grafik pfeil.gif wird einmalig (no-repeat) links (per default) angeordnet und durch padding-left wird der Text entsprechend weit eingerückt.
Beispiel ohne Funktion: klick
Ich verwende in der csskiste so eine Grafik, wenn ich auf fremde Seiten verlinke (wenn also die eigene Domain verlassen wird). drweb.de erklärt, wie's geht.
Pseudoklassen
Hyperlinks haben verschiedene Zustände, auch Pseudoklassen genannt:
- a:link (unbesucht)
- a:visited (besucht)
- a:focus (per Tastatur ausgewählt)
- a:hover (Curser schwebt darüber)
- a:active (angeklickt)
Dadurch können Effekte realisiert werden, indem einige Eigenschaften bei Mausaktionen ausgetauscht werden.
Hier wird die Position um 2px nach unten und rechts verschoben und die beiden Farben ändern sich.
Beispiel ohne Funktion: klick
a:hover {
position: relative;
top: 2px;
left: 2px;
color: red;
border-bottom: 1px solid blue;
}
Schaltflächen
Auch kann eine dreidimensionale Schaltfläche nachgebildet werden, wie man sie aus Windows schon kennt. Natürlich vollkommen ohne Grafiken.
Beispiel ohne Funktion (als ungeordnete Liste):
Bilder als Hyperlinks
Traditionell wurden schon immer gern Grafiken als Hyperlink definiert. Nachteil: Entsprechende Grafiken müssen jedesmal erstellt und mit individuellem Text versehen werden. Ferner müssen sie sowohl verfügbar (online) sein, als auch extra geladen werden (Zeitfaktor). Vorteil: Optisch ist alles machbar. Mit CSS geht mittlerweile aber auch vieles und es ist wesentlich pflegeleichter.
Die "Zurück-zum-Seitenanfang-Hand" rechts ist ein Beispiel für ein Bild als Verweis. Dieses kann 1:1 immer wieder verwendet werden und der Pflegeaufwand entfällt.
Hyperlinks per JavaScript
... gehen auch, sollte man aber vermeiden. Per JavaScript generierte Inhalte werden von Suchmaschinen ignoriert und bei im Browser deaktiviertem JavaScript auch gar nicht erst angezeigt.
