|
|
Mit CSS ist es möglich, Formate für eine Gruppe von Elementen zu definieren. Diese Gruppen, Klassen genannt, bildet man unter Verwendung des HTML- Attributes class :
Beispiel #1:
Definieren einer Klasse und Formatieren derselben mit CSS
Quelltext:
 |
|
|
|
<html>
<head>
<title>CSS-Klasse formatieren</title>
<style type="text/css">
<!--
.fett_und_rot
{
font-weight:bold;
color:red;
}
-->;
</style>
</head>
<body>
<h1 class="fett_und_rot">Überschrift, mit CSS formatiert.</h1>
<i class="fett_und_rot">kursiver Fliesstext, ebenfalls mit CSS formatiert.</i>
<p>Absatz ohne Formatangaben</p>
</body>
</html>
|
|
|
|
|
Erläuterung:
Im <head> der Seite wird per CSS ein Format für eine Klasse fett_und_rot definiert.
Erfolgen tut dies durch Angabe des Klassennamen mit vorangestelltem Punkt, gefolgt von den CSS-Formatangaben, eingeschlossen von geschweiften Klammern.
Ferner befindet sich innerhalb der Seite eine Überschrift <h1> und ein <i>-Element, welche durch Angabe des class-Attributes der Klasse fett_und_rot zugeordnet werden.
Als weiteres Element befindet sich ein Absatz <p> in der Seite, welcher jedoch nicht der CSS-Klasse zugeordnet wurde.
Als Ergebnis werden die Elemente <h1> und </i>mit den eingangs im CSS-Block für diese Klasse definierten Formaten dargestellt, und zwar fett und mit roter Schriftfarbe.
Die Darstellung des Abatzes <p> hingegen ist einzig abhängig von den Einstellungen des verwendeten Browsers.
Weiterhin besteht die Möglichkeit, Klassenformate für bestimmte Seitenelemente einzuschränken...
Beispiel #2:
Definieren einer Klasse und unterschiedliches Formatieren der dieser Klasse zugehörigen Elemente
Quelltext:
|
|
|
|
<html>
<head>
<title>CSS-Klasse formatieren</title>
<style type="text/css">
<!--
.fett_und_rot
{
font-weight:bold;
color:red;
}
h1.fett_und_rot
{
text-decoration:underline;
}
-->
</style>
</head>
<body>
<h1 class="fett_und_rot">Überschrift, mit CSS formatiert.</h1>
<i class="fett_und_rot">kursiver Fliesstext, ebenfalls mit CSS formatiert.</i>
<p>Absatz ohne Formatangaben</p>
</body>
</html>
|
|
|
|
|
Erläuterung:
Die Seite enthält wiederum die selben Elemente wie in Beispiel #1.
Zusätzlich wurde ein Format für Überschriften <h1> definiert, und zwar sollen diese unterstrichen dargestellt werden.
Diese Formatangabe erfolgt unter Angabe des Elementtypsh1, gefolgt von einem Punkt und dem CSS-Klassennamen.
Von dieser Formatangabe sind nur Seitenelemente betroffen, welche dem angegebenen Typ entsprechen und der entsprechenden Klasse angehören.
Im Ergebnis werden wie in Beispiel #1 die Elemente <h1> und <i> fett und in roter Schrift dargestellt. Zusätzlich wird die Überschrift <h1> nun, entsprechend der Formatangabe, unterstrichen angezeigt. Das Element <i> ist davon jedoch nicht betroffen, obwohl es derselben CSS-Klasse angehört.
|
|
