HTML - Eine kleine Einführung - Cascading-Style-Sheets (CSS)

HTML-Grundlagen

Grundlagen

Dokument

Text

HTML-Dynamisch

Seitengestaltung

CSS

Cascading Style-Sheets

Cascading Style Sheets (CSS) sind Formatvorlagen für HTML-Seiten.

Vorteile:

- vielfältige Schrifteffekte
- Ränder und Abstände ohne Tricks
- geringe Ladezeiten
- beliebige Schriftarten
- einheitliches Layout

CSS sind im Head einer HTML-Seite lokalisiert. Damit können z.B. bestimmten Textpassagen Attribute zugewiesen werden. Dies geschieht mittels eines speziellen <style> containers im Head. Der einführende Tag lautet: <style type="text/css">, der schließende </style>. In dem nachfolgenden Beispiel wird der Headline 1 (h1) immer die Farbe Rot zugewiesen, und fetten Textpassagen immer die Farbe blau.

Demo: diese Seiten (Quelltext aufrufen)

Zusätzlich können aber auch die Schriftgröße, die Zeilenhöhe und die Schriftart entsprechend vergeben werden.

Neben Punktgrößen können auch bei der Zeilenhöhe auch Prozentzahlen verwendet werden.

Auch die Ränder für Absätze können mit den Stylesheets festgelegt werden:
p {margin: 10% 20% 10% 20%}
Als Reihenfolge für den Rand gilt: oben, rechts, unten, links.

Auch nur bestimmte Passagen in einer Überschrift können mit dem unten angegebenen Kommando verändert werden.
h2 b {color:#00ff00} (hier fette Teile in der Überschrift 2)

Es wird der Parameter class eingeführt, der jedem Textelement zugeordnet werden kann:
.abc {font-size: 18pt}

Damit nun der entsprechende Style-sheet angewendet wird, muß der entsprechende Tag lauten:
<h3 class=abc>Text</h3> oder
<p class=abc> .... </p>

Zentrale Style-Sheetdatei

Neben den Style-Sheets für einzelne Seiten können die CSS auch in einer zentralen Datei gespeichert sein. Diese heißt dann z.B. abc.css. Sie wird mittels Javascript in die einzelnen Seiten eingebunden. Sie hat bei größeren Sites den Vorteil, das eine Änderung nur einmal durchgeführt werden muß, nämlich in der zentralen Datei, aber dafür muß der Nutzer Javascript aktiviert haben, denn die zentrale CSS-Datei (z.B. abc.css) wird mittels Javascript in die entsprechende Seite eingebunden. HAt der Nutzer JAvascript nicht aktiviert, werden die Voreinstellungen des Browsers aufgerufen.

Beispiel für eine zentrale CSS-Datei:

p {color:#000000; font-size: 10pt; font-family: Verdana, Arial, Helvetica}
h1 {color:#941a00; font-size: 24pt; font-family: Verdana, Arial, Helvetica}
.bildunter {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #941a00}

Sie wird mittels folgenden Befehlen im HEADER eingebaut und im Browser aktiviert:

Beispiel:

Impressum