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.
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).
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.
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.
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.
<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.
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.
Diese Eigenschaft wird gerne in <br style="clear:both;" /> am Ende eines Abschnittes benutzt, um zu verhindern, dass von unten nichts nach oben reinrutscht.
Lerne auf der Seite Fandom-Universität wie du Fandom benutzt: Kurze, informative Videos rund um Fandom.
Um die Betreiber dieser Webseite zu sprechen, lies bitte Hilfe:Kontakt!
↑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.
Bearbeiten
