Deklaration eines Stylesheets (CSS)

Dezember 2016

Deklaration eines Stylesheets

Stylesheets sind kein eigentlicher Bestandteil der HTML-Sprache, das bedeutet, sie sind nicht direkt Teil der HTML-Empfehlungen zu HTML vom W3C. Deswegen ist es nötig, bestimmte Elemente in den HTML-Code einzufügen, die einerseits den Typ des Dokuments beschreiben, also die Version der HTML- und CSS-Empfehlungen, die auf der Seite verwendet werden, und andererseits die Stile selbst.

Deklaration des Dokumenttyps

In die HTML-Seite muss eine Deklaration des Dokumenttyps eingefügt werden, also ein Hinweis auf die verwendete HTML-Norm. Diese Deklaration erfolgt in einer solchen Zeile :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
	<HEAD>...</HEAD>
	<BODY>Inhalt der Seite</BODY>
</HTML>

Außerdem kann ein Meta-Tag den Browser oder Suchmaschinen darauf hinweisen, welche Sprache bei der Definition der Stylesheets verwendet wurde. Dieser Meta-Tag wird in den HTML-Header eingefügt und sieht folgendermaßen aus :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
	<HEAD>
		<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
	</HEAD>
	<BODY>Contenu de la page</BODY>
</HTML>

Die Styles einfügen

Styles können in ein HTML-Dokument auf drei verschiedene Weisen eingefügt werden :

Style des Dokuments

Die Stylesheets einer Website werden durch den STYLE-Tag zwischen den Tags <HEAD> und </HEAD> angegeben.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
	<HEAD>
		<STYLE type="text/css">
		<!--

		Definition der Styles;

		-->
		</STYLE>
	</HEAD>
<BODY></BODY>
</HTML>
Das Attribut type="text/css" des Tags <STYLE> ermöglicht die Angabe des verwendeten Stylesheets. Der Kommentar-Tag <!-- ... --> soll verhindern, dass ältere Browser, die keine Stylesheets unterstützen, diese Informationen anzeigen.

Inline-Styles

Man kann den Style auch innerhalb eines Tags eines Dokuments definieren. Diese Art der Deklaration nennt man Inline-Deklaration.

Diese Art, Stylesheets zu definieren, ist nicht empfehlenswert, da sie dem eigentlichen Zweck von Stylesheets widerspricht, weil der Style dann direkt im Element eingefügt ist. Sie kann sich aber als nützlich erweisen, will man nur für ein bestimmtes HTML-Element einen Style festlegen, für den man keine globale Definition benötigt.

Um einen Style Inline zu definieren, fügt man einfach das Attribut STYLE in den HTML-Tag, dem man einen besonderen Style verleihen möchte :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
	<HEAD>
	...
	</HEAD>
<BODY>
...
<TAG Style="style:valeur;"> ... </TAG>
...
</BODY>
</HTML>

Nota Ein "Inline"-Style kann allen HTML-Tags hinzugefügt werden, außer den folgenden : BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE

Ein Beispiel für die Anwendung eines Style auf einen Tag <H1> :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
	<HEAD>
	...
	</HEAD>
<BODY>
...
<H1 Style="Font: 18px Verdana; font-weight:bold;"> Titre </H1>
...
</BODY>
</HTML>

Externer Style

Die Tatsache, dass man die Definition der Stylesheets extern des Dokuments speichern kann, ist ein "plus", da man so durch Verändern der Datei mit den Stylesheets das Aussehen aller Websites verändern kann, die sich darauf beziehen !

Zuerst muss man dafür eine Textdatei erzeugen, die die Stylesheets enthält, mit der Erweiterung .css, zum Beispiel style.css :

<!--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
	body	{background-image: home.gif;}
	LI		{font: 13px Verdana;}
	B		{font: 14px Verdana; font-weight: bold;}
	A		{
			  font:12px Verdana;
			  font-weight: bold;
			  color=black;
			  text-decoration: none;
			}
	H1		{font: 16px Arial;font-weight: bold;color=black;}
	H2		{font: 14px Arial;font-weight: bold;color=black;}
-->

Danach erzeugt man einfach in jeder HTML-Seite eine Verknüpfung zu dieser Definitionsseite, in der folgenden Form

<HTML>
	<HEAD>
		<LINK rel="stylesheet" type="text/css" href="style.css">
	</HEAD>
...
  • Der Tag <LINK> weist den Browser darauf hin, dass er ein Dokument suchen muss, das außerhalb der HTML-Seite liegt
  • Das Attribut rel="stylesheet" präzisiert, dass es sich bei dem Dokument um ein externes Stylesheet handelt.
  • Das Attribut type="text/css" präzisiert den Typ des Stylesheets
  • Das Attribut href=" URL " gibt die URL des Stylesheets an, also wo es sich im Internet befindet.

Importierte Style

In den Empfehlungen des W3C findet sich noch eine letzte Art, Stylesheets in ein Dokument einzufügen: durch Importieren der Stylesheets. Man kann externe Stylesheets importieren, indem man beim Deklarieren des Styles den folgenden Befehl @IMPORT direkt nach dem Style-Tag einfügt :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
	<HEAD>
		<STYLE type="text/css">
		<!--
		@IMPORT URL(url des zu importierenden Sheets);

		Definition der Styles des Dokuments;

		-->
		</STYLE>
	</HEAD>
<BODY></BODY>
</HTML>

Nota Wenn sich mehrere importierte Definitionen auf den selben Tag beziehen, wird nur die letzte vom Browser beachtet

Die Tags <SPAN> und <DIV>

Um Textabschnitten im selben Absatz verschiedene Styles zu verleihen, benutzt man die Tags<SPAN> und <DIV>

Der Tag <SPAN>

Durch den <SPAN>-Tag lassen sich Styles auf Abschnitte eines Absatzes anwenden.
Er kann mit ID oder CLASS verwendet werden.
Seine Syntax sieht folgendermaßen aus :

<SPAN class=Name_der_Klasse> Texte </SPAN>

Der Tag <DIV>

Der DIV-Tag wird nicht auf einige Worte eines Absatzes angewendet, sondern auf einen Block, also einen oder mehrere Absätze.

Der DIV-Tag hat folgende Syntax :

<DIV class=wichtit> absätze </DIV>

Kaskaden-Styles

Verwendet man die verschiedenen von CSS angebotenen Methoden, lassen sich mehrere Styles festlegen. Werden mehrere externe Stylesheets aufgerufen erhält man eine sogenannte Style-Kaskade, also eine Kombination von Styles für verschiedene HTML-Elemente. Betreffen mehrere Styles ein und das selbe Element, gilt nur der letzte.

<LINK rel=stylesheet type="text/css" href="style1.css">
<LINK rel=stylesheet type="text/css" href="style2.css">
<LINK rel=stylesheet type="text/css" href="style3.css">

Wenn es zwischen verschiedenen externen Stylesheets mehrere redundante Styles gibt, bieten die CSS -Empfehlungen eine Wahlmöglichkeit zwischen mehreren alternativen Stylesheets, durch das Attribut rel des Tags STYLE, zusammen mit dem Attribut TITLE mit dem man sie namentlich auswählen kann :

<LINK rel=" alternate stylesheet" type="text/css" href="style1.css" title="style1">
<LINK rel="alternate stylesheet" type="text/css" href="style2.css" title="style2">
<LINK rel=stylesheet type="text/css" href="stylepardefaut.css">

Wenn andererseits auf einer Seite mehrere Styles durch die verschiedenen Methoden eingefügt werden, werden redundante Styles so behandelt, dass der Style behalten wird, der dem Inhalt am nächsten ist. Die Prioritätsreihenfolge ist also :
Inline-Style > Style des Dokuments > Importierter Style > Externer Style


Lesen Sie auch :


Declaring a style sheet (CSS)
Declaring a style sheet (CSS)
Declaración de una hoja de estilo (CSS)
Declaración de una hoja de estilo (CSS)
Déclaration d'une feuille de style (CSS)
Déclaration d'une feuille de style (CSS)
Dichiarazione di un foglio di stile (CSS)
Dichiarazione di un foglio di stile (CSS)
Declaração de uma folha de estilo (CSS)
Declaração de uma folha de estilo (CSS)
Das Dokument mit dem Titel « Deklaration eines Stylesheets (CSS) » aus CCM (de.ccm.net) wird zur Verfügung gestellt unter den Bedingungen der Creative Commons Lizenz. Sie dürfen das Dokument verwenden, verändern sowie Vervielfältigungen dieser Seite erstellen, unter den Bedingungen, die in der vorgenannten Lizenz erwähnt sind und unter der gleichzeitigen Bedingung, dass Sie im Rahmen Ihrer Verwendung, Veränderung oder Vervielfältigung nach außen hin klar und deutlich auf den Urheber (= de.ccm.net) des Dokuments hinweisen.