Dynamische Webseiten

Virtueller Campus Projekt, PHBern

StartseiteJavaScriptCSSJSPPHPMySQLDrucken

Schriftgrösse: kleiner - zurücksetzen - grösser

Einbinden von CSS-Dateien

Die folgenden Beispiele sollen verdeutlichen, wie eine CSS-Datei mit einem HTML-Dokument verbunden wird. Im grauen Kasten ist der Quelltext zu sehen, und mit einem Klick auf den Link unterhalb des Kastens öffnet sich das Beispiel dazu in einem neuen Fenster, in welchem die Ausgabe des entsprechendes Beispiels stattfindet.

Beispiel 1: Eine HTML-Datei ohne CSS

Die Überschrift <h1> und der Absatz <p> werden mit den Standarteinstellungen angezeigt.

<html>
<head>
<title>CSS Einbinden</title>
</head>
<body>

<h1>Überschrift</h1>

<p>Hier steht der eigentlich Text.</p>

</body>
</html>

Beispiel zeigen


Beispiel 2: Eine HTML-Datei mit Formatierungen

Bei diesem Beispiel wird mit

<span style="font-size:3.3em; color:#990033">Überschrift</span> der Überschrift ein Layout gegeben. Es wird angegeben, wie gross sie sein soll, und in welcher Farbe der Text dargestellt werden soll.

<html>
<head>
<title>CSS Einbinden</title>
</head>
<body>

<span style="font-size:3.3em; color:#990033">Überschrift</span>

<p>Hier steht der eigentliche Text.</p>

</body>
</html>

Beispiel zeigen


Beispiel 3: Eine HTML-Datei mit integriertem CSS

Mit dem Tag <style type="text/css"></style> werden die Formatierunge der Überschriften im HTML-Dokument beschrieben. Alle Überschriften haben dieselbe Farbe (color:#990033), aber unterschiedliche Grössen (font-size). Der Vorteil dieser Art der Einbindung ist, dass es es relativ einfach geht, und man CSS-Eigenschaften in der HTML-Seite selber aufgelistet hat. Das geht aber nicht, wenn eine Homepage aus mehreren Seiten besteht, da in diesem Fall in jeder Datei die Eigenschaften angepasst werden müssten.

<html>
<head>
<title>CSS-Einbinden</title>

<style type="text/css">
h1,h2,h3{color:#990033;}
h1{font-size:3.3em;}
h2{font-size:2em;}
</style>

</head>
<body>

<h1>Überschrift</h1>
<h2>zweite Überschrift</h2>
<p>Hier steht der eigentliche Text.</p>

</body>
</html>

Beispiel zeigen

Beispiel Online Bearbeiten


Beispiel 4: Eine HTML-Datei mit CSS-Verknüfpung

<html>
<head>
<title>Grundgerüst einer HTML-Datei</title>
<link rel="stylesheet" type="text/css" href="css/bsp/style_einb04.css">
</head>
<body>

<h1>Überschrift 1</h1>
<h2>Überschrift 2</h2>
<h3>Überschrift 3</h3>

<p>Hier steht der eigentliche Text.</p>

</body>
</html>

Beispiel zeigen

Beispiel Online Bearbeiten

Im Beispiel 4 wird mit

<link rel="stylesheet" type="text/css" href="css/bsp/style.css"> eine CSS-Datei aufgerufen, in welcher Informationen, wie Schriftart, -höhe, -farbe, und weitere Informationen gespeichert sind. Dies ist eine ganz normale Textdatei, welche mit jedem Texteditor erstellt werden kann.
Die Datei style_einb04.css enthält folgende Zeilen:

body{ font: normal 12px Arial,Helfetica,sans-serif; background-color:#FFFF00; } h1,h2,h3{color:#990033;} h1{font-size:3.3em;} h2{font-size:2em;} h3{font-size:1em;}

Der erste Teil definiert allgemeingültige Formatierungen. Der zweite Teil definiet die Farben für die Links auf der Homepage und der dritte Teil die Farbe, wie auch die Grösse für die verschiedenen Überschriften h1, h2 und h3. Wobei die Farbe für alle Überschriften gleich ist.

Um eine Homepage zu gestalten, welche ein einheitliches Layout aufweist, ist es von Vorteil diese vierte Variante zu verwenden, da wir die Eigenschaften nur an einem Ort abspeichern müssen. Für die Erklärungen und Beispiele auf dieser Homepage wird jedoch vorwiegend die zweite Variante verwendet, da die Beispiele nur eine Seite gross sind. Die Eigenschaften können jedoch 1:1 in einer CSS-Datei übernommen werden!