BHAK & BHAS Bludenz

Grundkurs HTML & CSS

Linkfarben


Linkfarben mit CSS

Cascading Style Sheets stellen die Möglichkeit zur Verfügung, Text beinahe nach Belieben zu formatieren und zu positionieren. Sie erweitern die Möglichkeiten von HTML beträchtlich. Einige Formate, die im Zusammenhang mit Links sinnvoll sind, werden als Attribute im <a>-Tag definiert.

  1. Nicht unterstrichene Links erreicht man mittels des Attributs style="text-decoration: none;".
  2. Farbig unterlegte Links erzeugt man mittels des Attributs style="background-color: Farbe;".
  3. Die Textfarbe des Links definiert man mittels des Attributs style="color: Farbe;".

Eine vollständige Kombination dieser Attribute könnte in etwa so aussehen:

<a href="011.asp" style="text-decoration: none; background-color: #fecb00; color: #D80100; font-weight: bold; padding: 5px;">. Man beachte, dass die einzelne Werte innerhalb des style-Attributes durch Strichpunkte und Leerschritte voneinander getrennt und mittels der Anführungszeichen verbunden werden! Und so sieht's dann aus:

Back to the girls!

Pseudoklassen

In CSS kann man einem Link verschiedene Formatierungen zuweisen - abhängig vom "Zustand", in dem er sich befindet, zB "normal" (link), Mouse-over (hover), bereits besucht (visited) und angeklickt (active). Dazu definiert man im Stylesheet (extern oder im <head>-Bereich) Klassen. Ein Beispiel für den <head>:

<style type="text/css">
<!--
a:link { Angaben }
a:visited { Angaben }
a:hover { Angaben }
a:active { Angaben }
-->
</style>


Aufgabe 28

Formatiere die Linkliste in uebung18.htm mit Hilfe von CSS direkt beim Link um. Speichere die Ergebnisse als uebung20.htm ab. Bei dieser Gelegenheit möchte ich auch noch an die fortlaufende Verlinkung der Übungen am Fuße des Dokuments erinnern!