Deklaration eines Stylesheets (CSS)
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 als 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 die Suchmaschine 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>Inhalt der Seite</BODY>
</HTML>
Die Styles einfügen
Styles können in ein HTML-Dokument auf drei verschiedene Weisen eingefügt werden:
Style des Dokuments, im Header angegeben, also zwischen den Tags <HEAD> und </HEAD>;
Zeilen-Style als Attribut der Tags;
Externer Style, angegeben in einer Extra-Datei mit der Endung CSS;
Importierter Style, angegeben in einer Extra-Datei mit der Endung CSS.
Style des Dokuments
Die Stylesheets einer Webseite 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, wenn man nur für ein bestimmtes HTML-Element einen Style festlegen will, 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 ein, dem man einen besonderen Style verleihen möchte:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
...
</HEAD>
<BODY>
...
<TAG Style="style:Wert;"> ... </TAG>
...
</BODY>
</HTML>
Hinweis: Ein Inline-Style kann allen HTML-Tags hinzugefügt werden außer BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE und 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 außerhalb des Dokuments speichern kann, ist ein Plus, da man so durch Verändern der Datei mit den Stylesheets das Aussehen aller Webseiten 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 Styles
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 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>
Hinweis: Wenn sich mehrere importierte Definitionen auf denselben 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 dasselbe 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, und zwar 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
Foto: © Pixabay.
- Css deklaration
- Deklaration css - Beste Antworten
- Stylesheet css - Beste Antworten
- Css bild verschieben - Tipps - CSS
- Css farben transparent - Forum Webmastering
- Css spiegeln - Tipps -Word
- Css dreieck - Forum Webmastering
- Mehrere CSS-Stylesheet? - Forum Webmastering