Diese Referenz bietet einen Überblick über die Attribute, die das Aussehen Ihrer HTML-Dokumente über Style-Sheets steuern. Das W3C bezeichnet den aktuellen Standard als CSS 2.0. Dieser Standard ist jedoch von keinem Browser komplett implementiert, so dass ein ausgiebiges Testing mit allen relevanten Browsertypen angebracht erscheint, um unliebsame Überraschungen zu vermeiden.
[Grundlegende Syntax]
Alle Stile in der Style-Sheet-Definition verwenden dieselbe grundlegende Syntax. Sie werden feststellen, dass es zahlreiche Möglichkeiten gibt, weitere Attribute oder Gruppenelemente einzufügen.
Der SELECTOR gibt an, wie der Stil auf der restlichen HTML-Seite angesprochen wird. Er verwendet eines der existierenden HTML-Tags, wie etwa <CODE> oder <P>, ebenso wie eine optionale Angabe von class, um weitere Unterstile anzulegen. Eine class ist eine Untermenge eines Selektors, wodurch ein Element zahlreiche Stile annehmen kann. Beispielsweise können Sie farbige Zitate verwenden, um Quellen oder Sprecher zu kennzeichnen.
Neben den Standard-HTML-Tags können Sie noch zwei andere Werte für einen Selektor angeben: first-line und first-letter. Der Wert first-line setzt den Stil für die erste Textzeile in einem Dokument oder verschiedene Passagen eines Dokuments, wie etwa einem Absatz oder oder einem Zitat. Der Wert first-letter erzeugt spezielle Effekte für den ersten Buchstaben eines Dokuments oder einer Textpassage.
Selektorgruppen und ihre Klassen werden durch Kommata voneinander getrennt. Jedes Gruppenelement erhält denselben Stil wie die anderen Gruppenelemente. Wenn Sie beispielsweise möchten, dass alle Überschriften rot angezeigt werden, dann können Sie H1 bis H6 in den Attributen auflisten, um die Farbe rot darzustellen. Alle anderen Tag-Attribute, wie etwa die Grösse, blieben davon unbeeinflusst.
Eine weitere Möglichkeit stellen die kontextbezogenen Selektoren dar, die dem Browser mitteilen, was er mit einem bestimmten Tag machen soll, das in ein übergeordnetes Tag eingebettet ist.
Das bedeutet, wenn der INNER_SELECTOR innerhalb des OUTER_SELECTORs benutzt wird, wird sein Stil verwendet. Andernfalls werden alle Auftreten von INNER_SELECTOR gemäss der Standardvorgehensweise des Browsers behandelt.
Nachdem alle Selektor- und Gruppendefinitionen erfolgt sind, geben Sie in geschweiften Klammern alle Attribute und ihre Werte an. Attribut und Wert werden durch einen Doppelpunkt getrennt, die einzelnen Attribut-Wert-Paare durch Semikolons. die Werte innerhalb einer Definition, wie etwa die Schriftart oder ein Farbwert, berücksichtigen nicht die Gross-/Kleinschreibung. für das Attribut font-family können Sie beispielsweise Garamond, garamond oder GARAMOND angeben, - alle drei Einstellungen funktionieren in jedem Browser.
Wie bei jeder guten Syntax können Sie Stildefinitionen in einem Dokument auf dreierlei Arten angeben: in einem eingebetteten Style-Sheet, in einem verknüpften Style-Sheet und in einem Inline- Style-Sheet.
[Eingebettetes Style-Sheet]
Die <STYLE>-Tags umschliessen ein eingebettetes Style-Sheet. Das Format einer HTML-Seite mit einem eingebetteten Style-Sheet sieht in ihrer Struktur wie folgt aus:
Die <STYLE>-Tags enthalten die Liste mit den Selektoren und Stilen.
[Verknüpftes Style-Sheet]
Das verknüpfte Style-Sheet ist eine .css-Datei, die nur die <STYLE>-Tags und ihren Inhalt aufnimmt. Die Stildatei wird im <HEAD>-Tag des HTML-Dokuments mit einem <LINK>-Tag spezifiziert:
Zur Laufzeit lädt der Browser den Stil aus der .css-Datei und formatiert damit das Dokument. Wenn die HTML-Seite gleichzeitig ein eingebettetes Style-Sheet enthält, das in Konflikt mit dem verknüpften Style-Sheet steht, hat das eingebettete Style-Sheet Priorität.
[Inline Style-Sheet]
Die letzte Möglichkeit, die Inline-Style-Sheets, verwenden die Syntax von Style-Sheets, obwohl es sich dabei technisch gesehen nicht nicht um eine Style-Sheet-Implementierung handelt. Diese Option nutzt die Style-Sheet-Nomenklatur, um einzelne Auftreten von Tags im Dokument anzupassen:
Im wesentlichen ist das eine Möglichkeit, HTML-Tags anzupassen, die gelegentlich auftreten. Wenn Sie alle drei Syntaxformen kombinieren, hat Inline die höchste Priorität, gefolgt von eingebetteten und dann von verknüpften Style-Sheets.
[Stil-Attribute]
Innerhalb der Definition für einen Selektor können unterschiedliche Attributklassen verwendet werden. Die folgenden Abschnitte beschreiben die Attribute für eine Klasse.
Es gibt feste Regeln, die angewendet werden, wenn zwischen den Stilen für eine Seite Konflikte auftreten. um genau zu bestimmen, wie ein Element auf der Seite erscheint, berücksichtigen Sie die folgenden Regeln:
[Schriften]
Es gibt keine aktuellen Standards für Schriftfamilien und ihre Verwendung auf verschiedenen Anwender-Maschinen, deshalb müssen Sie hier sorgfältig vorgehen, um den gewünschten Effekt für den Anwender zu erzielen.
[Das Attribut font-family]
Das Attribut font-family listet Schriftfamilien ihrer Priorität nach auf, durch Kommata getrennt. Hier werden zwei Variablentypen verwendet: Familienname und generische Familie.
Ein Familienname ist der Name einer bestimmten Schrift, etwa Helvetica, Garamond, Palatino oder Optima. die Schriftnamen mit Leerzeichen sollten in Anführungszeichen eingeschlossen werden, also z.B. "Gill Sans". Die generische Familie kann fünf Werte annehmen, die die Schrift nach ihrem Stil klassifizieren und als letzte Option in einer font-family-Liste empfohlen werden.
Dieses Attribut gibt an, wie eine Schrift dargestellt werden soll. Es gibt die Werte normal, italic oder oblique. Der Wert normal wird in einigen Schriften auch als Roman bezeichnet. Der Wert oblique ist ähnlich italic, ausser dass er in der Regel vom System berechnet wird und nicht durch einen separaten Stil der Schrift, wie es bei italic der Fall ist.
[Das Attribut font-variant]
Ähnlich font-style setzt dieses Attribut Kapitälchen. Die möglichen Werte sind normal und small-caps.
Wenn es keine Kapitälchen für eine Schrift gibt, versucht das System, die Grossbuchstaben auf die Grösse von Kleinbuchstaben zu bringen. Wenn das nicht funktioniert, erscheint der Text in Grossbuchstaben.
[Das Attribut font-weight]
Zahlreiche Werte für dieses Attribut bestimmen, wie fett eine Schrift dargestellt wird. Die wichtigsten Werte sind normal und bold. Sie können die Werte durch die Angabe einer Zahl zwischen 100 und 900 ersetzen. Wenn eine Schrift eine 'mittlere' Gewichtung hat, dann entspricht das dem Wert 500. Fett entspricht dem Wert 700.
Zwei zusätzliche Werte sind bolder und lighter, die die Gewichtung um jeweils eine Ebene verstärken bzw. verringern.
[Das Attribut font-size]
Es gibt vier Eigenschaften, die die Grösse einer Schrift in einem Stil festlegen - absolute Grösse, relative Grösse, Länge oder Prozentwert.
[Das Attribut font-stretch]
HINWEIS: Dieses Attribut gehört zum Umfang von CSS 2.0 und wird zum Zeitpunkt der Erstellung dieser Referenz noch von keinem der gängigsten Browser unterstützt.
Mit font-stretch können Sie die Laufweite der Schrift bestimmen. Folgende Angaben sind möglich:
[Das Attribut font]
Dieses Attribut stellt eine Abkürzung für die Einstellung aller zuvor erwähnten Attribute dar. Die Reihenfolge der Attribute ist dabei font-style, font-variant, font-weight, font-size, line-height, font-family. Zwischen den Attributwerten werden keine Kommata angegeben, ausser, wenn mehrere Schriftfamilien aufgelistet sind:
[Farbe und Hintergrund]
Dies Elemente bestimmen die Farbwerte für den Text (Vordergrund) und den Bereich hinter dem Text (Hintergrund). Neben der Bestimmung einer Hintergrundfarbe können Sie auch ein Hintergrundbild definieren. Alle Farbwerte werden auf die gleiche Weise wie im color-Attribut definiert.
[Das Attribut color]
Dieses Attribut definiert die Farbe des Textelements. Es wird über eines der Farbschlüsselwerte (z.B. red) angegeben. Sie können für die Farbe auch ein Hexadezimal-Tripel angeben, das die Rot-, Grün- ud Blauwerte angibt (z.B. rgb(255,0,0)).
[Das Attribut background-color]
Dieses Attribut setzt die Hintergrundfarbe für einen Stil. Dieses Attribut kann unabhängig von der Hintergrundfarbe für das Dokument gesetzt werden, damit Text gesondert hervorgehoben werden kann.
[Das Attribut background-image]
Dieses Attribut spezifiziert ein Hintergrundbild für ein Stielement. In Verbindung mit background-color wird damit sichergestellt, dass ein Ersatz bereitsteht, wenn das Bild nicht zur Verfügung steht. Wenn das Bild vorhanden ist, wird es die Hintergrundfarbe überdecken.
[Das Attribut background-repeat]
Wenn das Hintergrundbild wiederholt werden soll, gibt dieses Attribut an, wie die Kachelung aussehen soll. Seine Werte sind repeat, repeat-x, und repeat-y. Der Wert repeat gibt an, dass das Bild normal kachelartig angeordnet werden soll. Der Wert repeat-x wiederholt das Bild in einer einzelnen horizontalen Zeile, und der Wert repeat-y wiederholt das Bild vertikal.
[Das Attribut background-attachment]
Dieses Attribut ist eine Erweiterung zum Hintergrundbild und ist neu in HTML. Es gibt an, ob das Hintergrundbild dem Vordergrundtext zugeordnet wird (scroll), oder ob es mit dem Hintergrund verankert ist (fixed). Diese Funktion wird erst wirksam, wenn der Anwender in einer Textauswahl scrollt.
[Das Attribut background-position]
Wenn Sie im normalen HTML ein Hintergrundbild verwenden, ist der Startpunkt immer die linke obere Ecke des Bildschirms. Mit Hilfe eines Style Sheets können Sie auch einen anderen Startpunkt innerhalb des Felds mit dem Stilinhalt spezifizieren.
Die Startposition des Bildes kann auf dreierlei Weise angegeben werden. Die erste verwendet Schlüsselwörter. Für die horizontale Plazierung verwenden Sie left, center oder right. Für die vertikale Plazierung verwenden Sie top, center oder bottom. Alternativ können Sie die Position auch als Prozentwert des verfügbaren Bereichs angeben, wobei 0% 0% für oben links steht (Standard) und 100% 100% für unten rechts. Die letzte Möglichkeit gibt die Masse in Zentimetern oder Inch an.
Wenn nur ein Wert für die Plazierung angegeben ist, wird er für die horizontale Positionierung verwendet. Sind beide Werte angegeben, wird der erste für die horizontale, der zweite für die vertikale Positionierung verwendet.
Dieses Attribut ist eine Abkürzung ähnlich font, mit der Sie mehrere Hintergrundwerte auf einmal setzen können. Die Reihenfolge ist background-color, background-image, background-repeat, background-attachment, background-position.
[Text]
Diese Stilattribute bestimmen das Erscheinungsbild von Text, ändern aber dabei nicht die Schrift. Unter anderem handelt es sich hier um Werte für die Abstände, Unterstreichnung, Blinken und Durchstreichen. Ausserdem werden einige der Positionierungsattribute unterstützt, unter anderem die Ausrichtung links oder rechts oder Einrückungen.
[Das Attribut word-spacing]
Dieses Attribut erweitert den standardmässigen Abstand zwischen einzelnen Wörtern, der in Ems angegeben wird. Ein Em ist der Platz, der vom Buchstaben M eingenommen wird, und er bildet die Grundlage für die Breitenbestimmung einer Schrift. Um den Wert auf seinen Standard zurückzusetzen, geben Sie 0em oder normal an.
[Das Attribut letter-spacing]
Das Attribut letter-spacing ist dem Attribut word-spacing ähnlich, bezieht sich aber auf die Abstände zwischen den Buchstaben. Neben der Standardmethode des Browsers für die Bestimmung der Abstände werden die zusätzlichen Abstände auch durch die Textausrichtung beeinflusst.
[Das Attribut text-decoration]
Dieses Attribut ist eng mit der font-Familie verwandt. Es gibt Textdekorationen an, etwa Unterstreichen, Durchstreichen oder Blinken. Die vier Werte sind none, underline, overline, line-through und blink.
[Das Attribut vertical-align]
Dieses Attribut setzt die vertikale Position des Textes entweder absolut oder relativ zum Elternelement. Es unterstützt zahlreiche Werte und Schlüsselwörter:
[Das Attribut text-transform]
Dieses Attribut setzt die Grossschreibung des betreffenden Textes auf einen von vier Werten: capitalize (der erste Buchstabe jedes Worts), uppercase (alle Buchstaben gross), lowercase (alle Buchstaben klein) oder none.
[Das Attribut text-align]
Dieses Attribut geht über die Standardausrichtung von HTML hinaus und ermöglicht eine vollständige Ausrichtung (justify) links und rechts. Wenn ein Browser justify nicht unterstützt, verwendet er in der Regel left.
[Das Attribut text-indent]
Das Attribut text-indent gibt in Ems oder Zoll an, wieviel Platz vor der ersten Zeile eingefügt wird.
[Das Attribut line-height]
Dieses Attribut setzt den Abstand zwischen zwei benachbarten Grundlinien unter Verwendung einer Länge (in Ems), eines Multiplikationsfaktors oder eines Prozentwerts. Faktoren werden ohne Einheit angegeben, etwa 1.5. Wenn Sie mit dieser Methode arbeiten, erbt das kind den Faktor, nicht den resultierenden Wert.
Hier wird die Linienhöhe 18 Punkt gross, die Schriftgrösse bleibt bei 12 Punkt.
[Das Attribut text-shadow]
Mit text-shadow können Sie einen Textschatten erzwingen. Erlaubt sind Farbangaben oder der Wert none für "keinen Textschatten".
[Ränder, Auffüllung und Rahmen]
Jedes in einem Style-Sheet erzeugte Element wird in einem eigenen 'Kasten' angezeigt. Alle Stile werden für das Element angewendet, aber auch der 'Kasten' kann Eigenschaften haben, die definieren, wie er sich zu benachbarten Elementen auf der Seite verhält. Die Länge wird in Zoll (in), in Zentimetern (cm) in Ems (em), in Punkten (pt) oder in Pixeln angegeben.
Diese Kasteneigenschaften können in drei Kategorien eingeteilt werden. Die Randeigenschaften bestimmen den Rahmen um den Kasten, die Auffüll-Eigenschaften bestimmen, wie viel Platz zwischen dem Rahmen und dem Inhalt eingefügt wird, und die Rahmeneigenschaften definieren die grafischen Linien um ein Element herum.
Weitere Eigenschaften des Kastens sind unter anderem seine Breite, seine Höhe und seine physische Position.
[Die Attribute margin-top, margin-bottom, margin-right und margin-left]
Diese vier Attribute geben an, wieviel Platz zwischen dem Element und den benachbarten eingefügt wird. Dieser Platz kann als Länge oder als Prozentwert bezüglich der Textbreite des Elternelements definiert oder automatisch angelegt werden.
[Das Attribut margin]
Das Attribut margin stellt eine Abkürzung zum Setzen der vier Ränder dar.
Wenn Sie die vier Werte angeben, werden sie in der Reihenfolge oben, rechts, unten und links angewendet. Wenn Sie nur einen Wert angeben, wird dieser auf alle vier Seiten angewendet. Wenn Sie zwei oder drei Werte angeben, werden die fehlenden Werte von der gegenüberliegenden Seite übernommen.
[Die Attribute pading-top, padding-bottom, padding-right und padding-left]
Diese Attribute bestimmen den Abstand zwischen den Grenzen des Kastens und dem darin abgelegten Element. Dabei kann eine physische Massangabe erfolgen oder ein Prozentwert bezüglich der Elternbreite angegeben werden.
[Das Attribut padding]
Das Attribut padding stellt eine Abkürzung zum Setzen der vier Auffüllwerte dar.
[Die Attribute border-top, border-bottom, border-right und border-left]
Diese vier Attribute setzen den Stil und die Farbe des Rahmens um ein Element. Der Stil wird unter Verwendung von Schlüsselwörtern angegeben: none, dotted, dashed, solid, double, groove, ridge, inset und outset. Weitere Informationen finden Sie im Abschnitt über border-style.
[Die Attribute boder-top-width, border-bottom-width, border-right-width und border-left-width]
Diese Attribute definieren einen physischen Rahmen um den Kasten, ähnlich dem Rahmen, der für HTML-Tabellen verwendet wird. Neben der Definition einer bestimmten Breite, angegeben in Ems, können Sie auch die Schlüsselwörter thin, medium und thick angeben. Die Angabe eines Masses unter Verwendung von Ems kann dazu führen, dass sich die Rahmenstärke mit der aktuellen Schrift ändert.
[Das Attribut border-width]
Das Attribut border-width stellt eine Abkürzung zum Setzen der vier Rahmenwerte dar.
[Das Attribut border-color]
Dieses Attribut bestimmt die Farbe der vier Rahmenteile und verwendet ein Schlüsselwort als Wert. Die Farben der einzelnen Seiten können nicht unabhängig voneinander gesetzt werden.
[Das Attribut border-style]
Das Erscheinungsbild des Rahmens kann variieren. Dafür werden die Werte none, dotted, dashed, solid, double, groove, ridge, inset oder outset verwendet. Die letzten vier Werte werden in 3D dargestellt, falls der Browser das unterstützt. Alternativ kann der Browser alle Variationen als durchgezogene Linie darstellen, ausser none.
Wie die Rahmenfarbe wird auch der Stil auf alle vier Seiten gleichzeitig angewendet.
[Das Attribut border]
Das Attribut border stellt eine Abkürzung dar, die Rahmenvariablen zu setzen, wobei Breite, Stil und Farbe angegeben werden können. Dabei werden die Werte für alle vier Seiten gleichzeitig gesetzt. Vorhergehende Einstellungen für dasselbe Element werden überschrieben.
[Das Attribut height]
Dieses Attribut setzt die Gesamthöhe des Kastens, der das Text- oder Bildelement enthält. Handelt es sich um Text, werden gegebenenfalls Bildlaufleisten angezeigt, so dass dem Anwender immer der gesamte Inhalt zur Verfügung steht. Handelt es sich um ein Bild, wird dessen Grösse angepasst, dass es in den vorgegebenen Bereich passt. Sie können einen physischen Wert angeben, oder auto, dann weist der Browser den Platz nach Bedarf zu.
[Das Attribut width]
Dieses Attribut setzt die Breite des Kastens, in dem das Element enthalten ist. Wenn es sich dabei um Text handelt, werden gegebenenfalls Bildlaufleisten angezeigt, damit dem Anwender der gesamte Inhalt zur Verfügung steht. Werden für ein Bild sowohl die Höhe als auch die Breite angebeben, und der Wert ist auto, wird das Ansichtsverhältnis des Bildes beibehalten.
[Das Attribut float]
Dieses Attribut setzt einen Wert ähnlich dem align-Attribut in HTML. Die drei möglichen Werte sind left, right und none. Der Wert none bewirkt, dass das Element an zufälliger Stelle angezeigt wird, die beiden anderen Werte erzwingen, dass es links oder rechts am Bildschirmrand ausgerichtet wird und der Text an der gegenüberliegenden Seite vorbeifliesst.
[Das Attribut clear]
Dieses Attribut entspricht dem clear-Attribut im <BR>-Tag von HTML und verwendet dieselben Schlüsselwörter, wie z.B. float. Wenn Sie right oder left angeben, werden alle Elemente unterhalb der Floating-Elemente auf der betreffenden Seite angezeigt. Wenn Sie none setzen, sind Floating-Elemente auf beiden Seiten erlaubt.
[Klassifizierung]
Diese Attribute steuern das allgemeine Verhalten von Elementen. Darüber hinaus gibt es hier Attribute für Listenelemente, die in HTML mit dem <LI>-Tag gekennzeichnet sind.
[Das Attribut display]
Dieses Attribut gibt an, wo und ob ein Stilelement eingesetzt werden soll. Vier Schlüsselwerte definieren sein Verhalten:
[Das Attribut white-space]
Der Name dieses Attributes ist etwas irreführend, weil er sich darauf bezieht, wie Leerzeichen und Zeilenumbrüche behandelt werden. Die Optionen sind normal (wobei zusätzliche Leerzeichen ignoriert werden), pre (wie in vorformatiertem HTML-Text) und nowrap (wobei Zeilen nur mit <BR> umgebrochen werden).
[Das Attribut list-style-type]
Dieses Element bestimmt, welche Aufzählungssymbole für eine Liste verwendet werden. Die Optionen sind disc, circle, square, decimal, lower-roma, upper-roman, lower-alpha, upper-alpha und none.
[Das Attribut list-style-image]
Statt eines Aufzählungsysmbols für ein Listenelement könnten Sie auch die URL für ein Bild angeben, das dort angezeigt werden soll. Wenn das Bild nicht zur Verfügung steht, wird das Aufzählungssymbol verwendet.
[Das Attribut list-style-position]
Die beiden Werte für dieses Attribut, inside und outside, bestimmen die Formatierung des Texts, der der list-item-Eigenschaft folgt. Der Wert outside, der als Standard festgelegt ist, rückt zusätzliche Zeilen eines Listenelements aus, wobei der Text der zweiten und aller folgenden Zeilen unter dem ersten Zeichen der ersten Zeile angezeigt wird. Der Wert inside bewirkt, dass die zweite und alle folgenden Zeilen an dem Listenelementsymbol ausgerichtet werden.
[Das Attribut list-style]
Dieses Attribut stellt eine Abkürzung dar, mit der die Werte für die Attribute list-style-type, list-style-image und list-style-position gesetzt werden.