CSS Fibel - Lektion 2
Wir können unsere H2 Überschriften auch weiter gestalten...
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE TYPE="text/css">
H2 { color:#FF0000; font-style:italic }
</STYLE>
</HEAD>
<BODY>
<H2>Absatz 2</H2>
</BODY>
</HTML>
|
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE TYPE="text/css">
H2 { color:#FF0000; font-style:italic; font-family:arial,sans-serif }
</STYLE>
</HEAD>
<BODY>
<H2>Absatz 2</H2>
</BODY>
</HTML>
|
Font-Family kann entweder der Name einer Schriftart sein (arial, "times new roman", verdana, etc), oder eine allgemeine Beschreibung (serif, sans-serif, etc)
Ich sag's nochmal, diese Eigenschaften können im Abschnitt CSS Properties des CSS Nachschlagewerks dieser Fibel gefunden werden.
Also, jetzt haben wir folgendes getan... alle H2 Überschriften auf der Seite sind rot, kursiv und in Arial...
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE TYPE="text/css">
H2 { color:#FF0000; font-style:italic; font-family:arial,sans-serif }
</STYLE>
</HEAD>
<BODY>
Ebene 2 Überschriften:
<H2>Absatz 1</H2>
<H2>Absatz 2</H2>
<H2>Absatz 3</H2>
<HR>
Alle Überschrift Größen:
<H1>Überschrift 1</H1>
<H2>Überschrift 2</H2>
<H3>Überschrift 3</H3>
<H4>Überschrift 4</H4>
<H5>Überschrift 5</H5>
<H6>Überschrift 6</H6>
Beachte, dass nur die H2 Überschrift durch unser style sheet
betroffen ist.
</BODY>
</HTML>
|
In Ordnung Joe, das hab' ich verstanden. Bitte sag' mir, wie das denn nützlich ist.
Nun, es ist nützlich, weil Du mit ein paar Klicks auf der Tastatur das Aussehen der ganzen Website ändern kannst. Später lernen wir, wie wir den CSS Code in eine separate Datei auslagern und in jeder Webseite darauf verweisen. Schau Dir die Navigation in Pagetutor an. Die verwendeten Farben und Schriftarten in den Tabellen werden alle von einer CSS Datei gesteuert. (Du musst sie vielleicht per Rechtsklick downloaden und sie mit Notepad öffnen.)
Es ist auch nützlich, weil es die HTML Dateien kleiner machen kann. Du wiederholst nicht andauernd einen ganzen Stapel von Farben und Schriftarten usw. in Deiner HTML Tags.
Als das sind sehr nützlich Sachen in Deiner HTML Werkzeugkiste.
| << Zurück Weiter >> |
 |
 |
