Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets (Abk.: CSS) ist eine deklarative Stylesheet-Sprache für strukturierte Dokumente. Sie wird vor allem zusammen mit HTML und XML (zum Beispiel bei SVG) eingesetzt. CSS legt dabei fest, wie ein besonders ausgezeichneter Inhalt oder Bereich dargestellt werden soll. Dazu ist es wichtig, das HTML oder XML so zu gestalten, dass die Abschnitte, deren Aussehen gleich sein soll, auch als derselben Klasse angehörend erkannt werden können. Man zeichnet im HTML-Dokument also nur die Bedeutung einzelner Abschnitte aus, während das Aussehen dieser ausgezeichneten Abschnitte im CSS festgelegt wird. Mit anderen Worten, man trennt den eigentlichen Inhalt von der optischen Gestaltung. Mit CSS ist es möglich, für verschiedene Ausgabemedien (zum Beispiel Papier, Projektion, Sprache usw.) eine unterschiedliche Darstellung anzugeben. Das ist nützlich, um zum Beispiel Hyperlinks beim Drucken extra aufzuführen oder für Geräte mit geringerer Auflösung (zum Beispiel PDA oder Mobiltelefon) die Anzeige zu optimieren (geringere Seitenbreite und -höhe). Neben diversen Angaben zu Farben und Schriften bietet CSS die Möglichkeit, Elemente frei zu positionieren oder Hintergrundbilder festzulegen. CSS gilt heutzutage als die Standard-Stylesheetsprache für Webseiten. Geschichte und Versionen Der erste Vorschlag für Web-Stylesheets kam 1993 auf, mehrere weitere folgten bis 1995. Cascading Style Sheets (CSS), wie sie aktuell bekannt sind, wurden 1994 von Håkon Wium Lie vorgeschlagen. Bert Bos arbeitete zu dieser Zeit an der Implementation eines Browsers namens Argo, der seine eigene Stylesheet-Sprache benutzte. Die beiden entschieden sich, zusammenzuarbeiten und CSS zu entwickeln. Es gab zu dieser Zeit auch andere Sprachen mit dem gleichen Ziel, CSS brachte aber als erste die Idee auf, Regeln zu definieren, die über mehrere Stylesheets hinweg vererbt werden konnten. Nach der Präsentation von CSS durch Håkon an der Konferenz „Mosaic and the Web“ in Chicago 1994, und später mit Bos 1995 wurde das World Wide Web Consortium (W3C) auf CSS aufmerksam. Håkon und Bos arbeiteten mit anderen Mitgliedern in diesem Rahmen an CSS weiter. Im Dezember 1996 wurde dann die CSS Level 1 Recommendation publiziert. Diese wird in aktuellen Browsern mittlerweile nahezu vollständig umgesetzt. CSS Level 2 (CSS2) wurde im Mai 1998 veröffentlicht. Bis heute wird diese Empfehlung noch nicht hinreichend von allen verbreiteten Browsern implementiert. Manche Browser setzen den größten Teil von CSS2 korrekt um, andere hingegen bieten nur eine mangelhafte Unterstützung von wenigen Teiltechniken. Bei der praktischen Anwendung im Web ergeben sich daher oft unnötige Schwierigkeiten. Momentan arbeitet das W3C an einer Zwischenversion CSS Level 2 Revision 1 (CSS 2.1), die die Erfahrungen mit CSS2 berücksichtigt, Unstimmigkeiten korrigiert und diejenigen Teiltechniken streicht, die bisher in verschiedenen Browsern nicht korrekt implementiert wurden. CSS 2.1 bringt selbst keine grundlegend neuen Fähigkeiten mit sich. Gleichzeitig ist CSS Level 3 in der Entwicklung. Hier werden die Entwicklungen weiter vorangetrieben, die bereits bei CSS2 gestartet wurden. CSS3 wird im Gegensatz zu den Vorgängern modular aufgebaut sein, d. h. einzelne Teiltechniken (beispielsweise zur Steuerung der Sprachausgabe) haben ihren eigenen Entwicklungsrhythmus und Versionsschritte. So nähert sich CSS bei seinen Fähigkeiten mehr dem etablierten DSSSL (für SGML) an und stellt wohl auch in Zukunft noch eine attraktive Alternative zu XML-basierten Stylesheet-Sprachen wie XSL-FO dar. Praxis: Generelle Syntax Eigene Style Sheets zu erstellen ist recht simpel. Man braucht eigentlich nur ein paar HTML Kenntnisse, um loszulegen. Ein Beispiel: Um die Textfarbe einer Überschrift 1. Ordnung H1 festzulegen, benutzt man diese Regel:
H1 { color: red }
Das Beispiel oben ist eine einfache CSS Regel. So eine Regel besteht aus zwei Hauptteilen, dem Selektor H1 und der Deklaration color: red. Die Deklaration besteht ebenfalls aus zwei Teilen, der Eigenschaft color und dem Wert red. Daraus ergibt sich dann folgender Syntax:
SELEKTOR { Eigenschaft: Wert }
Der Selektor H1 ist die Verbindung zwischen HTML und dem Style Sheet, und alle gültigen HTML Elemente sind mögliche Selektoren. Die Eigenschaft 'color' ist nur eine von vielen Eigenschaften, mit denen man das Aussehen des HTML Dokumentes beeinflussen kann. Eine Liste der möglichen Eigenschaften mit ihren möglichen Werten findet sich später in diesem Tutorial.
Einbinden in HTML
Um Style Sheets auch nutzen zu können, muss man sie im Html Dokument einbinden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN">
<HTML>
<HEAD>
<TITLE>Dokument Titel</TITLE>
<LINK REL="STYLESHEET" TYPE="text/css" HREF="http://imported.com/blues.css" TITLE="Blues">
<STYLE TYPE="text/css">
@import url(http://imported.com/basics.css);
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>
Dieses Beispiel gibt 4 Möglichkeiten, wie man CSS mit HTML verbinden kann. Das Link Element um auf ein externes Style Sheet zu verweisen, ein Style Element innerhalb des Head Elementes, ein importiertes Style Sheet, mit der @import Notation und ein Style Attribut im Body. Die Style Sheets, die mit Link referenziert wurden, sind optionale, vom Benutzer auswählbare Style Sheets, während die mit @import importierten Style Sheets auf jeden Fall in das Dokument implementiert werden. Das Style Element dient zur lokalen Deklaration von CSS Regeln. Hier sollte man alles Seitenspezifische deklarieren, um speziellen Elementen ein besonderes Aussehen zu verleihen.
Da ältere Browser das Style Element nicht kennen, kann man den Inhalt mit Kommentaren verstecken, damit diese Browser den Inhalt nicht als Text anzeigen.
<STYLE TYPE="text/css">
<!--
H1 { color: green }
-->
</STYLE>
Mit dem Style Attribut kann man dann jedem einzelnen HTML Element (außer BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE und TITLE) ein bestimmtes Aussehen zuweisen. Diese Eigenschaften gelten dann nur für dieses eine auftauchen des Elements und andere, gleiche Elemente ohne Style Attribut werden normal angezeigt.
Gruppieren der Styles Um Styles Sheets möglichst klein zu halten, kann man Selektoren in Gruppen zusammenfasen, indem man sie mit mit Kommata vor der Deklaration trennt: H1, H2, H3, DIV { font-family: Arial } Ähnlich kann man auch mehrere Eigenschaften zusammenfassen:
H1 {
font-weight: bold;
font-size: 12px;
line-height: 14px;
font-family: helvetica;
}
Zusätzlich haben einige Eigenschaften ihren eigenen Gruppierungssyntax:
H1 { font: bold 12px/14px helvetica } Das Beispiel ist mit dem oberen identisch. Vererbung Im ersten Beispiel wurde die Farbe des Elements H1 auf die Farbe Rot gesetzt. Einmal angenommen in dem Element H1 taucht nun ein mit EM hervorgehobenes Wort auf z.B. <H1> Dieses Wort <EM>ist</EM> wichtig</H1>auf, dann gilt: wenn EM keine Farbe zugewiesen wurde, so erbt dieses Element von seinem übergeordneten Element (<H1>) die Farbe Rot. Viele andere Eigenschaften wie font-family oder font-size werden vergleichbar vererbt. Um so z.B. für das gesamte Dokument eine einheitliche Schrift zu bestimmen, kann man schreiben:
BODY {
font-family: Arial;
color: blue;
}
Es gibt auch Eigenschaften die nicht vererbt werden, so z.B. die background Eigenschaft, wobei es eigentlich egal ist, ob diese Eigenschaft vererbt wird, oder nicht, da der Hintergrund des übergeordneten Elementes sowieso durchscheint.
Oftmals ist es auch sinnvoll eine Eigenschaft als Prozentangabe anzugeben, die sich dann auf eine andere Eigenschaft bezieht, z.B.:
P { font-size: 10pt }
P { line-height: 120% }
/* relativ zur 'font-size', also 12pt */
Wenn nun Elemente diesem P untergeordnet werden, dann übernehmen diese den absoluten line-height Wert (also 12pt) und nicht den relativen von 120%.
Attribut 'Class' als Selektor
Um den Einsatz von Styles möglichst flexibel zu gestalten, gibt es das Html Attribut Class. Für alle Elemente innerhalb von Body kann das Attribut definiert werden, und die Klasse (Class) kann im Style Sheet deklariert werden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN">
<HTML>
<HEAD>
<TITLE>Titel</TITLE>
<STYLE TYPE="text/css">
H1.green { color: green }
</STYLE>
</HEAD>
<BODY>
<H1 CLASS="green">
Für Class-Selektoren gelten die gleichen Vererbungsregeln, d.h. ein mit EM hervorgehobener Teil innerhalb von <H1 Class="green"> wird ebenfalls grün.
Man kann die Klassen auch für alle Elemente deklarieren:
.green { color: green }
/* Für alle Elemente mit CLASS=green */
Attribut 'Id' als Selektor
Das HTML Attribut 'Id' kann ebenfalls als Selektor verwand werden. Der Unterschied zu 'Class' besteht darin, das ein 'Id' ein Unikat in dem Dokument sein muss, also jeder Wert für 'Id' darf nur einmal auftauchen. Ihnen bekommt daher eine besondere Bedeutung zu. Deklariert werden 'Id' Selektoren mit einem vorangestelltem '#'
#Wide { letter-spacing: 0.3em }
H1#Wide { letter-spacing: 0.5em }
Im ersten Beispiel bekommt z.B. ein <P ID="Wide">Wide Text</P> ein letter-spacing von 0.3em. Im zweiten Beispiel gilt nur für ein "<H1>" Element mit dem Attribut 'Id=Wide', dass dieses ein letter-spacing von 0.5em bekommt.
Kontextabhängige Selektoren
Die Vererbung von Eigenschaften erspart einem viel Tipparbeit. Man definiert Standardeigenschaften und behandelt Ausnahmen separat. Wenn man z.B. dem Element EM innerhalb von H1 ein besonderes Aussehen verleihen will, schreibt man z.B.:
H1 { color: blue }
EM { color: red }
Jetzt wird das Element EM innerhalb von H1 wie gewollt, rot dargestellt, aber überall sonst im Dokument auch. Um das zu verhindern kann man die Styles abhängig von ihrem Auftauchen deklarieren.
H1 EM { color: red } Wenn jetzt der Hierarchie entsprechend ein EM innerhalb von H1 gefunden wird, so wird das rot dargestellt, sonst nicht. Das ganze kann man dann auch noch weiter verschachteln, z.B.: DIV H1 EM { color: #ff00ff } Kontextabhängige Selektoren können von Elementen, Class Attributen, Id Attributen oder Kombinationen daraus abhängig gemacht werden, z.B.:
DIV P { font: small sans-serif }
.green H1 { color: blue }
#x78y CODE { background: blue }
DIV.sidenote H1 { font-size: large }
bedeutet soviel wie: P in DIV bekommt kleine sans-serif Schrift; H1 innerhalb von Class=green wird blau gefärbt; CODE innerhalb von ID="#x78y" bekommt blauen Hintergrund; H1 innerhalb von DIV mit Class=sidenote wird groß dargestellt.
Ebenso wie auch normale Selektoren, können kontextabhängige Selektoren gruppiert werden: H1 B, H2 B, H1 EM, H2 EM { color: red } Was dasselbe ist, wie: H1 B { color: red } H2 B { color: red } H1 EM { color: red } H2 EM { color: red } Kommentare Kommentare in CSS sind denen in Programmiersprachen wie C sehr ähnlich: A { color: green } /* Linkfarbe ist grün */ CSS Kommentare können nicht ineinander verschachtelt werden und Kommentare wie man sie von JavaScript her kennt ala: "// Kommentar" sind auch nicht zulässig. Links zur Vertiefung von Cascading Style Sheets: HTML.net Der Webdesigner CSS-Technik CSS-Tutorial auf eBook CSS-Hilfe WEBMASTER RESSOURCE Aus unserer Trickkiste: Bei allem Lesen von CSS-Tutorials werden Sie erstaunlicherweise nur selten auf einen Begriff - einen elementaren Begriff aus CSS stoßen. Haben Sie schon etwas von className gehört? Das ist ganz einfach: eine Klasse kann ihren Namen und damit alle Eigenschaften wechsel und wie? Auch ganz einfach - mit einer minimalen Javascriptanweisung - onmouseover, onclick usw. Betrachten wir einmal ein Beispiel (wechseln Sie mit der Maus über die beiden Buttons unten: Es gibt zwei Klassen "show" und "go" und diese werden bei Kontakt mit der Maus einfach mit onmouseover=this.className="..." und onmouseout=this.className="..." ausgetauscht. Legionen von "Programmierern" haben Tausende von Zeilen geschrieben, um dynamische Buttons zu erzeugen - lustig - oder? Man kann mit diesem kleinen "Rollenspiel" gewaltige Dinge realisieren. An anderer Stelle zeigen wir, wie ein dynamisches Menü mit dieser Technik auch ganz simpel zu realisieren ist. Und hier die Klassen und der Code für die beiden Buttons:
|
|||||