Logo Araneae-online

Cascading Style Sheets

Cascading Style Sheets heißt soviel wie: wie eine Kaskade weitergegebene Stile. Anfänglich wurden mit Cascading Style Sheets (CSS) reine Schriftformatierungen festgelegt. Ein für ein Element geltender Stil kann auf ein weiteres übertragen werden. Die Möglichkeiten der Cascading Style Sheets geht inzwischen aber weit über die Schriftformatierung hinaus. Mit jeder neuen Version wurden die Möglichkeiten erweitert. Der Grundsatz, die Formatierungsanweisungen von den Inhalten zu trennen, lässt sich mit CSS elegant umsetzen. Die Verwendung von CSS unterstützt z. B. Screenreader und damit das Ziel der Barrierefreiheit.

Prioritäten

Bei der Anwendung von Style Sheets muss auf die Prioritäten geachtet werden. Direkte Formatierungen im Text überschreiben interne Style Sheets. Diese wiederum haben Vorrang vor Regeln in einer externen Style Sheet Datei und externen Style Sheets wird eine Prioritätsstufe im Verhältnis zu anderen zugewiesen. Standardmäßig ersetzt das Style Sheet der Web-Seite die Voreinstellungen des Browsers.

Versionen

Die erste Version der Cascading Style Sheets wurde vom Sie verlassen die Homepage World Wide Web Consortium (W3C) 1996 verabschiedet. In dieser Version konnten in erster Linie Schriftformatierungen, Hintergründe und Rahmen festgelegt werden. Die darauf folgende Version 2 erschien am 12. Mai 1998 Sie verlassen die Homepage https://www.w3.org/TR/1998/REC-CSS2-19980512/Overview.html und erweiterte das Spektrum um die Möglichkeit das gesamte Seitenlayout mit Cascading Style Sheets zu gestalten. Hier gilt derselbe Vorteil wie bei den reinen Schriftformatierungen, durch die Änderung einer Datei kann das gesamte Seitenlayout verändert werden. Die Version 3 ist seit 1999 vom W3C-Konsortium in Bearbeitung. Mit dieser Version besteht die Möglichkeit Inhalte zu animieren und das Aussehen von Boxen zu variieren. So kann der Hintergrund eines Kastens einen Farbverlauf oder Texturen erhalten, es können Schatten definiert und die Ecken eines Rahmens gerundet werden. Auch Elemente für die Sprachausgabe sind enthalten. Einen Schnell-Index über die CSS Beschreibungen finden Sie auf der Sie verlassen die Homepage Wiki von SELFHTML.

CSS-Code erstellen

Es gibt zahlreiche Bücher zum Thema Cascading Style Sheets. In ihnen werden auch die einzelnen Elemente erläutert und die Browser-Versionen vorgestellt, die diese Elemente unterstützen. Der in englischer Sprache erschienene Sie verlassen die Homepage CSSmatic hilft CSS-Code für Farbverläufe, dem Abrunden von Ecken (border-radius), Texturen und Schatten eines Kastens zu erstellen. Die Merkmale können mit wenigen Mausklicks in ein Farbspektrum und mit Schiebereglern geändert werden. Am Ende wird der Code kopiert und in die eigene CSS-Datei eingefügt >> Parameter einer CSS-Datei.

Kasten mit abgerundeten Ecken

Sehr hübsch sind abgerundete Ecken (border-radius) von Kästen, ein CSS-Element, das ab Internet-Explorer 9, Firefox 4, Safari 5, Opera 10.5 und Chrome unterstützt wird. Der Clou daran ist, dass die Ecken auch ungleich abgerundet werden können, denn der Radius der einzelnen Ecken kann unterschiedlich definiert werden. Beispiel: Kasten mit einem Radius von 10 px an allen Ecken.

Code für die CSS-Datei:

#zitat {
background-color: #FFFF99;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 1px solid #999999;

padding: 15px;
width: 300px;
height: auto;
}

Code der HTML-Datei:

<div id="zitat">"Die verfeinerte Diagnostik wird beweisen, daß ein „gesunder" Mensch nur nicht hinreichend untersucht ist" - Eckhardt Westphal (Leiter der Kärntner Krankenhausgesellschaft, zuvor beim Bonner Wissenschaftlichen Institut der Ortskrankenkassen (WIdO), in: Qualität und Wirtschaftlichkeit medizinischer Versorgung im Krankenhausbereich, Bonn 1996. Seite 30</div>

Beispiel:

"Die verfeinerte Diagnostik wird beweisen, daß ein 'gesunder' Mensch nur nicht hinreichend untersucht ist" - Eckhardt Westphal (Leiter der Kärntner Krankenhausgesellschaft, zuvor beim Bonner Wissenschaftlichen Institut der Ortskrankenkassen (WIdO), in: Qualität und Wirtschaftlichkeit medizinischer Versorgung im Krankenhausbereich, Bonn 1996. Seite 30

Validierung

CSS Dateien können unter dem Link: Sie verlassen die Homepage https://jigsaw.w3.org/css-validator/ validiert werden. Anders als beim "W3C Markup Validation Service" ist dieser Service in deutscher Sprache verfügbar.

Links zum Thema

Sie verlassen die Homepage W3C CSS Fonts Module Level 3
Sie verlassen die Homepage CSSmatic - The ultimate CSS tools for web designers
Sie verlassen die Homepage SELFHTML - Stylesheets (CSS)


Letzte Aktualisierung: Donnerstag, 18.01.2018