CSS - Eine Einführung

Mit meinen Seiten möchte ich jeden der sich mit Cascade Style Sheets beschäftigten möchte eine Einführung geben und mit Beispielen belegen.

Die Ausführung der Anweisungen ist recht einfach zu erlernen und gut reproduzierbar. Die Probleme fangen erst dadurch an, dass es zwei konkurrierende Browser gibt nämlich Internet Explorer und Netscape Navigator, diese benötigen für die gleichen Anweisungen unterschiedliche Befehle oder aber sie verstehen mache Anweisungen überhaupt nicht. Für diese Problematik gibt es drei Lösungswege:

Man arbeitet mit sehr einfachen Stylesheet Anweisungen, die alle Browser verstehen
Die doppelte Seitenführung (meiner Meinung nach die schlechteste)
Die doppelten Stylesheet Dateien (vielleicht ein Kompromis)

Ich persönliche ziehe es vor mit einfachen Anweisungen zu Arbeiten und die Hoffnung nicht aufzugeben, dass sich die Problematik früher oder später von alleine erledigt. Wenn ich meine Statistiken der letzten Jahre so ansehe, ist Netscape wohl oder übel der Verlierer (derzeit nur noch 15% der Besucher)eventuell holt Netscape mit der Version 6.x wieder auf.

Soviel zur Theorie, jetzt schreiten wir zur Praxis, dabei werde ich mehr mit Beispielen arbeiten, als alles gross und breit zuerläutern.

Als erstes zeige ich verschiedene Möglichkeiten Style Sheets einzubinden.

Externe Datei mit den Namen "sample.css". Speichern sie diesen Quelltext als " css-sample00.htm".

<html>
<head>
<title>Meine erste Seite mit Stylesheet </title>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<html>
<body>
<h1>Testseite</h1>
</body>
</html>

Den folgenden Text speichern wir als " css-sample.css".

h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-style: normal;
	color: #FF0000;
	background-color: #FFFFCC;
	text-align: center;
	border-top: inset;
	border-bottom: inset;
	position: relative;
}

Hier die Webseite mit integriertem Style Sheet. Diesen Quelltest speichern wir als " css-sample01.htm".

<html>
<head>
<title>Meine erste Seite mit Stylesheet </title>
<style type="text/css">
<!--
h1 {font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 24px;
  font-style: normal;
  color: #FF0000;
	background-color: #FFFFCC;
	text-align: center;
	border-top: inset;
	border-bottom: inset;
	position: relative;
}
-->
</style>
</head>
<body>
<h1>Testseite</h1>
</body>
</html>

Für kurze Anweisungen z.B. eine Farbzuweisung kann man diese auch direkt einbinden.

<html>
<head>
<title>Meine erste Seite mit Stylesheet </title>
</head>
<body>
<h2 style="color: #FF0000; text-align: center;">
Test&uuml;berschrift</h2>
</body>
</html>

Testüberschrift

Dann wäre noch dir Import Funktion zu nennen, diese wird von neueren Browsern unterstützt.

<html>
<head>
<title>Meine erste Seite mit Stylesheet </title>
<style type="text/css">
@import url(style.css);
</style>
</head>
<html>
<body>
<h1>Testseite</h1>
</body>
</html>

Einbindung von Style Sheets und Medienbezug

Internet Explorer

Netscape

Opera

Windows

Macintosh

(Alle)

4.0

5.0

5.5

6.0

4.0

5.0

4.x

6.0

7.0

3.5

5.0

7.0

@import

@media

@font-face

T = Teilweise

F = Fehlerhaft

J = Ja

N = Nein

Cascade Style Sheet (CSS) oder auch Cascading Stylesheets genannt

Man arbeitet mit sehr einfachen Stylesheet Anweisungen, die alle Browser verstehen

Die doppelte Seitenführung (meiner Meinung nach die schlechteste)

Die doppelten Stylesheet Dateien (vielleicht ein Kompromis)

Testüberschrift

Einbindung von Style Sheets und Medienbezug

CSS - Cascading Stylesheets

CSS - Cascading Stylesheets