CSS Fibel - Lektion 6
Bis jetzt haben wir die Style Sheet Anweisungen immer direkt in die Seite geschrieben. Eine mächtigere Nutzung von Style Sheets ist aber das Verlinken auf sie. Nimm mal dieses einfache Beispiel...
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE TYPE="text/css">
H2 { color:#FF0000; font-style:italic }
</STYLE>
</HEAD>
<BODY>
<H2>Absatz 2</H2>
</BODY>
</HTML>
|
Nimm die Style Sheet Anweisungen und packe sie in eine separate Datei, zum Beispiel mystyle.css...
H2 { color:#FF0000; font-style:italic }
|
Dann verlinkst Du in Deiner HTML Datei auf diese Datei...
<HTML> <HEAD> <TITLE></TITLE> <LINK REL="stylesheet" TYPE="text/css" HREF="mystyle.css"> </HEAD> <BODY> <H2>Absatz 2</H2> </BODY> </HTML> |
Die ganze Idee hinter dieser Sache ist sehr offensichtlich... eine Style Sheet Datei kann für das gesamte Web oder sogar mehrere Webs genutzt werden. Wenn es Konflikte zwischen den eingebetteten und verlinkten Style Sheet Anweisungen gibt, haben die eingebetteten den Vorrang.
Übung: Erstelle drei HTML Seiten mit ein paar Links. Erstelle eine Style Sheet Datei, die alle drei Seiten kontrolliert. Mache die Links und besuchten Links grün und fett, die aktiven Links gelb und fett und wenn die Maus darüber fährt, sollen sie hellgrün und fett werden. (Denke daran... das Maus-Over funktioniert nur in Internet Explorer (basierten) Browsern.)
So, das war's mit meiner kleinen CSS Fibel. Ich ermutige Dich, noch ein wenig mit diesen Style Sheet Beispielen auf Deinen Seite weiter zu arbeiten. Studiere das Thema weiter, denn es gibt viel darüber zu lesen.
Bevor wir Schluss machen, muss ich noch einen Rat loswerden (wenn Dir das bekannt vorkommt, hast Du recht)...
- Werde nicht zu versessen mit diesen Dingen. Nur weil etwas "eigentlich funktionieren müsste", heißt das nicht auch, das es das wird. Sei vorsichtig mit den Eigenschaften zur Positionierung. Hier kann es ein Menge Schwierigkeiten geben.
- Eine pixelgenaue Darstellung gibt es in der realen Welt nicht, die Browser machen es nicht so wie Du es willst. Denke daran, je mehr Kontrolle Du willst, desto weniger hast Du tatsächlich. Der Schlüssel zu intelligenter Kontrolle sind flexible Seiten.
- Teste Deine Seiten immer mit verschiedenen, neuen Versionen von Netscape und Explorer.
Viel Glück!
| << Zurück |
 |
 |
