Wie man CSS erstellt

Wie man ein Stilblatt einfügt

Wenn ein Stilblatt gelesen wird, formatiert der Browser das HTML-Dokument entsprechend. Es gibt drei Methoden, um ein Stilblatt einzufügen:

Externe Stilblätter

Wenn der Stil auf vielen Seiten angewendet werden muss, ist ein externes Stilblatt die ideale Wahl. Bei der Verwendung eines externen Stilblatts können Sie die entire Website durch Ändern einer Datei ändern. Jede Seite verlinkt mit einem <link>-Tag zur Stilblatt.<link>-Tag im (Dokument-)Kopf:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Der Browser liest die Stildeklarationen aus der Datei mystyle.css und formatiert das Dokument entsprechend.

Externe Stilblätter können in jedem Texteditor bearbeitet werden. Die Datei darf keine HTML-Tags enthalten. Stilblätter sollten mit der .css-Dateierweiterung gespeichert werden. Hier ist ein Beispiel für eine Stilblattdatei:

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

Lassen Sie keinen Leerzeichen zwischen Attributwert und Einheit. Wenn Sie "margin-left: 20 px" anstatt "margin-left: 20px" verwenden, ist es nur in IE 6 gültig, aber in Mozilla/Firefox oder Netscape funktioniert es nicht ordnungsgemäß.

Interne Stilblätter

Wenn ein einzelnes Dokument spezielle Stile benötigt, sollte eine interne Stilblatt verwendet werden. Sie können ein <style>-Tag im Dokumentkopf verwenden, um eine interne Stilblatt zu definieren, wie folgt:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

Inline-Stile

Da die Darstellung und der Inhalt vermischt werden, verlieren Inline-Stile viele Vorteile der Stilblätter. Verwenden Sie diese Methode vorsichtig, zum Beispiel wenn der Stil nur auf einem Element einmalig angewendet werden muss.

Um Inline-Stile zu verwenden, müssen Sie das Stileigenschaft (style) innerhalb der relevanten Tags verwenden. Das Style-Eigenschaft kann jede CSS-Eigenschaft enthalten. Diesen Beispiel zeigt, wie man die Farbe des Absatzes und den linken Außenabstand ändert:

<p> style="color: sienna; margin-left: 20px">
Dies ist ein Absatz
</p>

Mehrfache Stile

Wenn bestimmte Attribute von verschiedenen Stilvorlagen mit demselben Wähler definiert werden, wird der Wert aus der spezifischeren Stilvorlage übernommen.

Beispielsweise haben die externe Stilvorlage drei Attribute für den h3-Wähler:

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

und die interne Stilvorlage hat zwei Attribute für den h3-Wähler:

h3 {
  text-align: right; 
  font-size: 20pt;
  }

Wenn diese Seite gleichzeitig mit einer externen Stilvorlage verknüpft ist, die eine interne Stilvorlage hat, dann erhält h3 die folgenden Stile:

color: red; 
text-align: right; 
font-size: 20pt;

Die Farbeigenschaft wird von der externen Stilvorlage vererbt, während die Textausrichtung (text-alignment) und die Zeichengröße (font-size) durch die Regeln der internen Stilvorlage ersetzt werden.