CSS

27.10.2016 05:31 Uhr

Die Basics

CSS (Cascading Style Sheets) ist eine Formatierungssprache für strukturierte Dokumente, wie HTML oder XML-Dokumente. Sie ermöglicht eine Trennung von Form und Inhalt und bewirkt somit eine vereinfachte Wartung strukturierter Dokumente.

Siehe dazu: Sinn und Zweck von Stylesheets und die Auswirkungen in einem eindrucksvollen Beispiel: csszengarden

CSS-Code kann auf drei unterschiedliche Art und Weisen in das HTML-Dokument eingebunden werden:

1. Als externe Ressource.

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

Diese Anweisung steht im <head></head>-Bereich des XHTML-Dokuments und bindet eine normale ASCII-Text-Datei, eben das Stylesheet mit dem Namen beispiel.css in das aufrufende Dokument ein.


2. Als eingebettetes Stylesheet.

Das CSS-Dokument wird in einem speziell dafür vorgesehenen tag <style></style> gespeichert.

Beispiel:

<head><title>Dokument mit Formatierungen</title>
<style type="text/css">
body { color: purple; background-color: #d8da3d }
</style></head>

3. Die letzte (und unsauberste) Art ist das Einbetten der Stildefinitionen in den jeweiligen (X)HTML-Elementen über das Attribut style=““.

Beispiel:

<p style="font-size: small;">Text</p>

Für die Einbidung des Stylesheets als Ressource gilt:

rel=“stylesheet“
Art der Beziehung; auch andere „Ressourcen“, wie externe Definitionen dieser Art generell genannt werden, könnten u.U. hier angegeben werden.

type=“text/css“
„Das ist ein Stylesheet nach den ‚CSS‘ Konventionen“ – Auch andere Regeln für Stylesheets sind denkbar.

href=“../meins.css“
Eine URL; gibt an, wo das Stylesheet zu finden ist.


Die Datei „beispiel.css“ hat folgenden Inhalt:

h1 {
color: blue;
font-family: helvetica;
}

p {
color: green;
}

body {
background: yellow;
}

b {
color: red;
font-weight: 100;
font-size: 30pt;
}

u {
font-family: mono-space;
font-weight: 100;
font-size: 3pt;
text-decoration:none;
}

Der Aufbau einer CSS-Regel

Ein Stylesheet besteht aus einer oder mehreren Regeln, die beschreiben, wie ein bestimmtes Seitenelement dargestellt werden soll. Jede Regel besteht aus zwei wesentlichen Teilen: dem Selektor und dem Deklarationsblock.

Eine Darstellung der Regelstruktur hier als Beispiel:

selektor {
eigenschaft1: wert1;
eigenschaft2: wert2;
}

h1 {
color: blue;
font-family: helvetica;
}

Der Inhalt der geschweiften Klammern wird als „Deklarationsblock“ bezeichnet, ein Eigenschaft-Wert-Pärchen als Deklaration. Der Selektor steht auf der linken Seite der Regel und ist dafür verantwortlich das Element des HTML-Dokuments auszuwählen, auf das sich die Regel beziehen soll (in unserem Beispiel die Überschrift <h1></h1>). Jeder Deklarationsblock kann beliebig viele Deklarationen enthalten.


Ressourcen

Wir sprechen von Ressourcen, wenn wir einem Programm für seinen abstrakten Ablauf nicht notwendige Angaben, wie etwa visuelle Attribute, durch einen externen Mechanismus zur Verfügung stellen. Anders ausgedrückt: Ressourcen (im IT Bereich) sind augelagerte Text-Dateien die, wie ein Cascading Style Sheet, bestimmte Informationen für das aufrufende HTML-Dokument beinhalten.


White Space

Mit „White Space“ bezeichnen wir beliebig lange Sequenzen von nicht signifikanten Zeichen in einer Zeichenfolge, d.h. in der Regel Leerzeichen, Tabulatoren und ähnliche Zeichen.

Schlagwörter: