Links, CSS und vieles was man damit machen kann |
|
Mittwoch, 11. Juni 2008
|
||||
|
Dieser Artikel befasst sich mit Grundlegendem zum Thema Link-Definition per CSS und einer Technik mit der man Elemente innerhalb von Links ansprechen kann.
Eines der fundamentalsten Elemente in HTML ist der sogenannte Hyperlink. Er wird benutzt um dem Besucher die Möglichkeit zu schaffen auf andere Seiten zu gelangen, egal ob auf der eigenen Seite oder auf externen Websites. Die Syntax innerhalb von HTML sieht so aus: <a href="seite.html">Hier klicken</a> Unter href wird das Ziel definiert und innerhalb des geöffneten A-Tag steht, was verlinkt sein soll. In diesem Fall wäre es nur Text, man kann aber auch beliebig viele andere Elemente innerhalb eines Links definieren - zum Beispiel Bilder oder eine Kombination aus Text und Bildern. Das Tolle ist, dass wir über CSS diese Elemente innerhalb eines Links separat von einander definieren können und zwar unterschieden vom Zustand des Links, dass diese Elemente umschließt. Zu kompliziert erklärt? Okay, hier nochmal ganz einfach: Links und deren Zustände Ein Link hat verschiedene Zustände und diese können wir im CSS definieren. So kann ein Link, aktiv sein, die Maus darüber haben oder schon mal besucht worden sein. Die Definitionen im CSS sehen dafür so aus: a { ... } Active und Focus bedeutet das Gleiche (nur das eine für IE, das andere für FF), nämlich ob ein Link gerade den Fokus innerhalb des Browsers hat. Also ob man das Element durch Klick oder Tab markiert hat. Dieser Zustand wird aber nur selten genutzt. Visited sind Links, die man bereits schon mal angeklickt hat. Der Browser merkt sich die angeklickten Links an Hand der URL. Hat man den gleichen Link auf einer Seite und klickt auf einen drauf, sind alle die die gleiche URL haben ebenfalls als "schon besucht" markiert. Die Link-Zustände gestalten Also bei diesem Thema trennen sich die Meinungen. Die einen sagen, dass ein Link deutlich als solcher gekennzeichnet sein sollte und das man auch kenntlich machen sollte, ob er bereits besucht wurde oder nicht - den Anderen ist es egal, Hauptsache der Link passt zum Gesamtdesign. Wie man sich auch entscheiden mag, wir können mit CSS jeden Zustand unabhängig voneinander definieren. Dabei ist wichtig zu beachten, dass die Grundeinstellungen der Links auf die anderen Zustände vererbt werden. Sage ich also den Links, dass sie rot sein sollen, sind alle Links egal in welchem Zustand sie sind, rot, außer ich definiere etwas Anderes. Beispiel: a { In diesem Beispiel ist der Text egal welcher Zustand ein Link hat immer fett, ist grau wenn er schon besucht wurde und hat keinen Unterstrich mehr und wird blau, wenn die Maus darüber ist. Wir können hier den Link beliebig definieren. Und sogar noch besser: Wir können auch die Elemente innerhalb eines Links definieren und das ist, was ich oben bereits abgesprochen habe. Inhalt eines Links definieren, abhängig vom umliegenden Link-Zustand Stellt Euch vor, wir haben einen Link und darin befindet sich mehr als nur reiner Text. Wir haben ein Bild und ein Text in einem Span: <a href="link.html"> Als Beispiel möchten wir jetzt, dass der Text im Span verschwindet, sobald man mit der Maus über den Link geht. Dafür muss der Quellcode dann Folgendermaßen aussehen: a:hover span { Das versteckt jedes Span in einem Link, wenn man mit der Maus darüber ist. Basierend auf dieser Technik gibt es ein etwas komplexeres CSS-Script, dass komplett ohne JavaScript* auskommt und ein 1-A Drop-Down-Menü hinzaubert, vollkommen valide. Einen ausführlichen Artikel zu diesem Menü folgt demnächst bei Professor Web. (* Der IE braucht die Einbindung einer HTC-Datei über Conditional Comments)
|
||||
| Letzte Aktualisierung ( Mittwoch, 11. Juni 2008 ) | ||||
Keine Kommentare vorhanden
| < Zurück | Weiter > |
|---|
