Tutorial zu CSS2 © 04/2002 webnetline.de & topwebhamster.de

Cascading Style Sheets, level 2

3.Zentrale Formate und Unterklassen

Style-Sheet-Vorlagen definieren die Eigenschaften für HTML-Befehle wie Absatztypen oder Tabellen. Wenn Sie das entsprechende HTML-Tag dann in der HTML-Datei verwenden, werden diese Formate angewendet. Dazu notieren Sie zuerst das gewünschte HTML-Tag und zwar ohne spitze Klammern, gefolgt von den Style-Sheet-Angaben für dieses Tag, eingeschlossen in geschweiften Klammern.
Wenn Sie das entsprechende HTML-Tag dann in der HTML-Datei verwenden, werden diese Formate angewendet. Dazu notieren Sie zuerst das gewünschte HTML-Tag und zwar ohne spitze Klammern, gefolgt von den Style-Sheet-Angaben für dieses Tag, eingeschlossen in geschweiften Klammern. Wenn Sie gleichartige Formate für mehrere HTML-Tags definieren wollen, geben Sie alle gewünschten Tags an und trennen Sie diese durch Kommata

Listing 6:

<style type="text/css">
h1 { font-size:48pt; color:#FF0000; font-style:italic; }
p,li { font-size:12pt; font-family:Helvetica,Arial; }
</style>

Unterklassen von HTML-Tags bilden Sie, indem Sie zuerst das Tag notieren, gefolgt von einem Punkt und dem Namen der Unterklasse. Den Namen hinter dem Punkt dürfen Sie frei wählen. Er darf keine Leerzeichen oder Umlaute enthalten.

Das vorangestellte HTML-Tag können Sie auch weglassen. In diesem Fall beginnt die Formatdefinition mit einem Punkt. Dahinter folgt der Name der Unterklasse. Dadurch definieren Sie eine sogenannte leere Klasse mit Formatierungen, die Sie anschließend auf jedes beliebige HTML-Tag anwenden können.

Um eine Unterklasse anzuwenden, notieren Sie im einleitenden HTML-Tag die Angabe class= und dahinter den Namen der Unterklasse in Anführungszeichen

Listing 8:

<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
p.gruen { color:green; }
p.rot { color:red; }
.blau { color:blue; }

</style>
</head>
<body>
<h1 clarr="blau">Eine &Uuml;berschrift</h1>
<p class="blau">ein blauer Text</p>
<p class="rot">roter Text</p>
</body>
</html>

Abhängige Formate
Mit Hilfe von Style Sheets können Sie auch bestimmen, dass ein HTML-Tag bestimmte Eigenschaften nur dann hat, wenn es innerhalb eines bestimmten anderen HTML-Tags vorkommt. So können Sie etwa bestimmen, dass <i>...</i>innerhalb von Überschriften nicht kursiv, stattdessen aber in blauer Farbe dargestellt wird, während der gleiche Befehl innerhalb anderer HTML-Tags nach wie vor nichts anderes als eine kursive Darstellung bewirkt. Die entsprechende Style-Definition finden Sie in

Listing 9:

<style type="text/css">
h1 { color:red; }
h1 i { color:blue; font-weight:normal; }
</style>

Sie notieren zuerst das übergeordnete Tag, im Beispiel h1 und dahinter, durch ein Leerzeichen getrennt, das untergeordnete Tag, im Beispiel i.

Unabhängige Formate
Ähnlich wie leere Klassen, funktionieren auch unabhängige Formate, ein weiteres Feature von Style Sheets. Solche Formate können Sie auf beliebige HTML-Tags anwenden, beispielsweise als Ergänzung für andere Formate. So können Sie auch ein unabhängiges Format mit der Eigenschaft fett/kursiv definieren. Dieses unabhängige Format können Sie dann innerhalb von HTML-Tags zusätzlich zu anderen Formaten anwenden, die für das betreffende Tag definiert sind. Eine solche Formatdefinition finden Sie in

Listing 10:

<style type="text/css">
#fettkursiv { font-weight:bold; font-style:italic; }
</style>

Unabhängige Formate beginnen mit dem Gatterzeichen "#". Unmittelbar dahinter folgt ein frei vergebbarer Name für das Format. In HTML können Sie dann mit dem Attribut id= in einem gewünschten Tag auf das Format Bezug nehmen:

<blockquote id="fettkursiv">Mehr Licht!</blockquote>

Maßeinheiten für numerische Angaben

Absolute Angaben:

Relative Angaben:

bezahlte Bannerwerbung:
 freeSMS.GeileLogos.de
CSS Tutorial - ein Service von topwebHamster
Hamsterbild von topwebHamster
Valid CSS! diesen Button dürfen Sie auf Ihre Website einfügen, wenn sie die Prüfung des CSS- Validators http://jigsaw.w3.org/css-validator/validator-uri.html bestanden hat.
Jörg Jünemann, Berlin / Ralf Roletschek, Eberswalde