Hier bist Du: Home « Workshops « Workshop CSS: Teil 2 - Stylesheets in HTML einbinden

Workshop CSS: Teil 2 - Stylesheets in HTML einbinden

 

nach oben

Aufbau der Stylesheet-Angabe

Eine Stylesheet-Angabe besteht aus der Eigenschaft und dem Wert, getrennt durch einen Doppelpunkt. Die Eigenschaft ist das, was du formatieren möchtest. Z.B.: color für die Schriftfarbe, border-width für die Rahmenbreite oder text-decoration für Unterstreichungen. Als Wert sind Farbangaben, Einheiten oder Schlüsselworte möglich.

Hier einige Beispiele:

 

nach oben

HTML-Tags formatieren

HTML-Tags lassen sich durch ein Attribut mit Stylesheets direkt formatieren. Das folgende Beispiel formatiert die Textfarbe einer Überschrift 1 in rot:

Internet Explorer 4.0, Opera 5, Netscape 4.7, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
<h1 style="color:#ff0000;">Dies ist eine Überschrift</h1>

Und dieses Beispiel formatiert für eine Tabellenzelle die Textfarbe in weiß und die Hintergrundfarbe in schwarz:

Internet Explorer 4.0, Opera 5, Netscape 4.7, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
<td style="color:#ffffff; background-color:#000000;">
Irgendein Text in dieser Zelle
</td>

Ein HTML-Tag mit Stylesheets zu formatieren ist recht einfach. Du brauchst in dem HTML-Tag nur das Attribut style="" mit den Stylesheet-Angaben in Anführungszeichen einzufügen.
Der Aufbau der Stylesheet-Angaben ist immer gleich: Die Eigenschaft, ein Doppelpunkt, der Wert und als Abschluß ein Semikolon.

 

nach oben

Abschnitte eines Dokuments mit <span> formatieren.

Das folgende Beispiel formatiert die Worte "irgendein Text" fett und mit roter Textfarbe:

Internet Explorer 4.0, Opera 5, Netscape 4.7, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
Dies ist <span style="color:#ff0000; font-weight:bold;">
irgendein Text</span> und der soll formatiert werden.

Zur Formatierung ganzer Abschnitte innerhalb eines Absatzes eignet sich das <span>-Tag, da es sich um ein sog. Inline-Element handelt, dass keinen eigenen Absatz erzeugt. Die Formatierung führst du wie in dem vorherigen Absatz beschrieben durch, in dem du das Attribut style="..." mit den Stylesheet-Angaben in Anführungszeichen in das <span>-Tag einfügst. Diese Formatierungen sind dann für alle Elemente innerhalb des <span>-Tags gültig.

Zum Aufbau der Stylesheet-Angaben gilt Gleiches wie im vorherigen Absatz:
Die Eigenschaft, ein Doppelpunkt, der Wert und als Abschluß ein Semikolon. Näheres über den Aufbau erfährst du in Teil 3 und eine Übersicht aller Stylesheet-Angaben findest du in der Stylesheet-Referenz.

 

nach oben

Stylesheets zentral im Dokument deklarieren

In der Regel sollten die Formate für das gesamte Dokument gültig sein. Damit du nun aber nicht in jedem HTML-Tag die Angaben wiederholen musst, hast du die Möglichkeit die Formatierungen an einer Stelle im Dokument zentral zu deklarieren. Sie sind dann für das gesamte Dokument gültig.

Internet Explorer 4.0, Opera 5, Netscape 4.7, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
<html>
<head>

<style type="text/css"><!--

 Stylesheet Angaben

//--></style>

<title>Irgendein Titel</title>
</head><body>
</body>
</html>

Im <head>-Bereich, d.h. zwischen dem einleitenden <head>- und dem abschließenden </head>-Tag, wird der Bereich, in dem die Stylesheet-Angaben stehen, mit <style type="text/css"><!-- eingeleitet. Dann folgen die Stylesheet-Angaben und abschließend //--></style>. Das <style>- und </style>-Tag schließt den Stylesheet-Bereich ein. Die Kommentar-Tags <!-- //--> sollen verhindern, dass Browser, die CSS nicht verstehen, diese Angaben als normalen Text anzeigen.
Wie die Stylesheet-Angaben aussehen, erfährst du in Teil 3.

 

nach oben

Stylesheets in eine externen Datei auslagern.

Die zentrale Deklaration von Formaten im <head>-Bereich ist für einer Seite gut, aber welche Homepage besteht nur aus einer Datei? Um die Stylesheet-Angaben allen Seiten zur Verfügung zu stellen, kannst du sie auch in eine Datei speichern und diese mit den HTML-Dokumenten verlinken.

Internet Explorer 4.0, Opera 5, Netscape 4.7, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
<link rel="stylesheet" type="text/css" href="dateiname.css">

Dafür wird eine Textdatei benötigt, die die Stylesheet-Angaben enthält und an der Endung .css zu erkennen ist. Das <link>-Tag, das, wie im Beispiel oben, an einer beliebigen Stelle im <head>-Bereich eingefügt wird, verweist auf diese externe Datei. Dafür gibst du im Attribut href= Pfad und Name der Datei an. Liegt diese Datei auf einem anderen Server, kannst du auch komplette URL-Adressen angeben.
Der einzige Unterschied zu den zentralen Deklarationen im <head>-Bereich ist, dass die Angaben nicht mit dem <style>-Tag eingeschlossen werden. Es reicht einfach eine Auflistung der Stylesheet-Angaben.
Wie die Stylesheet-Angaben aussehen, erfährst du in Teil 3.

 

nach oben

Kommentare in Stylesheet-Bereichen

In Stylesheet Bereichen darfst Du auch Kommentare einfügen. Sie beginnen mit /* und enden mit */

Internet Explorer 4.0, Opera 5, Netscape 4.7, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
<style type="text/css">

 /* Überschrift der 1. Ebene */
 h1 {color:#ffffff; font-weight:bold;font-size:12pt;}

</style>

nach oben