Grundlagen/Technologien/CSS

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

[Bearbeiten] Formatsprache für HTML-Elemente

Wenn Sie die Textinhalte ihrer Webseite mit HTML strukturiert haben, dann werden die einzelnen Elemente vom Browser einfach untereinander auf dem Bildschirm angeordnet, und zwar in der Reihenfolge, in der sie in der HTML-Datei aufgeschrieben sind.

Die Elemente selbst werden gemäß den Voreinstellungen des Browsers dargestellt; so ist z.B. festgelegt, dass der Hintergrund des Dokuments weiß oder grau darzustellen ist, dass Überschriften der Ebene 1 in fett und einer Größe von soundsoviel Punkten darzustellen sind. Die genauen Voreinstellungen des Browsers (die der Anwender zum Teil auch selbst mit beeinflussen kann) unterscheiden sich von Browser zu Browser, aber allgemein ist das visuelle Ergebnis nicht gerade überwältigend.

An diesem Punkt setzen die Cascading Stylesheets ein. Es handelt sich dabei um eine unmittelbare Ergänzungssprache, die vorwiegend für HTML entwickelt wurde. Sie klinkt sich nahtlos in HTML ein und erlaubt das beliebige Formatieren einzelner HTML-Elemente. Mit Hilfe von Stylesheets können Sie beispielsweise festlegen, dass alle Überschriften 1. Ordnung

  • 24 Punkt groß sind,
  • in roter Helvetica-Schrift,
  • mit einem Nachabstand von 16 Punkt und
  • mit einer grünen doppelten Rahmenlinie oberhalb dargestellt werden.

Sie können aber genauso gut auch für einen beliebigen Text festlegen, dass nur dieser Text 3 Zentimeter groß sein soll und eine gelbe Hintergrundfarbe erhält. Daneben hält CSS auch Möglichkeiten zum punktgenauen Platzieren von Elementen am Bildschirm und für andere Ausgabemedien wie Drucker oder Audio-Systeme bereit.

CSS erlaubt es, zentrale Formate zu definieren, die sich auf eine HTML-Datei beziehen, aber wenn sie in eine externe Style-Datei ausgelagert werden, auch in beliebig vielen HTML-Dateien eingebunden werden können. So werden einheitliche Formatvorgaben möglich, und der HTML-Code wird von unnötigem Ballast befreit. Stylesheets unterstützen also die professionelle Gestaltung beim Web-Design und helfen beim Corporate Design für große Projekte oder für unternehmensspezifische Layouts.

CSS ist mit HTML eng verzahnt. Es lohnt sich daher, beide Sprachen gleichzeitig zu erlernen. Bei den Beschreibungen zu einzelnen HTML-Elementen werden Sie deshalb immer auch auf die Möglichkeiten hingewiesen, wie Sie diese Elemente mit Hilfe von CSS gestalten können.

CSS ist ebenso wie HTML eine Klartextsprache. Auch für CSS brauchen Sie keine bestimmte Software, es genügt ein Texteditor. CSS ist wie HTML eine offen dokumentierte und vom W3-Konsortium standardisierte Sprache, die Sie frei und ohne Lizenzprobleme verwenden können.

[Bearbeiten] Geschichte

Die erste CSS-Sprachversion wurde 1996 als Empfehlung (Recommendation) herausgegeben. Seitdem wurde CSS fleißig weiterentwickelt. Viele CSS-Eigenschaften, die längst beliebt geworden sind - etwa das absolute Positionieren von Elementen - gehören zum "CSS Level 2"aus dem Jahre 1998. Da sich die Browserentwickler mit der vollständigen Umsetzung dieser Empfehlung schwer taten, hat man die darauffolgende Version CSS 2.1 hauptsächlich dazu genutzt, die Spezifikation an die Realität der Browserunterstützung anzupassen. Bei CSS 2.1 wurden gegenüber CSS 2.0 also problematische Eigenschaften weggelassen. Aufgrund dieser Schwierigkeiten dauerte es bis 2011, bis CSS 2.1 endgültig zum Standard wurde.

Allerdings wird beim W3-Konsortium bereits seit dem Jahr 2000 an der Version 3 gearbeitet. Über die Einstiegsseite zu CSS beim W3-Konsortium können Sie sich über die laufende Weiterentwicklung informieren. Obwohl der Standard noch nicht endgültig verabschiedet ist, wird er von allen aktuellen Browsern weitgehend befolgt.

Einige der neuen CSS3-Eigenschaften implementierten die Browser-Hersteller vorerst mit einem Browserpräfix (vendor-prefix), der den Eigenschaften vorangestellt wurde. Sobald diese Eigenschaften vom W3C nicht mehr verändert wurden, konnten die Eigenschaften dann ohne die für jeden Browser anderen Deklarationen verwendet werden.

Beachten Sie: Innerhalb der vorliegenden Dokumentation werden CSS1, CSS2, CSS 2.1 und CSS3 unter CSS beschrieben.

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Hilfe
SELFHTML
Diverses
Werkzeuge
Flattr
Soziale Netzwerke