CSS Fibel - Lektion 1
Wir wissen, wie man eine große Überschrift macht...
Absatz 1
<H2>Absatz 1</H2>
Wir wissen, wie man sie rot macht...
Absatz 1
<H2><FONT COLOR="#FF0000">Absatz 1</FONT></H2>
Wir wissen, wie man sie kursiv macht...
Absatz 1
<H2><FONT COLOR="#FF0000"><I>Absatz 1</I></FONT></H2>
Wir wissen, wie man die Schriftart Arial zuweist...
Absatz 1
<H2><FONT COLOR="#FF0000" FACE="arial"><I>Absatz 1</I></FONT></H2>
Wenn wir jede Überschrift auf der Seite so gestalten möchten, können wir diese Tags jeder H2 beifügen. Aber es gibt noch eine andere Möglichkeit...
Speichere die Seite als page.html...
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <H2>Absatz 2</H2> </BODY> </HTML> |
Jetzt füge ein Paar STYLE Tags in den Head Bereich ein...
<HTML> <HEAD> <TITLE></TITLE> <STYLE TYPE="text/css"> </STYLE> </HEAD> <BODY> <H2>Absatz 2</H2> </BODY> </HTML> |
Füge das Element hinzu, das Du "gestalten - stylen" möchtest, und füge ein Paar geschweifte Klammern {} hinzu...
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE TYPE="text/css">
H2 {}
</STYLE>
</HEAD>
<BODY>
<H2>Absatz 2</H2>
</BODY>
</HTML>
|
Lege fest, dass alle H2 Elemente rot sein sollen...
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE TYPE="text/css">
H2 { color:#FF0000 }
</STYLE>
</HEAD>
<BODY>
<H2>Absatz 2</H2>
</BODY>
</HTML>
|
#FF0000 ist der hexadezimale Code für die Farbe rot. Falls Dir das neu sein sollte, leg diese Fibel beiseite und fange mit den HTML Grundlagen an.
Ganz schön cool, nicht wahr?
Um potentielle Probleme zu vermeiden ist es sinnvoll, Farben als hexadezimale Werte anzugeben, wie im Beispiel getan. Browser verstehen auch viele Farben durch ihren Namen (red, blue, aquamarine), aber das ist nicht so präzise und öffnet die Tür für lästige Farbkonflikte.
Du findest die Farben Eigenschaft (zusammen mit anderen Eigenschaften) unter CSS Properties im CSS Nachschlagewerk, das dieser Fibel beigefügt ist. Bitte klicke auf den Link "CSS Reference" am Ende jeder Seite dieser Fibel.
Ich nehme mal an, jetzt ist ein guter Zeitpunkt, um über Browserkompatibilität zusprechen. Die meisten Browser unterstützen CSS. Die, die es nicht tun, zeigen alles an, aber ohne die schönen Farben und so weiter... aber die Seite ist noch lesbar.
Denke daran, dass die Unterstützung con CSS in den neueren Browser nicht immer gleich ist. Jeder große Browser, ungeachtet der verschiedenen Versionen desselben Browsers, können in ihrer CSS Unterstützung variieren. Hier und dort findest Du Übersichten im Web, welche Browser welche Eigenschaften unterstützen. In den meisten Fällen liegen sie eng beieinander. Auch wenn Du frühere Ratschläge von mir beachtest hast und Deine Seiten nicht pixelgenau gestaltet hast, wirst Du sehen, dass kleine Abweichungen keine Auswirkungen haben. Wie immer auch hier mein Rat... überprüfe Deine Seiten in mehreren Browsern und in verschiedenen Auflösungen.. Schalte CSS Unterstützung aus, und schau Dir an, wie die Seiten dann aussehen..
| << Zurück Weiter >> |
 |
 |
