CSS Fibel - Lektion 3
Was, wenn wir nur bestimmte H2 Überschriften rot, kursiv und in Arial haben möchten und den Rest normal?
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE TYPE="text/css">
H2.joe { color:#FF0000; font-style:italic; font-family:arial,sans-serif }
</STYLE>
</HEAD>
<BODY>
<H2 CLASS="joe">Roter Absatz 1</H2>
<H2 CLASS="joe">Roter Absatz 2</H2>
<H2>Normaler Absatz 3</H2>
<H2>Normaler Absatz 3</H2>
</BODY>
</HTML>
|
Verstehst Du, was hier passiert? Wir haben eine Klasse von H2 Überschriften definiert. Jede Klasse joe erhält die rot/kusiv/Arial-Behandlung. Der Rest wird nicht angefasst.
Schau Dir das mal an...
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE TYPE="text/css">
H2 { color:#000099; font-family:verdana }
H2.joe { color:#FF0000; font-style:italic; font-family:arial,sans-serif }
H2.eddie { color:#339933; font-family:"trebuchet ms",sans-serif }
H2.paul { color:#FFBB00; font-style:italic; font-family:"trebuchet ms",sans-serif }
</STYLE>
</HEAD>
<BODY>
<H2>Normaler Absatz</H2>
<H2 CLASS="joe">Joes Absatz</H2>
<H2 CLASS="eddie">Eddies Absatz</H2>
<H2 CLASS="paul">Pauls Absatz</H2>
</BODY>
</HTML>
|
Zuerst haben wir allgemeine H2 Eigenschaften festgelegt. (Das ist aber optional. Wenn keine allgemeinen Eigenschaften festgelegt wurden, nimmt der Browser die Standard-Eigenschaften für dieses Element.) Als nächstes können wir Klassen definieren, die dann hier und dort nach Wunsch angewendet werden. Wir müssen dann im entsprechenden Element nur noch schreiben: CLASS="wasauchimmer".
Wir können dies für alle Elemente (Tags) tun. Wir müssen nur daran denken, dass diese CSS Unterstützung zwischen den Browsern unterschiedlich sein kann (abgesehen von den Browser-Versionen). Prüfe Deine Seiten also immer mit verschiedenen Versionen von Netscape und Internet Explorer.
Hier habe ich ein paar Übungen für Dich...
Übung: Erstelle eine Seite. Verwende Style Sheets, bei denen alle fett geschriebenen Worte (<b>) sowohl blau als auch kursiv geschrieben werden.
Übung: Erstelle folgende Tabelle...
| Jungs | Mädchen |
| Frankie | Tammy |
| Johnny | Wendy |
| Ralphie | Susie |
Verwende Style Sheets, bei denen eine Klasse TD hellblau ist (weise sie der Spalte Jungs zu) und eine Klasse TD rosa (weise sie der Spalte Mädchen zu). Hinweis: Verwende die Eigenschaft Hintergrundfarbe (background-color) statt Farbe.
Übung: Mache es so, dass die Überschriften etwas dunkler sind (dunkleres blau und dunkleres rosa), als die restlichen Zellen.
| << Zurück Weiter >> |
 |
 |
