- Portabilitäts-Warnung: Nicht alle hier beschriebenen Gestaltungsmöglichkeiten funktionieren im Skin für Mobilgeräte. Weitere 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[1]
<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
|
visible |
normal
|
hidden |
verbirgt das Element, gibt seinen Platz nicht frei
|
Elemente entfernen
<div style="display:___;">…</div>
| Werte |
Wirkung
|
none |
verbirgt das Element komplett und gibt seinen Platz frei
|
inline |
umflossen, wie ein Bild mitten im Text
|
block |
nicht umflossen, wie ein zentriertes Bild
|
Links
Mehr Hilfe
