CSS - Links gestalten Links können Sie mit tollen Effekten dank ein wenig CSS ausstatten. Hier gibts das nötige Know-How, um die ersten Links selbst mit CSS zu gestalten.

Für die Gestaltung von Links gibt es mit CSS keine Grenzen. Mit insgesamt vier CSS Anweisungen können Sie die Links in ihren verschiedenen Zuständen formatieren.
Die Zustände sind

  • normaler Zustand
  • Link bereits besucht
  • Link gerade aktiv
  • Link bei MouseOver

Das folgenden Beispiel formatiert alle Links, da keine CSS Klasse definiert wurde, sondern direkt der a-Tag definiert wird.

<style type="text/css">
a:link {color:red; text-decoration:none}
a:visited {color:blue; text-decoration:none}
a:active {color:black; text-decoration:none}
a:hover {color:black; text-decoration:underline}
</style>


Hier der Ergebnislink:

Ein Link

Im Vergleich zu einem solchen Link können die "normalen" Links nicht mithalten.
Der CSS Code ist eigentlich auch recht einfach. link ist der Zustand des normalen Links (wenn er noch unberührt ist). In den geschweiften Klammern { } steht die Definition der Eigenschaften des Linkes. Er soll in diesem Zustand rot sein, sie können anstatt der Farbangabe auch die Hexadezimale Schreibweise verwenden. Die CSS-Eigenschaft text-decoration: gibt an, wie der Text "dekoriert" sein soll, das bedeutet, ob er unterstrichen, überstriche usw. sein soll. Für diese Eigenschaft gibt es vier mögliche Werte.

text-decoration:none
Keine "Dekoration"

text-decoration:overline

Über dem Text ist eine Linie

text-decoration:underline
Unter dem Text ist eine Linie

text-decoration:overline underline
Über und unter dem Text ist eine Linie.

Wobei die vierte Möglichkeit natürlich eine Kombination ist, und deshalb nicht als eigenstehende Eigenschaft bezeichnet werden kann.

Jetzt zurück zu unserem Beispiel. visited definiert das Aussehen des Linkes, wenn dieser bereits einmal besucht wurde. Dieser ist blau, und ist nicht "dekoriert".
active gibt den Zustand an, wenn auf den Link gerade geklickt wurde, und man sich jetzt auf der entsprechenden Seite befindet.
Nun kommt der wohl interessanteste Zustand, der hover Zustand, er definiert das Aussehen, wenn man sich mit der Maus über dem Link befindet. Hier soll der Text schwarz sein, und unterstrichen sein.

Diese Änderung betrifft alle Links auf allen Seiten, in denen das Stylesheet verwendet wird.
Wollen Sie nur einzelne Links mit diesem Effekt ausstatten, dann empfiehlt sich die Definition einer Klasse für diesen Link. Das ganze sieht dann so aus:

<style type="text/css">
.menu:link {color:#ff0000; text-decoration:none}
.menu:visited {color:#0000ff; text-decoration:none}
.menu:active {color:#000000; text-decoration:none}
.menu:hover {color:#000000; text-decoration:underline}
</style>


Die Klasse heißt in diesem Beispiel menu, auf diese muss in der Definition des Linkes hingewiesen werden, nämlich über das class-Attribut.

<a href="http://www.devmag.net" class="menu">devmag.net</a>

Das Ergebnis bleibt wie gehabt, nur das Sie sich jetzt die Links aussuchen können, die mit diesem Effekt ausgestattet werden sollen.

Mit weiteren CSS Befehlen in den Definitionen der Links können Sie schnell aus ihren Links wahre Kunstwerke schaffen, einfach ausprobieren.
Es gilt der Grundsatz "Schön ist, was gefällt".

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Weiterführende Links: