Sie können Ihre CSS-Formatierungsregeln über unterschiedliche Techniken zuweisen. Regeln (Styles) können für ein bestimmtes HTML-Tag (HTML-Element) oder für anders 'adressierte' Elemente gelten. Sie können sich mit eigenen CSS-Klassen von den HTML-Tags lösen oder (umgekehrt) Formate für sämtliche Seitenelemente global festlegen.
|
1 über den Universal-Selektor (alle Elemente) |
* {
font-family:Arial,sans-serif;
color: #000000;
}
|
Allen Elementen der Seite wird die Schrifttype und
die Textfarbe zugeordnet! Das bedeutet: Die Schrifttype Arial und die Textfarbe schwarz müsste man in anderen Formatanweisungen nicht mehr zusätzlich notieren.
|
|
2a für ein HTML-Element (body = gesamte Seite) |
body {
font-family:Arial,sans-serif;
color: #8080FF;
}
|
Allen untergeordneten HTML-Elementen von 'body' wird die Schrifttype und die Textfarbe vererbt! Das bedeutet: Soll die Schrifttype Arial sein und der Text blau, müsste man das für untergeordnete HTML-Elemente nicht mehr zusätzlich notieren.
Alle Texte (<h1>,<p>,<td>, ...) sind blau, wenn man nicht anderslautende Anweisungen festlegt, welche diese Regel außer Kraft setzt.
|
|
|
2b für ein HTML-Element (HTML-Tag)
|
h1 {
font-family:Arial,sans-serif;
font-size:18px;
color: #8F8F8F;
}
|
Allen Seitenelementen mit dem Elementnamen 'h1' werden die notierten Eigenschaften zugeordnet.
<h1>Überschrift</h1>
|
|
|
3a für eine CSS-Klasse
|
.text11 {
font-family:Arial,sans-serif;
font-size: 11px;
}
.blau {
color: #0000FF;
}
|
Innerhalb einer Seite darf eine Klasse als Attribut in mehreren Elementen verwendet werden.
<p class="text11">Text</p>
<td class="text11">Text</p>
<h2 class="text11">Text</p>
Es ist auch möglich, mehrere Klassen einzutragen.
<p class="text11, blau">Text</p>
|
|
|
3b für eine ID |
#rot {
font-family:Arial,sans-serif;
font-size:12px;
color: #FF0000;
}
|
Innerhalb einer Seite dürfen mehrere IDs verwendet werden wenn jede ID eine andere Bezeichnung hat (keine Doppelnennungen).
<p id="rot">Text Text Text</p>
|
(gültig für ein Element innerhalb der Seite)
|
|
3c für eine Pseudoklasse (z.B. MouseOver)
|
a:link {
font-family:Arial,sans-serif;
font-size:12px;
color: #0D0DFF;
}
a:visited {
color: #0D0DFF;
}
a:hover {
color: #FF0000;
}
a.blau:visited {
color: #000DFF;
}
a.blau:hover {
color: #FF5C3C;
}
|
Pseudoklassen werden für Verweise (<a>-Tags) notiert. So hat man die Möglichkeit die Darstellung von Links, bereits besuchten Links und Textlinks bei MouseOver zu unterscheiden.
<a href="datei.htm">Linktext</a>
Interessant ist auch die Möglichkeit für eigene Unterklassen von Textverweisen zusätzlich Pseudoklassen zu definieren.
|
Home • CSS • Bindeglieder
Wie stellt man die Zusammenhänge zwischen CSS-Formatvorlagen und Seitenelementen her? Infos über die Bindeglieder (Selektoren) zwischen CSS-Anweisungen und HTML-Elementen.
Weiter zur Seite: 3) CSS Einbinden
2a) Formatierungen verknüpfen