Pseudoformate für Hyperlinks und anderes
[Dieser Artikel wird noch überarbeitet]
Pseudoformate unterteilen sich in Pseudoklassen, die Formate mit einem Element, das einen bestimmten Zustand hat, verknüpfen und in Pseudoelemente, die Formate mit einem Teil eines Elements verknüpfen.
Am Bekanntesten dürften da die Hyperlinks sein. Zu erkennen sind sie an dem führenden Doppelpunkt. Folgende Pseudoklassen sind in CSS 1 + 2 estgelegt:
:link
Nichtbesuchter Hyperlink.
:visited
Besuchter Hyperlink
:active
Aktiver Hyperlink (Wenn der User mit der Maus auf den Link klickt.) :hover Mouseover-Effekt. Wenn der User den Mauszeiger über einen Hyperlink oder ein anderes Element bewegt.
:focus
Wenn ein Element den Fokus hat. Z.B. Texteingabefelder, in denen der Cursor steht.
:first-child
Ein Element, das das erste Kind eines anderen Elements ist. Folgende Pseudoelemente sind in CSS 1 + 2 festgelegt:
:first-line
Die erste Zeile in einem Absatz.
:first-letter
Das erste Zeichen in einer Zeile.
:before
Fügt vor einem Element einen beliebigen Inhalt ein und formatiert diesen. :after Fügt nach einem Element einen beliebigen Inhalt ein und formatiert diesen.
Dieses Beispiel verbindet das -Tag mit Pseudoklassen und deklariert mit a:link
{color:#0000ff;} eine blaue Schriftfarbe für einen nicht besuchten Hyperlink. a:visited {color:#dddddd;} legt fest, dass Hyperlinks,
nachdem sie angeklickt und besucht wurden in Grau dargestellt werden sollen. a:hover {color:#ff0000;} und a:active {color:#ff0000;} legen eine rote Schriftfarbe für Hyperlinks fest, über die ein Mauszeiger bewegt oder auf die mit der Maus geklickt wird.
Diese Formatierungen sind für das -Tag im gesamten Dokument gültig und im Dokument brauchst Du keine weiteren Angaben machen.
Eine Besonderheit für Hyperlinks ist die Reihenfolge:
:link :visited :hover :active
Das ist kein Browser-Bug sondern CSS-Standard.
:!:
Pseudoformate unterteilen sich in Pseudoklassen, die Formate mit einem Element, das einen bestimmten Zustand hat, verknüpfen und in Pseudoelemente, die Formate mit einem Teil eines Elements verknüpfen.
Am Bekanntesten dürften da die Hyperlinks sein. Zu erkennen sind sie an dem führenden Doppelpunkt. Folgende Pseudoklassen sind in CSS 1 + 2 estgelegt:
:link
Nichtbesuchter Hyperlink.
:visited
Besuchter Hyperlink
:active
Aktiver Hyperlink (Wenn der User mit der Maus auf den Link klickt.) :hover Mouseover-Effekt. Wenn der User den Mauszeiger über einen Hyperlink oder ein anderes Element bewegt.
:focus
Wenn ein Element den Fokus hat. Z.B. Texteingabefelder, in denen der Cursor steht.
:first-child
Ein Element, das das erste Kind eines anderen Elements ist. Folgende Pseudoelemente sind in CSS 1 + 2 festgelegt:
:first-line
Die erste Zeile in einem Absatz.
:first-letter
Das erste Zeichen in einer Zeile.
:before
Fügt vor einem Element einen beliebigen Inhalt ein und formatiert diesen. :after Fügt nach einem Element einen beliebigen Inhalt ein und formatiert diesen.
KlickPseudoklassen lassen sich nur zentral deklarieren.
Dieses Beispiel verbindet das -Tag mit Pseudoklassen und deklariert mit a:link
{color:#0000ff;} eine blaue Schriftfarbe für einen nicht besuchten Hyperlink. a:visited {color:#dddddd;} legt fest, dass Hyperlinks,
nachdem sie angeklickt und besucht wurden in Grau dargestellt werden sollen. a:hover {color:#ff0000;} und a:active {color:#ff0000;} legen eine rote Schriftfarbe für Hyperlinks fest, über die ein Mauszeiger bewegt oder auf die mit der Maus geklickt wird.
Diese Formatierungen sind für das -Tag im gesamten Dokument gültig und im Dokument brauchst Du keine weiteren Angaben machen.
Eine Besonderheit für Hyperlinks ist die Reihenfolge:
:link :visited :hover :active
Das ist kein Browser-Bug sondern CSS-Standard.
:!: