|
JPAGE_CURRENT_OF_TOTAL
2. CSS einsetzen, und wie es funktioniert
CSS ist HTML gar nicht mal so unähnlich. Viele Eigenschaften von CSS gleichen denen von HTML. Doch gibt es auch einige Unterschiede, in der Anwendung zum Beispiel. In diesem Kapitel erkläre ich Ihnen, wie CSS angewandt wird.
2.1 CSS-Syntax
Die CSS-Syntax wird in drei Teilen betrachtet und ist wie folgt aufgebaut:
selector { eigenschaft: wert; }
Beachten Sie dabei bitte die Verwendung der spitz zulaufenden Klammern ([ALT Gr]+[7] bzw. [ALT Gr]+[0]) und auf das Semikolon am Ende jedes Wertes.
Beispiel:
body { background-color: lightblue; }
2.2 Die CSS-Syntax anwenden
Wie schon erwähnt, ist CSS ähnlich aufgebaut wie HTML. Dabei gibt es mehrere Möglichkeiten, CSS in Ihre Webseiten einzubauen:
2.2.1 Methode 1: als Tag (In-document)
Mit dem HTML-Tag <style>…</style> lässt sich CSS auf das gesamte Dokument anwenden.
Beispiel:
<html>
<head>
<title>CSS In-document einbinden</title>
<style type=”text/css”>
body {background-color: lightblue;}
</style>
</head>
<body>
...
</body>
</html>
Erläuterung:
Mit diesem Beispiel wird eine Webseite erzeugt, die einen blauen Hintergrund hat. Wählen Sie statt des body-selectors beispielsweise den für einen Absatz (p), so würde diese Auswahl für das gesamte HTML-Dokument gelten.
2.2.2 Methode 2: Als Attribut (In-line)
Eine weitere Möglichkeit, CSS einzubinden, ist per Attribut. Dazu wird dem HTML-Tag die entsprechende CSS-Definition als Attribut hinzugefügt.
Beispiel:
<html>
<head>
<title>CSS In-line einbinden</title>
</head>
<body style=”background-color: lightblue;”>
...
</body>
</html>
Erläuterung:
Auch mit diesem Beispiel wird wieder eine Webseite mit einem hellblauen Hintergrund erzeugt. Der Unterschied bei dieser Methode ist, dass CSS hier als Attribut dem HTML-Tag hinzugefügt wird. So lassen sich beispielsweise für einzelne Absätze verschiedene Layouts definieren.
2.2.3 Methode 3: Extern (per Style Sheet)
Die dritte Methode, CSS in Ihre Webseite zu bringen, ist per externes Style Sheet. Diese Methode hat den Vorteil, dass auf all Ihren HTML-Dokumenten dieses Style Sheet als Layout-Definition dienen kann, ohne dass Sie immer wieder einzelne Tags mit Attributen versehen, oder in jeden Kopf Ihr komplettes Style Sheet einfügen müssen. Das externe Verfahren ist auch jenes, welches wir Ihnen ans Herz legen möchten.
Ein weiterer Vorteil ist nämlich, dass wenn Sie einmal Ihr Design verändern möchten, Sie nur die CSS-Datei anpassen brauchen. Schon ändert sich auf Ihrer kompletten Webseite das Layout. Ohne, dass Sie dafür dutzende Dateien bearbeiten bräuchten.
Um die externe Methode anwenden zu können, müssen Sie eine neue Textdatei erstellen, die Sie mit der Dateiendung .css abspeichern. Diese CSS-Datei legen Sie einfach auf Ihren Webserver ab. In den HTML-Dokumenten muss nun auf dieses externe Style-Sheet verwiesen werden.
Beispiel:
<html>
<head>
<title>CSS per Style Sheet einbinden</title>
<link rel=”stylesheet” type=”text/css” href=”stylesheet.css” />
</head>
<body>
...
</body>
</html>
In der CSS-Datei selbst definieren Sie anschließend das Layout Ihrer Webseite in der In-document-Methode. Fortan werden alle Webseiten, die dieses Style Sheet als Vorlage benutzen, von dieser einen, zentralen Datei aus gesteuert, was das Layout angeht.
2.3 Mehrere Eigenschaften miteinander kombinieren
Selbstverständlich kann auch in CSS mehrere Eigenschaften eines selectors zusammen kombiniert werden.
Beispiel:
body {
background-color: darkred;
background-image: url(“background.jpg”);
background-repeat: no-repeat;
}
body { background: darkred url(“background.jpg”) no-repeat; }
Beide Beispiele zeigen das gleiche Prinzip: Verschiedene Eigenschaften werden unter einem selector (in diesem Fall: body) zusammengefasst.
Im Endeffekt müssen Sie dabei selbst entscheiden, was Sie für sich übersichtlicher empfinden. Ich selbst präferiere das erste dieser Beispiele. Aber das ist Geschmackssache.
|
