FANDOM


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[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 Bearbeiten

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

Rand Bearbeiten

Randbreite, -typ und -farbe Bearbeiten

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 Bearbeiten

{| 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 Bearbeiten

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 Bearbeiten

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 Bearbeiten

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 Bearbeiten

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 Bearbeiten

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 Bearbeiten

<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 Bearbeiten

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 Bearbeiten

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

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

Umflossenes Element am Rand Bearbeiten

<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 Bearbeiten

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 Bearbeiten

Textfarbe Bearbeiten

<div style="color:___;">…</div>
Werte Wirkung
___ Farbwert; mögliche Werte stehen auf Hilfe:Farben

Schriftgröße Bearbeiten

<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 Bearbeiten

<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 Bearbeiten

<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 Bearbeiten

<div style="text-align:___;">…</div>
Werte Wirkung
right rechtsbündig
center mittig
left linksbündig
justify Blocksatz

Vertikale Ausrichtung Bearbeiten

<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 Bearbeiten

<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 Bearbeiten

<div style="font-style:___;">…</div>
Werte Wirkung
normal normal
italic kursiv
oblique erzwungen kursiv

Fettschrift Bearbeiten

<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 Bearbeiten

<div style="font-variant:___;">…</div>
Werte Wirkung
normal normal
small-caps Großschrift mit verkleinerten Kleinbuchstaben

Kleinschrift Bearbeiten

<div style="text-transform:___;">…</div>
Werte Wirkung
lowercase Alles in Kleinbuchstaben
capitalize jeder Anfangsbuchstabe groß
uppercase Alles in Großbuchstaben

Textmarkierungen Bearbeiten

<div style="text-decoration:___;">…</div>
Werte Wirkung
none normal
underline unterstrichen
overline überstrichen
line-through durchgestrichen
blink blinkender Text

Textschatten Bearbeiten

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 Bearbeiten

<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 Bearbeiten

<div style="background-color:___;">…</div>
Werte Wirkung
transparent Hintergrund bleibt durchsichtig (Standard)
___ Hintergrundfarbe; mögliche Werte stehen auf Hilfe:Farben

Listen Bearbeiten

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 Bearbeiten

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 Bearbeiten

<div style="opacity:___;">…</div>
Werte Wirkung
___ Dezimalzahl von 0.0 (volltransparent) bis 1.0 (keine Transparenz); hier 0.4

Erlaube keinen umfließenden Text Bearbeiten

… 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 Bearbeiten

<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 Bearbeiten

<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 Bearbeiten

Mehr HilfeBearbeiten


  1. Im Beispiel wird der Text, für den hier die drei Punkte stehen, in einer eigenen Farbe (Grün) und mit einer besonderen Hervorhebung (blinkend) dargestellt.
Nutzung von Community-Inhalten gemäß CC-BY-SA , sofern nicht anders angegeben.