Die Styleangaben werden als einfacher Text in einer .css-Datei gespeichert. Die Formatierung lautet dabei wie folgt:
p, a { /*alle <p> und <a> Elemente werden angesprochen Eigenschaften in geschwungener Klammer*/ color: red; /*Eigenschaft und Wert sind durch Doppelpunkt getrennt Doppelpunkt als Abschluss*/ background: white url(bild.png) fixed no-repeat; /*manche Eigenschaften lassen sich in einer Eigenschaft zusammenfassen*/ }
Die CSS-Eigenschaften werden in eine externe Datei ausgelagert. Diese Datei wird dann im <head>-Bereich mit einem <link>-Tag eingebunden.
<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
Bei dieser Methode werden die CSS-Eigenschaften nicht ausgelagert, sondern direkt innerhalb eines style-Tags im <head>-Bereich festgelegt.
<head> <style type="text/css"> /* <![CDATA[ */ h2 { background-color: #E6DACF; color: #806040; } /* ]]> */ </style> </head>
Diese Methode eignet sich besonders, wenn es nur 1-2 CSS-Formatierung für die ganze Seite gibt. Dann wird die Eigenschaft direkt im Tag innerhalb eines style-Attributs festgelegt.
<span style="font-size: 10px; font-family: serif">Das ist ein Text.</span>
Vererbung heißt, dass Styleeigenschaften von einem Element an ein beliebiges in ihm enthaltenes Element weitergegeben werden. Oder einfacher: Die Eigenschaften eines Elements werden von dem übergeordneten bestimmt.
Eigenschaften werden jedoch nur vererbt sofern sie nicht überschrieben werden und es keinen Standardwert vom Browser gibt.
Man kann ein Element aber auch zwingen die Eigenschaft zu erben anstatt sie vom Browser zugewiesen zu bekommen. Dabei muss man der Eigenschaft lediglich den Wert inherit geben.
Eine Besonderheit bei der Vererbung gibt es bei der Vererbung von relativen Größen. Dann bezieht sich nämlich die Größe des untergeordneten Elements relativ auf das Übergeordnete.
Z.B. 0,8em • 0,8em = 0,64 des obersten Wertes
(X)HTML-Elemente unterscheidet man in 2 Klassen: Block-Element und Inline-Elemente. Zwischen diesen beiden Typen gibt es Unterschiede in der Handhabung per CSS und den verfügbaren CSS-Eigenschaften. Die Unterschiede und Eigenschaften sind häufig auch von den Dokumenttyp-Definitionen abhängig.
Bei vielen Elementen kann man die Darstellung als Block-Element oder Inline-Element erzwingen, auch wenn es sich nicht um ein solches Element handelt. Dies funktioniert mit der Eigenschaft display.
Bestimmte wichtige Eigenschaften lassen sich nur auf Block-Elemente anwenden, wie z.B. clear und float, text-align oder text-indent(Einrückung).
vertical-align ist wiederum eine Eigenschaft, die sich nur auf Inline-Elemente anwenden lässt.
Die beiden HTML-Elemente <div> und <span> haben besondere Bedeutung für Stylesheets. Der Grund ist, dass sie selber eigenschaftslos sind. Der einzige Unterschied besteht darin, dass das div-Element eine neue Zeile im Textfluss erzwingt (Block), während span innerhalb eines Textes verwendet werden kann und keinen neuen Absatz erzeugt (Inline). Unter Verwendung von div oder span ist es also möglich, beliebigen Textabschnitten Klassenstyles zuzuweisen.
Zur Verknüpfung von CSS mit (X)HTML werden primär sogenannte Klassen und IDs verwendet, womit einzelne und Gruppen von Elementen gestaltet werden können.
#menueliste (auch möglich: ul#menueliste) { /* CSS-Eigenschaften für Elemente mit ID menueliste */ } .menuepunkt (auch möglich: li.menuepunkt) { /* CSS-Eigenschaften für Elemente mit Klasse menuepunkt*/ }
Stoßen mehrere Stylesheets aufeinander (z.B. die Standardeigenschaften vom Browser für Elemente wie h1 und Links zum einen, ein externes Stylesheet der Website und zusätzlich noch eine Inline-Styleangabe) so stellt sich die Frage, welche Eigenschaften sich durchsetzen, wenn 2 oder mehrere Stylesheets das Aussehen desselben Elements bestimmen wollen. Dabei gilt, dass sich die Eigenschaften durchsetzen die am nächsten zum Element stehen.
Folgende Hierarchie gibt es, umgesetzt wird immer die höchstmögliche Stufe in dieser Hierarchie:
Wie bereits bekannt, kann man mehrere (X)HTML-Elemente ineinander verschachteln und somit können durch die Vererbung einem Element verschiedene Werte für die gleiche CSS-Eigenschaft zugewiesen werden. Dabei gilt: Es setzt sich der Wert durch, der am spezifischten für das jeweilige Element ist, also sich auf das nächstliegende Element bezieht.
Links können je nach aktuellem Zustand (bereits geöffnet – „visited“, mit Maus darüber – „hover“ etc.) verschieden formatiert werden. Mit CSS können alle Elemente über sogenannte Pseudoklassen angesprochen werden.
Dazu schreibt man einfach das Element gefolgt von einem Doppelpunkt und dem Zustand. Z.B. a:visited {}
Die wichtigsten Pseudoklassen sind:
| Zustandsname | Erklärung |
|---|---|
| link | Standard: Der Link wurde noch nicht aufgerufen, wird auch nicht mit der Maus berührt oder ähnliches |
| visited | Der Link wurde vom Besucher bereits aufgerufen, er ist im Verlauf des verwendeten Browsers |
| hover | Der Link wird mit der Maus gerade berührt |
| focus | Der Link hat aktuell den Fokus |
| active | Der Link wird gerade angeklickt, die Maustaste wurde aber noch nicht losgelassen |
Weitere Selektoren (Wikipedia)
Ein Problem, das bei neueren Browsern immer seltener auftritt, ist die unterschiedliche bzw. falsche Darstellung von CSS-Angaben bei alten Browsern (v.a. IE). Eine Möglichkeit browserspezifische Styles zu implementieren bieten Browser-Weichen.
<link rel="stylesheet" type="text/css" href="style.css" /> <!--[if lt IE 8]> <link rel="stylesheet" type="text/css" href="style_IE8.css" /> <![endif]-->
Die CSS-Datei style_IE8.css wird nur in IE-Versionen vor Version 8 eingebunden.
Es gibt die Möglichkeit, bestimmte CSS-Dateien nur für ein bestimmtes Ausgabemedium zu verwenden. Am wichtigsten ist hier wohl die Möglichkeit, für den Druck ein anderes Layout als für die normale Anzeige der Website zu verwenden.
Andere Medien sind z.B. Beamer („projection“), PDAs („handheld“) oder TV-Ähnliches („tv“). Im Normalfall bindet man eine CSS-Datei für alle ein und überschreibt dann mit weiteren medienspezifischen CSS-Dateien das Stylesheet für das betreffende Medium.
<link rel="stylesheet" type="text/css" media="{MEDIENTYP}" href="style.css" />
Die statische Positionierung ist die häufigst-angwendete und darum auch Standardpositionierung. Die Elemente werden damit im normalen Textfluss dargestellt.
Bei der absoluen Positionierung werden die Elemente aus dem Textfluss genommen, und an eine festgelegte Stelle gerückt. Dadurch können sich auch mehrere Elemente überlagern.
Mit den zusätzlichen Eigenschaften top, right, bottom und left kann man das Element dann durch Längenangaben verschieben. Die Werte für diese Eigenschaften können beliebige Längenangaben mit allen bekannten Einheiten sein. Sie beziehen sich, wenn es kein übergeordnetes Element gibt, das selbst absolut positioniert ist, auf das Browserfenster. Meist gibt man einen Wert mit der Einheit em an, weil sich das Design somit an die Schriftgröße des Benutzers anpasst.
Die Eigenschaften stehen immer für Abstände, also top: legt den Abstand vom obersten Rand des Browserfensters bzw. des übergeordneten Elements fest. Man verwendet immer ENTWEDER top ODER bottom bzw. left ODER right.
Bei absoluter Positionierung kann es natürlich auch zu Überlappungen mehrerer Elemente kommen. Will man festlegen, welches Elemente dabei vorne liegen, macht man das mit der Eigenschaft z-index - je höher der Wert dieser Eigenschaft, desto weiter vorne erscheint das Element. Der Wert muss in keiner bestimmten Folge angegeben werden, sondern es können beispielsweise auch die Werte 5, 16, 33, 67 vorkommen.
Auch hier stehen die Eigenschaften top, right, bottom und left zur Verfügung.
Jedoch wird das Element hier nicht relativ zum Browserfenster (bzw. übergeordnetem Element) positioniert, sondern relativ zur ursprünglichen (statischen) Positionierung.
Auch die fixierte Positionierung arbeitet mit den Eigenschaften top, right, bottom und left, ähnlich wie die absolute Positionierung.
Jedoch beziehen sich die Angaben stets auf das Browserfenster und das Element scrollt nicht mit, sondern bleibt immer an einer fixen Bildschirmposition.
Auch die bereits bekannten Listen kann man mit CSS einfach formatieren, häufig werden auch Menüs von Webseiten mit Listen gestaltet.
Die wichtigsten Eigenschaften sind:
| Eigenschaft | erlaubte Werte | Erklärung |
|---|---|---|
| list-style-type | beides: none ul: disc, circle, square ol: decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, lower-greek, … | Bestimmt das Aufzählungszeichen (Standardmäßig disc - gefüllter Kreis) |
| list-style-image | none, url(), Inherit (vererbt vom übergeordneten Element) | Für die Verwendung einer Grafik anstatt eines Symbols von list-style-type |
| list-style-position | inside, outside (Standard) | Bestimmt, ob Aufzählungszeichen innerhalb oder außerhalb des Textblocks stehen sollen |
Block-Elemente verwenden zur Darstellung das Boxmodell. Eine Box (Block-Element) hat immer einen Rahmen (border), einen Innenabstand (padding) zwischen Inhalt und dem Rahmen und einen Außenabstand (margin), der den Abstand rund um den Rahmen angibt.
Eine sehr wichtige Eigenschaft der Block-Elemente ist der Rahmen. Es können die Farbe (border-color), die Breite des Rahmens (border-width) und die Art des Rahmens (border-style) angesprochen werden. Diese Eigenschaften werden zusammengefasst mit border. Außerdem können auch nur einzelne Rahmen-Seiten angesprochen werden (z.B. border-left(-color)).
Eine weitere Möglichkeit, die Darstellung von Webseiten zu verändern, bieten die Float- und Clear-Eigenschaften.
Float setzt die für Block-Elemente geltende Regel, dass diese in einer neuen Zeile beginnen außer Kraft. Es bewirkt also, dass keine Veränderung des normalen Textflusses stattfindet.
Das geschieht, indem das betroffene Element von den anderen umflossen wird. Dem Element, das umfließen soll, weißt man die Regel float: left (für links umfließen) oder float: right (für rechts umfließen) zu. Der Standardwert ist natürlich float: none, also nicht umfließen.
Das Problem ist nun, dass ein Element nicht nur von dem nächsten Absatz umflossen wird, sondern von allen folgenden Elementen. Das Umfließen muss also nach dem gewünschten Element wieder mit der Regel clear: left, clear: right oder clear: both stoppen. Die clear-Regel muss dem Element zugewiesen werden, das als erstes nicht mehr umfließen soll.
