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.
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.
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.
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.
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.
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
<spanstyle="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.
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
↑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.
