HTML, CSS und JavaScript

Dokument­darstellung mit CSS

 aufwärts

Trennung von Struktur und Darstellung

Wie schon erwähnt, ist es sinnvoll, die Beschreibung der Struktur des Dokuments und die Beschreibung der Darstellung der einzelnen Struktur­elemente zu trennen. Auf diese Weise ist es möglich, ein und dasselbe Dokument auf unter­schiedlichen Ausgabemedien (Bildschirm, Drucker, Handy) unter­schiedlich darzustellen. Ebenso ist es leichter, die Darstellung bei Bedarf zu ändern, wie z.B. alle Überschriften mit einem farbigen Hintergrund zu versehen.

Zur Beschreibung der Struktur des Dokuments wird HTML verwendet, zur Beschreibung der Darstellung sogenannte Cascading Style Sheets (CSS).

Zwar ist in HTML auch die Kennzeichnung der Darstellung der Elemente vorgesehen, entweder durch entsprechende Tags (etwa <b> für Fettdruck) oder durch die Angabe von Attributen (wie zum Beispiel <p align="center">), wenn von der Standard-Darstellung abgewichen werden soll.

Wir wollen dagegen so vorgehen, dass wir HTML nur zur Kennzeichnung der Struktur des Dokuments verwenden. Auf alle Möglichkeiten, in HTML auch die Darstellung zu beeinflussen, verzichten wir weitgehend. Anstelle dessen lagern wir jegliche Beschreibung der Darstellung in Style Sheets aus.

 

Einführende Beispiele

Browser wie z.B. der Internet-Explorer verwenden Standard-Einstellungen zur Darstellung der verschiedenen HTML-Elemente. So wird z.B. für das Element body die Schriftart Times verwendet, die Schriftfarbe ist schwarz, der Hintergrund weiß. Für h1-Überschriften wird eine größere Schrift in Fettdruck verwendet, für em-Elemente wird kursive Schrift verwendet usw.

Alle diese Standard-Einstellungen lassen sich mithilfe von Style Sheets ändern. Wir wollen als allererstes zunächst nur statt der Schriftart Times die Schriftart Arial verwenden. Dies geschieht durch ein style-Element im head-Teil des HTML-Dokuments, das eine entsprechende Einstellung enthält:

<html>
<head>
<title></title>
<style type="text/css">
    body {font-family: Arial;}
</style>
</head>
<body>
<p>Dies ist der Text.</p>
</body>
</html>

Die Angabe body {font-family: Arial;} bewirkt, dass jeglicher Text innerhalb des body-Elements in der Schriftart Arial dargestellt wird.

In folgendem Beispiel werden noch weitere Einstellungen geändert: Die Schriftfarbe soll blau sein, der Hintergrund gelb. Überschriften sollen rot dargestellt werden, in der Schriftgröße 18 Punkt und nicht in Fettdruck, hervor­gehobener Text innerhalb eines em-Elements soll nicht kursiv, sondern unterstrichen erscheinen.

<html>
<head>
<title></title>
<style type="text/css">
    body {font-family: Arial; color: blue; background-color: yellow;}
    h1 {color: red; font-size: 18pt; font-weight: normal;}
    em {font-style: normal; text-decoration: underline;}
</style>
</head>
<body>
<h1>Dies ist die Überschrift</h1>
<p>Dies ist <em>hervor­gehobener</em> Text.</p>
</body>
</html>

 

Externe Style Sheets

Die Angabe eines Style Sheets im head-Teil eines HTML-Dokuments ändert natürlich nur die Einstellungen für dieses Dokument. Oft sollen aber die gleichen Einstellungen für viele HTML-Seiten verwendet werden. Dies wird erreicht, indem die entsprechenden Einstellungen in einer eigenen Datei mit der Endung .css abgespeichert werden. In HTML-Dokumenten, die diese Einstellungen verwenden sollen, wird jeweils ein Verweis auf diese Datei angebracht.

Beispiel:  Es wird eine Datei mit dem Namen meinstil.css und mit folgendem Inhalt angelegt:

body {font-family: Arial; color: blue; background-color: yellow;}
h1 {color: red; font-size: 18pt; font-weight: normal;}
em {font-style: normal; text-decoration: underline;}

In einer HTML-Datei, die diese Einstellungen verwenden soll, wird im head-Teil ein Verweis auf die Style-Sheet-Datei meinstil.css angebracht:

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="meinstil.css">
</head>
<body>
<h1>Dies ist die Überschrift</h1>
<p>Dies ist <em>hervor­gehobener</em> Text.</p>
</body>
</html>

Der Vorteil dieser Methode besteht darin, dass alle HTML-Dokumente, die diese externen Style-Sheet-Datei einbinden, einheitlich dargestellt werden. Änderungen an der Style-Sheet-Datei, z.B. eine Erhöhung der Überschriften­größe auf 24 Punkt, wirken sich dann einheitlich auf alle diese HTML-Dokumente aus.

 

Literatur

Alles Weitere zu CSS finden Sie unter

[1]http://de.selfhtml.org/  

 

 

Weiter mit:   [Formulare]   oder   up

 

homeH.W. Lang   FH Flensburg   lang@fh-flensburg.de   Impressum   ©  
Valid HTML 4.01 Transitional