Gestaltung mit CSS
    
WWW.WEB-TOOLBOX.NET
Beispiel CSS-Notierungen ZURÜCK SITEMAP  

  Textlinks gestalten mit CSS

Links ohne Unterstrich, schon fast ein Standard im Web. Für Beginner immer noch ein Buch mit 7 Siegeln. Hier steht wie's geht!

 10.02.2007  Korrektur - Der Fehlerteufel hatte sich eingeschlichen

In einem HTML-Dokument wird ein Textverweis üblicherweise durch einen Unterstrich hervorhegoben. Mit HTML-Anweisungen haben sie durch Attribute im BODY-TAG lediglich Einfluss auf die Textfarben:


  Links gestalten mit HTML 

 link  = "#000000";  Farbe für einen Textverweis (Link)
 vlink = "#000000";  Farbe für einen Textverweis besuchter Seiten
 alink = "#FF0000";  Farbe für einen Textverweis beim Klicken
Im Body-Tag des HTML-Dokuments steht dann: 
<body link="#000000" vlink="#000000" alink="#FF0000" ...


   Textlinks formatieren mit CSS

Mit CSS-Angaben haben sie wesentlich mehr Gestaltungsmöglichkeiten auf Textverweise und können Textlinks innerhalb des gleichen Dokuments sogar unterschiedlich darstellen. Die Anzeige des Unterstrichs kann man unterdrücken.

Dabei können sie mit CSS nicht nur Formate für den Textlink generell festlegen sondern, wie auch bei HTML vorgesehen, unterscheiden zwischen bereits besuchten Links oder gerade angeklickten Links. Dazu werden für das Element <a> Pseudoklassen festgelegt die für das Element <a> gültig sind. Die Pseudoklasse wird hinter einem Doppelpunkt notiert.

Übersicht der Pseudoklassen:

Link Pseudoklasse Textlink-Formatierung 
a :link für Links noch nicht besuchter Seiten
a :visited für Links bereits besuchter Seiten
a :focus für Links die den Focus haben
a :hover für Links bei MouseOver
a :active für gerade angeklickte Links





   Beispiel

So sollen die Textlinks aussehen: 
Schrift:               Arial
Schriftgröße:          12 Pixel
Unterstrich:           nein
Farbe:                 #009F00 (Grünton)
Farbe besuchter Link:  #009F00 (Grünton)
Farbe aktiver Link:    #FF0000 (rot)
Farbe bei MouseOver:   #FFBF00 (orange)
Dazu machen sie im Anweisungsblock (im HEAD der HTML-Datei) folgende Eintragung:


<style type="text/css">
<!--

a:link {
  font-family: Arial;
  font-size: 12px;
  text-decoration: none;
  color: #009F00;
  }

a:visited {
  color: #009F00;
  }

a:focus {
  color: #FFBF00;
  }

a:hover {
  color: #FFBF00;
  }

a:active {
  color: #FF0000;
  }

-->
</style>
So sieht das Ergebnis aus:  Das ist ein Textlink


Der Schlüssel für die Unterdrückung des Unterstrichs liegt in der Notierung: 

text-decoration: none;  (Textdekoration: keine)




  Unterklassen für alternative Darstellung definieren

Manchmal möchte man innerhalb der gleichen Seite eine alternative, weniger auffällige Darstellung z.B. in einer anderen Farbe und kleineren Schrifthöhe.

HOME  /  NACH OBEN  /  INDEX > THEMA > UNTERTHEMA

Dazu notieren sie weitere Anweisungsblöcke, eine eigene Klasse für diese speziellen Textverweise. Der Selektor ist hier nicht unbedingt ein vorhandenes HTML-Tag. Den Namen bestimmen sie selbst. Er soll mit einem Buchstaben beginnen. 

<style type="text/css">
<!--

.kleinerlink {
     font-family: Arial;
     font-size: 10px;
     text-decoration: none;
     color: #0090E0;
     }

.kleinerlink:visited {
     color: #0090E0;
     }

.kleinerlink:hover {
     color: #FF0000;
     }

.kleinerlink:active {
     color: #FF0000;
     }

-->
</style>



  Unterklassen einbinden

Innerhalb des einleitenden Verweis-Tags <a> bestimmen sie die CSS-Klasse: 

<a class="kleinerlink" href="javascript:void(0)">Verweistext</a>
So sieht das Ergebnis aus:  Das ist ein Textlink

Zum Vergleich:  Das ist ein Standard-Link



  Großbuchstaben - eine Alternative

Bei kleinen Schriften ist die Umwandlung in Großbuchstaben wegen der besseren Lesbarkeit oft von Vorteil: 
 text-transform: uppercase;

So sieht das Ergebnis aus:  Das ist ein Textlink




  Rahmen - eine Alternative

Auch ein Rahmen kann gut ins Bild ihrer Webseite passen. Erweiterungsfähig ist diese Basisversion. Sie läd zu Experimenten mit alternativen Rahmenfarben für MouseOver ( :hover ) ein. 
 font-size:10px;
 text-transform:uppercase;
 padding:3px;
 border:1px solid #0090E0;
 text-decoration: none;

So sieht das Ergebnis aus:  Das ist ein Textlink




  Rahmen unten - der pseudo-Unterstrich

Macht natürlich nur Sinn, wenn der Rahmen unten nicht durchgezogen ist (sonst könnte man ja den üblichen Unterstrich belassen) oder wenn sie diesen Pseudo-Unterstrich farblich absetzen möchten. Erweiterungsfähig ist diese Basisversion. Sie läd zu Experimenten mit alternativen Rahmenfarben / Rahmenart nicht nur für :hover ein. 
 font-size:10px;
 text-transform:uppercase;
 padding:1px;
 border-bottom:1px dotted #0090E0;
 text-decoration: none;

So sieht das Ergebnis aus:  Das ist ein Textlink




  Links kennzeichnen

Wenn Sie den Unterstrich als Kennzeichnung für einen Verweis unterdrücken reicht es oft nicht, ihn nur farblich hervor zu heben. Bitte benutzen sie entsprechende Gestaltungsmittel!


Zur Kennzeichnung von Textlinks habe ich kleine Grafiken hergestellt die so breit ist, dass kein Leerzeichen zwischen Pfeil und Text einfügt werden muss. Neben dem eigentlichen Pfeilsymbol gibt es rechts einen transparenter Imagebereich, der den Abstand zum Text erzwingt:

Textlink mit davor notiertem Image (kein trennendes Leerzeichen)


zur Demo Rand eingeschaltet:   

  (10 x 9 Pixel)

Weitere Symbole in meiner Image-Box







NACH OBEN