Operation Manual

Grundlegendes zu Cascading Stylesheets
Nach oben
Nach oben
Cascading Stylesheets
CSS-Regeln
Cascading Styles
Textformatierung und CSS
CSS-Kurzschrifteigenschaften
Cascading Stylesheets
Cascading Stylesheets (CSS) sind eine Sammlung von Formatierungsregeln, die das Aussehen der Inhalte einer Webseite bestimmen. Bei der
Formatierung einer Seite mit CSS-Stilen werden Inhalt und Darstellung getrennt. Der Inhalt der Seite – der HTML-Code – befindet sich in der
HTML-Datei. Die CSS-Regeln, die die Präsentation des Codes definieren, befinden sich dagegen in einer anderen Datei (einem externen
Stylesheet) oder in einem anderen Teil des HTML-Dokuments (in der Regel im head-Bereich). Die Trennung zwischen Inhalt und Darstellung hat
den Vorteil, dass bei einer Änderung nicht alle Eigenschaften auf jeder Seite einzeln aktualisiert zu werden brauchen. Dadurch ist es erheblich
einfacher, das Erscheinungsbild einer Website zentral zu verwalten. Zudem ermöglicht es die Trennung zwischen Inhalt und Darstellung, den
HTML-Code einfacher und sauberer zu halten. Dadurch wird die Seite im Browser schneller aufgebaut und die Navigation für Anwender, die auf
Barrierefreiheit angewiesen sind (z. B. Nutzer von Bildschirmlesegeräten), wird erleichtert.
Mit CSS können Sie das Erscheinungsbild Ihrer Seite vielfältig gestalten und bis ins Detail kontrollieren. Sie können zahlreiche Textattribute
festlegen, darunter Schriftart und Schriftgröße, Auszeichnungen wie fett, kursiv oder unterstrichen, Textschattierung, Text- und Hintergrundfarbe,
Farbe und Unterstreichung für Hyperlinks und vieles mehr. Wenn Sie CSS zur Schriftartenverwaltung verwenden, können Sie zudem ein
einheitlicheres Seitenlayout und Aussehen in den verschiedenen Browsern erzielen.
Neben der Textformatierung können Sie mit CSS auch das Format und die Position von Blockelementen auf einer Webseite bestimmen. Ein
Blockelement ist ein eigenständiges Inhaltselement, das im HTML-Text in der Regel durch eine neue Zeile abgetrennt und als Block formatiert
wird. Beispiele sind die Tags h1, p und div. Sie alle erzeugen Blockelemente auf der Webseite. Sie können Ränder und Rahmen für
Blockelemente definieren, ihnen eine bestimmte Position zuweisen, eine Hintergrundfarbe hinzufügen, sie mit Fließtext umgeben und viele andere
Gestaltungsoptionen nutzen. Das Seitenlayout mit CSS erfolgt hauptsächlich über das Bearbeiten von Blockelementen.
CSS-Regeln
Eine CSS-Formatierungsregel besteht aus zwei Teilen: dem Selektor und der Deklaration (bzw. meistens einem Block aus mehreren
Deklarationen). Der Selektor ist ein Begriff (wie p, h1, ein Klassenname oder ein id-Attribut), mit dem das formatierte Element identifiziert wird. Mit
dem Deklarationsblock werden dagegen die Stileigenschaften selbst definiert. Im folgenden Beispiel ist h1 der Selektor, die Elemente in der
geschweiften Klammer ({}) bilden den Deklarationsblock:
h1 { font-size: 16 pixels; font-family: Helvetica; font-weight:bold; }
Eine einzelne Deklaration besteht ihrerseits aus zwei Teilen: der Eigenschaft (z. B. font-family) und dem Wert (z. B. Helvetica). In der
obigen CSS-Regel wurde ein bestimmter Stil für h1-Tags erstellt: der Text für alle mit diesem Stil verknüpften h1-Tags hat eine Größe von
16 Pixel, die Schriftart Helvetica und den Schriftschnitt fett.
Der Stil wird über eine oder mehrere Regeln definiert und getrennt von dem eigentlichen Text gespeichert, dessen Formatierung er festlegt –
entweder in einem externen Stylesheet oder im head-Bereich eines HTML-Dokuments. So lässt sich eine Regel für h1-Tags gleichzeitig auf viele
Tags anwenden. Bei Nutzung externer Stylesheets kann sich die Regel auch auf Tags erstrecken, die sich auf zahlreichen verschiedenen Seiten
befinden. Durch das CSS-Konzept wird die Aktualisierung von Websites so erheblich vereinfacht. Eine CSS-Regel braucht nur an einem einzigen
Ort geändert zu werden, um die Formatierung aller Elemente, die den in ihr definierten Stil verwenden, automatisch zu aktualisieren.
142