CSS (Cascading Stylesheets)
Einführung
natürliche KaskadeCascading Stylesheets (CSS) werden benutzt um die Elemente eines HTML-Dokuments zu formatieren.
CSS bietet dem Benutzer die Möglichkeit das Layout zu gestalten und zu verändern, ohne massiv in das XHTML Dokument eingreifen zu müssen.
In diesem Abschnitt werden die Funktionsweisen von CSS erklärt und auf die Beispielseite aus dem Kapitel XHTML angewendet.
Es wäre sinnlos ohne Vorkenntnisse die ganze Theorie zu pauken. Stattdessen ist es für absolute Anfänger sinnvoller alles nur grob zu überfliegen und versuchen anhand des Beispiels die Funktionsweise von CSS zu verstehen.
Wenn es Unklarheiten gibt, dann sollte natürlich auf die anderen Informationen und die verlinkten Seiten aus diesem Abschnitt zurückgegriffen werden.
Fortgeschrittenen, die CSS schon grob kennengelernt haben, sollten sich diesen Abschnitt einmal komplett zu Gemüte führen. Beim recherchieren dafür habe ich auch noch das eine oder andere kennen gelernt.
Integration in das Dokument
Es werden die gängigsten Methoden erklärt, mit der CSS integriert werden kann und wann man welche verwenden sollte. In der später folgenden Beispielseite wird jedoch nur die Verlinkung genutzt, um es einfacher zu halten.
Für den Anfang ist diese Methode auch ausreichend, es schadet aber nicht die anderen zu kennen. Mehr zu diesem Thema gibt es unter anderem bei SelfHTML
Als externe Datei
Verlinkt (<link>)
<link rel="stylesheet" type="text/css" href="styles.css" />
Mit dieser Zeile im <head> wird die Datei styles.css aus dem Hauptverzeichnis heraus aufgerufen.
Diese Methode kann von allen normalen Browsern verstanden und ausgeführt werden. In diesem Stylesheet sollten alle einfachen Seitenformatierungen integriert werden.
Es gibt CSS-Eigenschaften, die vor dem IE4 verborgen bleiben sollten, weil dieser sie nicht versteht. Diese werden mit @import eingefügt.
Importiert (@import)
<style type="text/css">
@import url("erweitert.css");
</style>
Durch diese Methode kann man einige Browser ausschließen und die Stylesheets nur an bestimmte adressieren. Da dieses Thema recht umfangreich ist wird hier zunächst nicht weiter darauf eingegangen. Für eine "einfache" Seite ist es auch nicht notwendig.
Im Dokument
Zentral im Dokument integriert
<style type="text/css">
<!--
html {
background-color: #666;
}
-->
</style>
Zwischen den Kommentarzeichen <!-- --> können die CSS Anweisungen direkt in das Dokument integriert werden. Das ist sinnvoll, wenn man anderen Testcase zu debuggen zur Verfügung stellen möchte, aber für den normalen Gebrauch eher ungeeignet, weil damit der Code unübersichtlich wird und die Wartung verkompliziert.
Deklaration eines einzelnen Elements
<span style="color: #f00; font-weight: bold">Text</span>
Mit dieser Methode kann man einem einzelnen (X)HTML-Element eine oder mehrere CSS Eigenschaften zukommen lassen.
Diese Veränderung kann auch durch Klassen erreicht werden und ist besonders fehleranfällig, da sie bei einem CSS Fehler leicht übersehen wird. Meiner Meinung nacht braucht man diese Methode nur, wenn man eine CSS Anweisung auf höchste Priorität setzen muss und es keine andere Möglichkeit gibt. (siehe Abschnitt: Kaskade)
Grundsätzlich sollte die style-Methode nur als Ausnahme Verwendung finden.
Medientypen
Allgemein
Wenn der Browser eine Seite aufruft, dann übermittelt er dieser Seite welche Art von Browser er ist.
Ein "normaler" Browser gibt sich z.B. als media="screen", ein Handy- als media="handheld" und wenn man auf die Druckansicht geht, dann wird media="print" aufgerufen, wenn es vorhanden ist. Sofern die CSS Kenntnisse es zulassen, sollte man auf jeden Fall das print-CSS einbauen und je nach Zielgruppe auch das für Handys.
Um einem Stylesheet für einen bestimmten Bereich zu definieren, muss man den Medientyp im verlinkten Stylesheet bzw. im @import ergänzen:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<style type="text/css">
@import url("hand.css") handheld;
</style>
Sonderfall iPhone&Co
Der mobile Safari Browser vom iPhone und Opera Mini geben sich übrigens als "screen" aus. Opera Mobile kann sowohl das "screen"-, als auch "handheld"-Stylesheet ansprechen.
Wer eine Seite fürs iPhone oder andere mobile Browser, die sich als "screen" ausgeben, anpassen möchte, der findet hier ein paar Tipps.
Selektoren
Die wichtigsten Selektoren
Universalselektor (Universal selector) - *
Der Universalselektor legt Attribute für sämtliche Typen fest. Mit folgender Anweisung werden z.B. alle Außen- und Innenabstände auf 0 gesetzt.:
* {
margin: 0;
padding: 0;
}
Jeder Browser hat für einige Elemente (z.B. <p>) einen Vorgabewert für diese Abstände vordefiniert. Mit der oben genannten Anweisung setzt man diese Werte auf 0 wodurch man für alle Elemente einen browserübergreifenden Wert setzen kann.
Dieser Selektor sollte allerdings nur verwendet werden, wenn es sich um nicht vererbbare Attribute handelt. Vererbbare (z.B. Textformatierungen) können auch durch den html Typselektor festgelegt werden.
Typselektoren (Type selectors) - E
Mithilfe der Typselektoren kann man jedem HTML-Element seine Eigenschaften zuweisen.
Folgendes Beispiel färbt den Hintergrund des Gesamten Dokumentes dunkelrot:
html {
background-color: #531D1D;
}
ID-Selektor (ID selectors) - #id
Im XHTML-Tutorial wurden bereits ID vergeben. Diese dienen dazu ein Element eindeutig zu kennzeichnen und darf nicht zweimal vergeben werden.
Mit den ID-Selektoren können den entsprechenden Elementen spezifische Eigenschaften zugeordnet werden. Diese werden im CSS durch eine Raute markiert.
In folgendem Beispiel wird der ID menu eine relative Posionierung und eine links-fließende Anordnung zugewiesen:
(Mehr dazu im Abschnitt Positionierung)
#menu {
position: relative;
float: left;
}
Klassenselektor (Class selector) - .klasse
Während eine ID nur einmal vergeben werden kann, können mehrere Elemente der gleichen Klasse angehören und über das Stylesheet ihre Eigenschaften zugewiesen bekommen. Sie werden durch einen voranstehenden Punkt markiert.
Im HTML-Dokument werden dei Namen der Klasse durch das Attribut class="" übergeben.
<ul class="seitenubersicht">
Eine Klasse kann sowohl allgemeingültig, als auch spezifisch eingebunden werden:
ul.seitenubersicht {
margin-left: 2em;
}
/*Die Klasse seitenübersicht wirkt nur bei ungeordneten Listen*/
.werbung {
border: 1px solid #000;
}
/*Die Klasse werbung kann auf sämtliche Element angewendet werden.*/
Sowohl ID als auch Klassen sollten nur verwendet werden, wenn sie auch notwendig sind. Ansonsten verliert ein Dokument schnell seine Übersichtlichkeit.
besondere Selektoren
Pseudoklassen (Link pseudo-classes) - E:
Pseudoelemente (Dynamic pseudo-classes) - E:
Nachfahrenselektor (Descendant selector) - E F
Der Nachfahrenselektor funktioniert bei allen Elementen F, dass in einem Element E verschachtelt wurde.
<style type="text/css">
<!--
div span {
color: red;
}
-->
</style>
<div>
<p>Absatz mit rotem <span>Wort</span></p>
</div>
Kindselektor (Child selectors) - E > F
Der Kind- funktioniert ähnlich wie der Nachfahrenselektor, aber im Gegensatz zu diesem nur in der direkten Ebene darunter.
<style type="text/css">
<!--
div>span {
color: red;
}
-->
</style>
<div>
<p>Absatz mit normalem <span>Wort</span></p>
</div>
Nachbarselektor (Adjacent selectors) - E + F
Der Nachbarselektor wirkt sich auf das nachfolgende Objekt aus, dass jedoch nicht verschachtel ist.
<style type="text/css">
<!--
div+small {
color: red;
}
-->
</style>
<div>
<p>Absatz</p>
<small>roter kleiner Text</small>
</div>
Attributselektor (Attribute selectors )- E[anweisung]
| Attribut | Beschreibung |
|---|---|
| E[attr] { ... } |
Das Element muss nur das Attribut mit einem beliebigen Wert enthalten. Beispiel: <tag attr="WertX"> |
| E[attr = "Wert"] { ... } |
Das Attribut muss den angegebenen Wert enthalten. Beispiel: <tag attr="Wert"> |
| E[attr ~= "Wert"] { ... } |
Das Attribut muss den Wert in einer durch Leerzeichen getrennten Liste von Werten enthalten. Beispiel: <tag attr="Wert1 Wert Wert2"> |
| E[attr |= "Wert"] { ... } |
Das Attribut muss den angegebenen Wert exakt oder gefolgt von einem Bindestrich enthalten. Beispiel: <tag attr="Wert"> oder <tag attr="Wert-2"> |
Hinweis: Diese Tabelle wurde teilweise von css4you.de übernommen.
Grundregeln für alle Selektoren
- XHTML differenziert zwischen Groß- und Kleinbuchstaben, während HTML sie nicht unterscheidet.
- Sämtliche Namen der Selektoren dürfen nur aus den Buchstaben (a-z, A-Z, ohne ß, Umlaute, é, à,...) und Zahlen bestehen. Das erste Zeichen muss jedoch ein Buchstabe sein.
- Es dürfen für die Namensgebung keine Sonderzeichen außer dem Bindestrich verwendet werden. Unterstriche wurden nachträglich in die CSS-Spezifikation aufgenommen und werden von älteren Browsern nicht erkannt.
Kaskaden
Häufig passiert es, dass einem Element mehrere Eigenschaften zugeordnet werden. Welche Eigenschaft die höhere Wertung hat, wird durch die Kaskade betimmt. Obwohl sie namensgebend ist (Cascading Stylesheets) wird sie von vielen gar nicht oder nur intuitiv ausgenutzt.
Ich möchte versuchen sie hier möglichst einfach und anschaulich zu erklären. Auf thestyleworks.de wird die Spezifizät der Kaskade genauer erläutert. Für den Anfang ist dieses Verständnis allerdings nicht nötig.
Eine Kaskade ist in der Natur ein stufenförmiger Wasserfall. Im CSS beschreibt die Kaskade die Rangfolge der einzelnen Selektoren.
Sortiert nach der Relevanz (Die Abarbeitung der Stile erfolgt von unten nach oben):
- Benutzerstil mit !important gekennzeichnet
- Autorenstil mit !important gekennzeichnet
- Autorenstil
- Benutzerstil
- Standardstil des Browsers
Der Autorenstil ist der für uns relevante, da es sich hierbei um unsere Stylesheets handelt.
Benutzerstile können z.B. durch das Stylish Add-on für den Firefox ergänzt werden. Hiermit können auf allen oder auf beliebigen Seiten Stile ergänzt oder mit Hilfe von !important überschrieben werden.
Diese Stile müssen vom Webdesigner nicht berücksichtigt werden.
Ebenso sind !important Stile eigentlich nur für Hacks und Bugfixes nötig und müssen anfangs ebensowenig berücksichtigt werden.
Der Standardstil des Browsers legt diverse Dinge fest, die uns als Webdesigner häufig ein Dorn im Auge sind. Leider haben viele Browser unterschiedliche Vorgaben für ihre Standardstile, was vor allem bei margin- und padding-Werte von z.B. <p> oder <ul> auffällt.
Intelligenterweise steht dieser Stil in der Kaskade ganz unten und wird von allen anderen überschrieben.
Deshalb empfielt es sich am Anfang des Hauptstylesheets mit Hilfe des Sternselektors die porblematischen Werte zu überschreiben:
* {
margin: 0;
padding: 0;
border: 0;
}
Innerhalb der einzelnen Abschnitte herrscht eine eigene Hierarchie.
Diese ist vom Stärksten zum Schwächsten Selektor sortiert:
| Selektor | Beispiel |
|---|---|
| style="" | <p class="margin:0"> Das Styleattribut direkt im Quelltext überschreibt grundsätzlich alle Werte, weswegen es so sellten wie möglich eingesetzt werden sollte. |
| #id | #content |
| #id.class | #content.date |
| element#id | div#content |
| #id | #content |
| element.class.class2 | div.beispiel.date |
| element.class | p.date |
| element element2 | ul li |
| element | ul |
| * |
Klicken zum vergrößernWie schon einmal erwähnt lohnt sich die Anschaffung des kostenlosen Firefox Addons Firebug.
Dieses Tool ermöglicht die Darstellung sämtlicher Stile eines Elements und zeigt dessen Herkunft an.
Stile die durchgestrichen sind, wurden von anderen überschrieben, welche in der Kaskade übergeordnet sind.
Damit lassen sich während der Entwicklung leicht Kaskaden erkennen, die man eventuell übersehen hat.
Attributsbeschreibung anhand der Beispielseite
In Arbeit!
Links und Empfehlungen
Grundsätzlich bieten CSS4you.de und mediaevent.de eine gute CSS Referenz.
Erstere bietet auch noch ein kleines Tutorial und eine Browserkompatibilitätsliste.
Bei Problemen ist ansonsten die CSS2-Spezifikation der W3C eine gute erste Anlaufstelle.
Um die Grundkenntnisse zu vertiefen kann ich das Buch CSS Mastery - Webdesign für Fortgeschrittene von Andy Budd, Cameron Moll und Simon Collison empfehlen.
Für weitere Empfehlungen lohnt sich ein Blick in den CSS-Abschnitt der Linkliste.
