Hilfe:Formatieren/Wikitext/CSS

Hilfeseitenliste • Übersicht

Portabilitäts-Warnung: Die hier beschriebenen Gestaltungsmöglichkeiten funktionieren nicht im Skin für Mobilgeräte! Für diesen Skin unterstützte Formatierungsoptionen findest du hier.

Inline-CSS ist CSS direkt im HTML-Quelltext. Dabei wird in einem öffnenden HTML-Tag ein Style-Attribut hinzugefügt (style="…"), welches zwischen den Anführungszeichen mehrere CSS-Anweisungen enthalten kann; diese Anweisungen beziehen sich auf alles, was von den entsprechenden HTML-Tags umschlossen wird. Eine CSS-Anweisung besteht aus einer Eigenschaft, einem Doppelpunkt, und dem Wert, den diese Eigenschaft haben soll. Mehrere CSS-Anweisungen werden hintereinander geschrieben und mit Strichpunkten voneinander getrennt.

In der Code-Ansicht sind diverse HTML-Tags erlaubt, wodurch unter Verwendung von Inline-CSS ausgefeilte Darstellungsänderungen ermöglicht werden. Im Allgemeinen benutzt man <div style="">…</div>-Tags für das Verändern eines ganzen Absatzes bzw. <span style="">…</span>-Tags für einzelne Sätze in einem Absatz. Außerdem kann Inline-CSS in Tabellensyntax angewendet werden, siehe dazu Hilfe:Tabellen/Wikitext#Inline-CSS.

Beispielsyntax

<span style="color: green; text-decoration: blink;">…</span>

Auf dieser Seite werden abschnittsweise für einzelne CSS-Eigenschaften die möglichen Werte und ihre Auswirkungen beschrieben.

Tabellen

Die folgenden Eigenschaften sind nicht alle exklusiv für Tabellen, kommen aber dafür oft in Frage.

Rand

Randbreite, -typ und -farbe

Diese drei Eigenschaften lassen sich alle über die Eigenschaft "border" festlegen; dabei werden hinter den Doppelpunkt bis zu drei Werte eingetragen, mit Leerzeichen getrennt, in der Reihenfolge Dicke-Typ-Farbe. Farbe und Breite können nur zusammen mit dem Typ vorgegeben werden.

<div style="border:___ … …;">…</div>

Werte für Dicke	Wirkung
thin	dünn
medium	mittel (wie hier der Außenrand)
thick	dick
__px	Dicke in Pixel

<div style="border: … ___ …;">…</div>

Werte für Typ	Wirkung
none	kein Rand
dotted	gepunktet
dashed	gestrichelt
solid	Linie
double	doppelte Linie (wie hier der Außenrand)
groove	gerillt (hängt von Farbe ab)
ridge	erhöht (hängt von Farbe ab)
inset	nach außen ansteigend (hängt von Farbe ab)
outset	nach außen abfallend (hängt von Farbe ab)

<div style="border:… … ___;">…</div>

Werte für Farbe	Wirkung
___	die gewählte Farbe; mögliche Werte stehen auf Hilfe:Farben
transparent	nicht sichtbar (wie hier der Außenrand)

Möchte man nur den Rand auf einer Seite verändern, so geht das mit "border-top", "border-bottom", "border-left" oder "border-right" (oben, unten, links, rechts).

Übereinanderliegende Ränder

{| style="border-collapse:___;"
…
|}

Werte	Wirkung
collapse	benachbarte Ränder überlagern sich zu einem Rand
separate	benachbarte Ränder bleiben getrennt (wie in dieser Tabelle)

Abstand benachbarter Ränder

Wenn benachbarte Ränder getrennt sind, lässt sich der Abstand zwischen ihnen mit border-spacing festlegen. Werden zwei Werte angegeben, so bezieht sich der erste davon auf Abstände nach oben/unten.

{| style="border-collapse:separate; border-spacing: ___ ___;"
…
|}

Werte	Wirkung
__px	Abstand in Pixel
__em	abhängig von der Schriftgröße (1em = Höhe der aktuellen Großschrift)
__ex	abhängig von der Schriftgröße (1ex = Höhe der aktuellen Kleinschrift)

Anzeige leerer Zellen

Bei separaten Rändern kann man einstellen, dass leere Zellen auch keine Formatierung erhalten.

{| style="border-collapse:separate; empty-cells: ___;"
…
|}

Werte	Wirkung	Beispiel
show	formatiert leere Zellen
hide	formatiert leere Zellen nicht

Abgerundete Ecken

Die Eigenschaft border-radius nimmt bis zu 8 Werte an; die ersten vier Werte bestimmen den Anfangsradius in der Horizontalen, die letzten vier den Endradius in der Vertikalen. Die Wert-Gevierte beziehen sich dabei auf die vier Ecken, beginnend mit oben links in Richtung Uhrzeigersinn. Lässt man einen vierten Wert weg, so übernimmt er den Wert von der Ecke gegenüber, ebenso bei nur zwei oder einem Wert. Auch kann das zweite Geviert komplett weggelassen werden, sodass die Radien in einer Ecke konstant bleiben haben.

<div style="border-radius: _ _ _ _ / _ _ _ _;">…</div>
<div style="border-radius: _;">…</div>

Werte	Wirkung
__px	Radius in Pixel
__em	abhängig von der Schriftgröße (1em = Höhe der aktuellen Großschrift)
__ex	abhängig von der Schriftgröße (1ex = Höhe der aktuellen Kleinschrift)

Außenabstand

Die Eigenschaft Margin nimmt bis zu vier Werte, die für die Abstände in die Richtungen oben, rechts, unten, links stehen (Eselsbrücke: Analoguhr). Wird der vierte Wert weggelassen, so greift dort der Wert von gegenüber, etc.

<div style="margin:_ _ _ _;">…</div>

Werte	Wirkung
auto	automatisch (wie hier)
__px	Abstand in Pixel
__em	abhängig von der Schriftgröße (1em = Höhe der aktuellen Großschrift)
__ex	abhängig von der Schriftgröße (1ex = Höhe der aktuellen Kleinschrift)
__%	abhängig von der Breite des Elternelements

Mit margin-right:auto bzw. margin-left:auto, lässt sich eine Box an den linken bzw. rechten Rand schieben, ohne dass sie von Text oder anderen Inline-Elementen umflossen wird.

Innenabstand

Die Eigenschaft Padding nimmt wie Margin bis zu vier Werte, die für die Abstände vom Rand nach innen gelten.

<div style="border-collapse:separate; padding:_ _ _ _;">…</div>

Werte	Wirkung
__px	Abstand in Pixel (hier 8px)
__em	abhängig von der Schriftgröße (1em = Höhe der aktuellen Großschrift)
__ex	abhängig von der Schriftgröße (1ex = Höhe der aktuellen Kleinschrift)
__%	abhängig von der Breite des Elternelements

Breite, Höhe

<div style="width:___;">…</div>

Werte	Wirkung
auto	automatisch (Standard)
__px	Breite in Pixel
__em	abhängig von der Schriftgröße (1em = Höhe der aktuellen Großschrift)
__ex	abhängig von der Schriftgröße (1ex = Höhe der aktuellen Kleinschrift)
__%	abhängig von der Breite des Elternelements (hier 90%)

<div style="height:___;">…</div>

Werte	Wirkung
auto	automatisch (Standard)
__px	Höhe in Pixel (hier 270px)
__em	abhängig von der Schriftgröße (1em = Höhe der aktuellen Großschrift)
__ex	abhängig von der Schriftgröße (1ex = Höhe der aktuellen Kleinschrift)
__%	abhängig von der Höhe des Elternelements

Mit max-height, min-height, max-width und min-width lassen sich Höhe und Breite auch in eine Richtung offenlassen.

Herausfließen verhindern

Mit overflow kann man festlegen, was passieren soll, wenn der Inhalt nach unten zu groß für die Box ist.

<div style="overflow:___;">…</div>

Werte	Wirkung
visible	nichts unternehmen, der Inhalt geht über die Box hinaus (Standard)
hidden	der Inhalt wird am Ende der Box abgeschnitten
scroll	der Inhalt bekommt Scrollleisten
auto	der Inhalt bekommt Scrollleisten genau dann wenn der Inhalt sonst überfließen würde

Position Tabellenüberschrift

{| style="caption-side:___;"
|+ »Tabellenüberschrift«
…
|}

Werte	Wirkung
top	Überschrift oben
bottom	Überschrift unten (wie hier)

Umflossenes Element am Rand

<div style="float:___;">…</div>

Werte	Wirkung
none	erlaube keinen Umfluss; Element wird nicht verschoben
right	an die rechte Seite, Umfluss links
left	an die linke Seite, Umfluss rechts (wie hier)

Die Float-Eigenschaft schiebt das Element an den Rand und lässt darauf folgende Inline-Elemente wie etwa Text um das Element herumfließen.

Schatten

Tabellen und Div-Abschnitte können mittels box-shadow einen Schatten schlagen. Die ersten beiden Werte (Position des Schattens nach rechts/unten) sind Pflicht, alle anderen können weggelassen werden.

<div style="box-shadow:___ ___ ___ ___ ___ ___;">…</div>

Werte für 1-4 (1,2 auch negativ)	Wirkung 1,2	Wirkung 3	Wirkung 4
__px	Position in Pixel	Länge auslaufender Schatten	zusätzliche Größe Schatten
__em	abhängig von der Schriftgröße (1em = Höhe der aktuellen Großschrift)
__ex	abhängig von der Schriftgröße (1ex = Höhe der aktuellen Kleinschrift)
Werte für 5	Wirkung
___	Schattenfarbe; mögliche Werte stehen auf Hilfe:Farben
Wert für 6	Wirkung
inset	bewirkt, dass der Schatten vom Rahmen in die Box hineingeworfen wird

Text

Textfarbe

<div style="color:___;">…</div>

Werte	Wirkung
___	Farbwert; mögliche Werte stehen auf Hilfe:Farben

Schriftgröße

<div style="font-size:___;">…</div>

Werte	Wirkung
xx-small x-small small medium large x-large xx-large	verschiedene feste Größen (hier "large")
__px	Schriftgröße in Pixel ("20px")
__em	abhängig von der Schriftgröße draußen ("2em")
__ex	abhängig von der Schriftgröße draußen ("2ex")
__%	abhängig von der Schriftgröße draußen ("70%")

Schriftbreite

<div style="letter-spacing:___;">…</div>

Werte	Wirkung
normal	normal
__px	Abstand Buchstaben in Pixel ("2px")
__em	abhängig von der Schriftgröße draußen ("0.2em")
__ex	abhängig von der Schriftgröße draußen ("-0.08ex")

Zeilenhöhe

<div style="line-height:___;">…</div>

Werte	Wirkung
normal	normal
__px	Zeilenhöhe in Pixel ("30px") foo
__em	abhängig von der Schriftgröße draußen ("1.7em") foo
__ex	abhängig von der Schriftgröße draußen ("1.7ex") foo
__%	abhängig von der Schriftgröße draußen ("166%") foo

Textorientierung

<div style="text-align:___;">…</div>

Werte	Wirkung
right	rechtsbündig
center	mittig
left	linksbündig
justify	Blocksatz

Vertikale Ausrichtung

<span style="vertical-align:___;">…</span>

Werte	Wirkung
top	oben
middle	mittig
bottom	unten
sub	wie tiefgestellt
super	wie hochgestellt
__px	Erhöhung in Pixel ("40px")
__em	abhängig von der Schriftgröße ("1.7em")
__ex	abhängig von der Schriftgröße ("-3ex")

Mit vertical-align kann mehr als nur Text ausgerichtet werden.

Texteinrückung

<div style="text-indent:___;">…</div>

Werte	Wirkung
__px	Einrückung in Pixel ("20px")
__em	abhängig von der Schriftgröße draußen ("1.2em")
__ex	abhängig von der Schriftgröße draußen ("1ex")
__%	abhängig von der Breite des Elternelements ("25%")

Kursive Schrift

<div style="font-style:___;">…</div>

Werte	Wirkung
normal	normal
italic	kursiv
oblique	erzwungen kursiv

Fettschrift

<div style="font-weight:___;">…</div>

Werte	Wirkung
normal	normal
bold	fett
bolder	fetter als der Text draußen
lighter	nicht ganz so fett wie der Text draußen

Großschrift

<div style="font-variant:___;">…</div>

Werte	Wirkung
normal	normal
small-caps	Großschrift mit verkleinerten Kleinbuchstaben

Kleinschrift

<div style="text-transform:___;">…</div>

Werte	Wirkung
lowercase	Alles in Kleinbuchstaben
capitalize	jeder Anfangsbuchstabe groß
uppercase	Alles in Großbuchstaben

Textmarkierungen

<div style="text-decoration:___;">…</div>

Werte	Wirkung
none	normal
underline	unterstrichen
overline	überstrichen
line-through	durchgestrichen
blink	blinkender Text

Textschatten

Die ersten beiden Werte (Position des Schattens nach rechts, unten) sind Pflicht, alle anderen können weggelassen werden.

<div style="text-shadow:___ ___ ___ ___;">…</div>

Werte für 1-3 (1,2 auch negativ)	Wirkung 1,2	Wirkung 3
__px	Position in Pixel	Länge auslaufender Schatten
__em	abhängig von der Schriftgröße (1em = Höhe der aktuellen Großschrift)
__ex	abhängig von der Schriftgröße (1ex = Höhe der aktuellen Kleinschrift)
Werte für 4	Wirkung
___	Schattenfarbe; mögliche Werte stehen auf Hilfe:Farben

Schriftart

<span style="font-family:'Times New Roman',Georgia,Serif;">…</span>

An das Font-family-Attribut lassen sich eine Liste von Schriftarten übergeben, von denen der Internetbrowser die erste verfügbare für den umschlossenen Text nutzt. Als treffsichere Alternative kann zuletzt immer eine generische Gruppenbezeichnung wie serif oder sans-serif benutzt werden.

Hintergrundfarbe

<div style="background-color:___;">…</div>

Werte	Wirkung
transparent	Hintergrund bleibt durchsichtig (Standard)
___	Hintergrundfarbe; mögliche Werte stehen auf Hilfe:Farben

Listen

Listen lassen sich mit der Eigenschaft list-style gestalten, welche bis zu drei Werte annimmt: Typ und Position der Listenpunkte, sowie eine URL zu einer Grafikdatei, die als Listenpunkt verwendet werden soll (in dieser Reihenfolge).

Inline-CSS bei Listen kann nur mit purem HTML (Hilfe:HTML/Listen) benutzt werden.

<ol style="list-style:_ … …;"><li>…</li><li>…</li>…</ol>

Werte für Typ	Wirkung
none	Kein Listenpunkt
circle	Ring
disc	Kreis
square	Quadrat
decimal	Zahl
decimal-leading-zero	Zahl mit führender Null
lower-latin	Kleinbuchstaben
upper-roman	Römische Zahlen in Großbuchstaben

<ol style="list-style:… _ …;"><li>…</li><li>…</li>…</ol>

Werte für Position	Wirkung
inside	die Listenpunkte stehen dort, wo der Text beginnen würde
outside	die Listenpunkte sind nach links verschoben, sodass der Text dort beginnt, wo auch normaler Text beginnen würde

<ol style="list-style:… … _;"><li>…</li><li>…</li>…</ol>

Werte für Grafikeinbindung	Wirkung
none	keine Datei, stattdessen der normale Listenpunkt
url('___')	lädt eine Grafikdatei als Listenpunkt

Umrahmung

Die Eigenschaft outline setzt einen Rahmen außen um das Objekt (also auch um den Außenabstand herum). Outline wird genauso gesetzt wie border.

Transparenz

<div style="opacity:___;">…</div>

Werte	Wirkung
___	Dezimalzahl von 0.0 (volltransparent) bis 1.0 (keine Transparenz); hier 0.4

Erlaube keinen umfließenden Text

… oder ähnliche Inline-Elemente.

<div style="clear:___;">…</div>

Werte	Wirkung
none	erlaube Umfluss
right	kein Umfluss rechts
left	kein Umfluss links
both	überhaupt kein Umfluss

Diese Eigenschaft wird gerne in <br style="clear:both;" /> am Ende eines Abschnittes benutzt, um zu verhindern, dass von unten nichts nach oben reinrutscht.

Elemente verbergen

<div style="visibility:___;">…</div>

Werte	Wirkung	Beispiel
visible	normal	Lirum Larum Löffelstiel
hidden	verbirgt das Element, gibt seinen Platz nicht frei	Lirum Larum Löffelstiel

Elemente entfernen

<div style="display:___;">…</div>

Werte	Wirkung	Beispiel
none	verbirgt das Element komplett und gibt seinen Platz frei	Lirum Larum Löffelstiel
inline	"in Linie", oder anders gesagt, bleibt in der Zeile	Lirum Larum Löffelstiel
block	quasi sein eigener Absatz, so wie ein zentriertes Bild	Lirum Larum Löffelstiel

Links

• CSS-Referenz (englisch)

Mehr Hilfe

• Ein Stichwortverzeichnis zu verschiedensten Hilfeseiten findest du auf Hilfe:Index.
• Einen geordneten Einstieg zur Hilfe gibt es auf der Seite Hilfe:Übersicht.
• Fragen an andere Benutzer kannst du in den Diskussionen des Community-Wikis stellen.
• Anmerkungen zu dieser Hilfeseite kannst du auf der dazugehörigen Diskussionsseite hinterlassen.
• Um Fehler zu melden, nutze bitte das entsprechende Kontaktfomular.