Workshop CSS: Teil 3 - Selektoren I
Selektoren stellen die Verbindung zwischen den zentralen Formaten im <head>-Bereich
oder der externen Datei und den Elementen innerhalb der Seite
dar, die formatiert werden sollen.
Der Aufbau ist immer gleich: Selektor, geschweifte Klammer auf, Stylesheet-Angaben,
geschweifte Klammer zu:
,
,
,
,
,
,
Selektor { Stylesheet-Angabe;}
Selektor
{
Stylesheet-Angabe;
Stylesheet-Angabe;
...
}
Die nun folgenden Erläuterungen sind am Beispiel zentrale Formate im <head>-Bereich
dargestellt. Um sie in eine externe Datei auszulagern, brauchst Du nur die Stylesheet-Angaben
innerhalb des <style>-Tags in eine Datei zu speichern. (Siehe Teil 2)
Universal-Selektor
Universal-Selektoren verknüpfen jedes vorhandene Element mit Stylesheetangaben.
,
,
,
,
,
,
<html><head>
<style type="text/css">
* {
font-size:14px;
color:#ff0000;}
</style>
<title>Irgendein Titel</title>
</head><body>
<h1>Ein "h1"-Tag mit roter Schrift</h1>
<h2>Ein "h2"-Tag mit roter Schrift</h2>
<h3>Ein "h3"-Tag mit roter Schrift</h3>
<p>Ein "p"-Tag mit roter Schrift</p>
<div>Ein "div"-Tag mit roter Schrift</div>
</body></html>
Dieses Beispiel legt für diverse Tags eine Schriftgröße
von 14 Pixel und eine rote Schriftfarbe fest. Der Universal-
Selektor ist nur ein *
Typ-Selektor
Typ-Selektoren verknüpfen einen Elementtyp, also ein HTML-Tag mit einer Formatierung.
,
,
,
,
,
,
<html><head>
<style type="text/css">
h1
{
font-size:14px;
font-style:italic;
}
p {color:#ff0000;}
</style>
<title>Irgendein Titel</title>
</head><body>
<h1>Eine kursive Überschrift</h1>
<p>Und roter Text</p>
</body></html>
Dieses Beispiel legt für das <h1>-Tag eine Schriftgröße von 14 Pixel
und einen kursiven Schriftstil fest.
Für das <p>-Tag ist die Schriftfarbe rot deklariert.
Um Formate für HTML-Tags zentral zu deklarieren, brauchst Du als Selektor nur das HTML-Tag ohne spitze
Klammern (< >) anzugeben.
class-Selektor (Klassen)
Klassen sind Selektoren mit beliebigen Namen.
,
,
,
,
,
,
<html><head>
<style type="text/css">
h1 { font-size:14px; font-style:italic; }
h1.gerahmt { border:1px solid #aaaaaa; }
</style>
<title>Irgendein Titel</title>
</head><body>
<h1>Eine kursive Überschrift</h1>
<h1 class="gerahmt">Eine kursive Überschrift mit Rahmen</h1>
</body></html>
In diesem Beispiel wird mit h1 { font-size:14px; font-style:italic; }
für das <h1>-Tag eine Schriftgröße von 14 Pixel und
ein kursiver Schriftstil festgelegt.
Die nächste Zeile h1.gerahmt { border:1px solid #aaaaaa; } deklariert eine Klasse mit dem
Namen gerahmt. Um diese zu verwenden, musst Du in einem <h1>-Tag das
Attribut class mit dem Namen als Wert in Anführungszeichen einfügen. In diesem Beispiel
ist das <h1 class="gerahmt">.
Das Beispiel oben deklariert eine Klasse, die nur in einem <h1>-Tag verwendet werden kann.
Trägst Du die Klasse in einem anderen Tag ein, wird sie dort ignoriert. Du darfst das Tag vor dem Punkt aber auch weglassen, sodass die Klasse für alle Tags gültig ist,
wie in dem folgenden Beispiel:
,
,
,
,
,
,
<html><head>
<style type="text/css">
h1 { font-size:14px; font-style:italic; }
.gerahmt { border:1px solid #aaaaaa; }
.einfachertext { font-size:14px;}
</style>
<title>Irgendein Titel</title>
</head><body>
<h1>Eine kursive Überschrift</h1>
<h1 class="gerahmt">Eine kursive Überschrift mit Rahmen</h1>
<p>Ein Text</p>
<p class="gerahmt">Ein Text mit Rahmen</p>
<p class="einfachertext">Ein Text, 14 Pixel groß</p>
<div class="einfachertext">Ein Text, 14 Pixel groß</div>
</body></html>
Diese Beispiel deklariert zwei Klassen: gerahmt und einfachertext.
Da vor dem Punkt kein Tag angegeben ist, können diese Klassen in jedem Tag verwendet werden.
Wichtig ist, dass Du bei der Deklaration vor dem Namen den Punkt verwendest, als Wert in dem
class-Attribut jedoch nicht.
Das nächste Beispiel weist einem Element mehrere Klassen zu:
,
,
,
,
,
,
<html><head>
<style type="text/css">
.rot{color:#ff0000;}
.ul {text-decoration:underline}
.fett{font-weight:bold}
</style>
<title>Irgendein Titel</title>
</head><body>
<p class="rot">Ein roter Text</p>
<p class="fett">Ein fetter Text</p>
<p class="ul">Ein unterstrichener Text</p>
<p class="ul rot">Ein Text, rot und unterstrichen</p>
<p class="fett ul">Ein Text, fett und unterstrichen</p>
<p class="rot fett ul">Ein Text, rot, fett und unterstrichen</p>
</body></html>
Diese Beispiel deklariert die drei Klassen: rot, ul und fett.
Um diese Klassen nun für ein Element zu kombinieren, brauchst du sie nur in dem class-Attribut
durch Leerzeichen getrennt anzugeben.
ID-Selektor
ID-Selektoren verknüpfen Elemente über das ID-Attribut mit einer Formatierung.
,
,
,
,
,
,
<html><head>
<style type="text/css">
div {background-color:#efefef;border:1px solid #aaaaaa;}
div#a
{
position:absolute;
top:100px; left:100px;
width:120px; height:80px;
}
#b
{
position:absolute;
top:150px; left:300px;
width:120px; height:80px;
}
</style>
<title>Irgendein Titel</title>
</head><body>
<div id="a">100 Pixel von oben und 100 Pixel von links</div>
<div id="b">150 Pixel von oben und 300 Pixel von links</div>
</body></html>
ID-Selektoren beginnen mit einem #. In diesem Beispiel sind zwei ID-Selektoren deklariert:
a mit div#a und b mit #b. Im Dokument werden diese
Formate jeweils einem <div>-Tag zugeordnet, indem das id-Attribut in das Tag
mit dem Namen des Selektors als Wert in Anführungszeichen eingefügt wird.
Der Unterschied zwischen div#a und #b ist, ähnlich wie bei den class-Selektoren, dass der Selektor a
nur mit einem <div>-Tag verwendet werden kann.
Damit ein Element innerhalb der Dokumentenstruktur eindeutig ist, darf eine ID nur einmal verwendet werden. Deshalb wird diese Art der Formatierung häufig in Zusammenhang mit Javascript verwendet.
Groß-/Kleinschreibung von Selektoren
CSS und HTML schreiben keine Unterscheidung zwischen Groß-/Kleinschreibung vor, XHTML
ja. Bei Verwendung von XHTML hat dies Auswirkung auf Selektoren, das es ein Unterschied ist,
ob du z.B. class="selektor" oder class="Selektor"
schreibst:
,
,
,
,
,
,
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<style type="text/css">
.rot { color:red; }
</style>
<title>Irgendein Titel</title>
</head><body>
<p class="rot">Ein "p"-Tag mit roter Schrift</p>
<p class="Rot">Ein "p"-Tag nicht mit roter Schrift</p>
<p class="ROT">Ein "p"-Tag nicht mit roter Schrift</p>
</body></html>
In diesem Beispiel wird nur der ersten Zeile eine rote Schriftfarbe zugewiesen,
da der Wert des class-Attributs wie in der Stylesheet-Definition klein geschrieben ist.
Da nicht alle Browser zwischen Groß- und Kleinschreibung unterscheiden und es auch ein schlechter
Programmierstil ist, Selektoren mit gleichen Namen und unterschiedlicher Groß-/Kleinschreibung
zu verwenden, solltest du dir grundsätzlich die Kleinschreibung angewöhnen. Dies ist ein
weit verbreiteter Stil und es gibt keine guten Gründe, einen anderen Weg zu wählen.
Sonderzeichen in Selektoren
Der Name für alle Selektoren darf nur aus Groß- oder Kleinbuchstaben (a-z, A-Z), Ziffern (0-9) und dem Bindestrich (-) bestehen und müssen mit einem Buchstaben anfangen. Der Unterstrich _ sollte nicht unbedingt verwendet werden, da dieser nicht von Anfang an zur CSS-Spezifikation gehörte und somit von einigen älteren Browsern nicht interpretiert wird.
,
,
,
,
,
,
<html><head>
<style type="text/css">
.rot { color:red; }
.r_ot { color:red; }
.8blau { color:blue; }
</style>
<title>Irgendein Titel</title>
</head><body>
<p class="rot">Ein <p>-Tag mit roter Schrift</p>
<p class="r_ot">Ein <p>-Tag mit roter Schrift</p>
<p class="8blau">Ein <p>-Tag nicht mit blauer Schrift</p>
</body></html>
Dieses Beispiel weist den ersten beiden Zeilen eine rote Schriftfarbe zu. Die dritte Zeile wird nicht in blauer Schriftfarbe dargestellt, da der Selektorname mit einer Zahl beginnt.
Attributabhängige Selektoren
Attributabhängige Selektoren verknüpfen Formatierungen mit Elementen, die ein bestimmtes Attribut oder/und ein Attribut mit einem bestimmten Wert enthalten.
| Attribut | Beschreibung |
|---|---|
| E[attr] { ... } |
Das Element muss nur das Attribut enthalten. Ob auch ein Wert übergeben wird, ist nicht relevant. Beispiel: <tag attr>, <tag attr="Wert1"> oder <tag attr="Wert2">
|
| E[attr = "Wert"] { ... } |
Das Attribut muss den angegebenen Wert enthalten. Beispiel: <tag attr="Wert">
|
| E[attr ~= "Wert"] { ... } |
Das Attribut muss den Wert in einer durch Leerzeichen getrennten Liste von Werten enthalten. Beispiel: <tag attr="Wert1 Wert Wert2">
|
| E[attr |= "Wert"] { ... } |
Das Attribut muss den angegebenen Wert exakt oder gefolgt von einem Bindestrich enthalten. Beispiel: <tag attr="Wert"> oder <tag attr="Wert-2">
|
Dieses Beispiel weist mit h1[title] { color:red; } dem <h1>-Tag
eine rote Schriftfarbe zu, wenn es das title-Attribut
mit einem beliebigen Wert enthält.
,
,
,
,
,
,
<style type="text/css">
h1[title] { color:red; }
</style>
...
<h1 title="Überschrift">Eine rote Überschrift</h1>
<h1 title="Kapitel">Noch eine rote Überschrift</h1>
Beispiel
Das nächste Beispiel legt für ein <h1>-Tag
eine blaue Schriftfarbe zu, wenn es das Attribut kapitel
mit dem Wert uebersicht enthält.
,
,
,
,
,
,
<html>
<head>
<style type="text/css">
h1[kapitel = "uebersicht"] { color:blue; }
</style>
...
<h1 kapitel="uebersicht">Eine blaue Überschrift</h1>
Beispiel
In dem dritten Beispiel wird für ein <p>-Tag
Rahmen und
Schriftfarbe festgelegt,
wenn der Wert gerade in der Liste der Werte für das Attribut zeile vorkommt.
,
,
,
,
,
,
<style type="text/css">
p[zeile ~= "gerade"] { color:blue;border:1px solid #dddddd; }
</style>
...
<p zeile="uebersicht gerade Farben">
Mit Rahmen
</p>
Beispiel
Das letzte Beispiel legt für <p>-Tags
das Schriftgewicht fett fest, wenn sie das Attribut kapitel enthalten und
der zugewiesene Wert mit ueb- beginnt.
,
,
,
,
,
,
<html>
<head>
<style type="text/css">
p[kapitel |= "ueb"] {font-weight:bold;}
</style>
...
<p kapitel="ueb-ersicht">Schriftart fett</p>
Beispiel
Pseudoformate für Hyperlinks und Anderes
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 festgelegt:
: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.
,
,
,
,
,
,
<style type="text/css">
a:link {color:#0000ff;}
a:visited {color:#dddddd;}
a:hover {color:#ff0000;}
a:active {color:#ff0000;}
</style>
<title>Irgendein Titel</title>
<body>
<a href="datei.htm">Klick</a>
</body>
</html>
Pseudoklassen lassen sich nur zentral deklarieren. Dieses Beispiel verbindet das <a>-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 <a>-Tag im gesamten Dokument gültig und im Dokument brauchst Du keine weiteren Angaben machen.
Eine Besonderheit für Hyperlinks ist die Reihenfolge: :hover und :active müssen
unbedingt nach :link und :visited stehen, sonst werden die Eigenschaften für :hover und
:active ignoriert. Das ist kein Browser-Bug sondern CSS-Standard.
Unterschiedliche Formate für Hyperlinks
Wie in dem vorherigen Abschnitt erwähnt, ist die zentralen Deklaration für das gesamte Dokument gültig.
Das bedeutet aber auch, dass alle Hyperlinks gleich formatiert sind. Dies kann durchaus auch einen Sinn ergeben.
Mit unter taucht aber die Frage nach unterschiedlich formatierten Hyperlinks auf.
Dies lässt sich durch die Kombination von class-Selektoren und
Pseudoklassen lösen.
,
,
,
,
,
,
<html><head>
<style type="text/css">
a:link {color:#0000ff;}
a:visited {color:#dddddd;}
a:hover {color:#ff0000;}
a:active {color:#ff0000;}
a.navi:link
{
text-decoration:none; font-weight:bold;
color:#0000aa;
}
a.navi:visited
{
text-decoration:none; font-weight:bold;
color:#000066;
}
a.navi:hover
{
text-decoration:none; font-weight:bold;
color:#ff0000;
}
a.navi:active
{
text-decoration:none; font-weight:bold;
color:#ff0000;
}
</style>
<title>Irgendein Titel</title>
</head>
<body>
<a href="datei.htm">Klick</a>
<a class="navi" href="datei.htm">Klick</a>
</body>
</html>
Die ersten Angaben a:link, ... formatieren alle Hyperlinks, die im Dokument verwendet werden.
Die folgenden Deklarationen a.navi:link, ... deklarieren den class-Selektor navi
für das <a>-Tag zusammen mit den Pseudoklassen :link, :visited, :hover, :active.
Im Dokument brauchst Du nur noch in einem <a>-Tag das Attribut class="navi" einzufügen,
um mit diesem Hyperlink die Formatierungen zu verknüpfen.
Du kannst auf diese Art viele unterschiedliche Hyperlinks verwenden. Denke aber daran, dass es den User auch verwirren kann.