Lektion 2
April 3, 2012
Wie funktioniert CSS?
In dieser Lektion werden Sie lernen, Ihr erstes Style-Sheet zu erstellen. Sie werden das Grundmodell von CSS kennenlernen und wir werden zeigen, welche Codezeilen notwendig sind, um CSS in einem HTML-Dokument zu verwenden.
Viele der Eigenschaften, die in Cascading Style Sheets (CSS) verwendet werden, ähneln denen von HTML. Wenn Sie bisher HTML für Layoutzwecke verwendet haben, werden Sie wahrscheinlich viele Codes wiedererkennen. Schauen wir uns ein konkretes Beispiel an.
Die grundlegende CSS-Syntax
Nehmen wir an, Du möchten ein schönes Blau als Hintergrundfarbe für die Webseite:
In HTML hätten wir es so gemacht:
<body bgcolor=“#062fa4″>
Mit CSS erreichen wir das gleiche mit folgenden Angaben:
body {background-color: #062fa4;}
Aber wo soll der CSS-Code hin, wirst du jetzt denken.
CSS im HTML-Dokument anwenden
Die von uns empfohlene Methode ist, auf ein sog. externes Stylesheet zu verweisen. In allen Beispielen des Tutorials werden wir diese Methode gebrauchen.
Ein externes Stylesheet ist einfach eine Textdatei mit der Endung .css. Wie jede andere Datei auch, können Sie das Stylesheet auf Ihrem Webserver oder Ihrer Festplatte speichern.
Nehmen wir an, Ihr Stylesheet heißt Aussehen.css und befindet sich im Ordner Css.
Der Trick bei dem Ganzen ist nun, aus dem HTML-Dokument (Seite.htm) auf das Stylesheet (Aussehen.css) zu verweisen. Solch ein Verweis kann mit einer Zeile HTML-Code bewerkstelligt werden:
<link rel=“stylesheet“ type=“text/css“ href=“Css/Aussehen.css“ />
Der Pfad zu unserem Stylesheet wird mit Hilfe des Attributes href angegeben.
Die Codezeile muss in den Kopfteil des HTML-Dokumentes, zwischen die <head> und </head>-Tags, eingefügt werden. Etwa so:
<html>
<head>
<title>Mein Dokument</title>
<link rel=“stylesheet“ type=“text/css“ href=“style/style.css“ />
</head>
<body>
Dieser Verweis gibt dem Browser vor, dass er das Layout aus der angegebenen CSS-Datei verwenden soll, wenn er das HTML-Dokument darstellt. Das wirklich clevere an dieser Lösung ist, dass verschiedene HTML-Dokumente auf dieses gleiche Stylesheet verweisen können. Mit anderen Worten, eine CSS-Datei kann verwendet werden, um bei vielen HTML-Dokumenten das Layout festzulegen.
Setzen wir das praktisch um.
Probieren Sie selbst!
Öffnen Sie Notepad (bzw. den Texteditor Ihrer Wahl) und erstellen Sie zwei Dateien – ein HTML-Dokument und eine CSS-Datei – mit folgenden Inhalten:
default.html
<html>
<head>
<title>Mein Dokument</title>
<link rel=“stylesheet“ type=“text/css“ href=“Aussehen.css“ />
</head>
<body>
<h1>Mein erstes Stylesheet</h1>
</body>
</html>
Aussehen.css
body {
background-color: #062fa4;
}
Nun speichern Sie beide Dateien in denselben Ordner. Denken Sie daran, die Dateien mit Ihren richtigen Endungen (“.css” bzw. “.htm”) zu speichern.
Öffnen Sie die default.htm in Ihrem Browser und Sie sehen, dass die Seite einen Blauen Hintergrund hat. Herzlichen Glückwunsch! Sie haben soeben Ihr erstes Stylesheet erstellt.
Fahren Sie mit der nächsten Lektion fort, in der wir einen Blick auf einige der Eigenschaften in CSS werfen werden.
<<< zurück weiterlesen >>>
