Benutzer:Stefan2700/Spielwiese
| Audi A6 (Modellcode) | von - bis | Fahrgestellnummer |
|---|---|---|
| Blinker | Code | sehr viel PLATZ für Bilder |
| Begrenzungslicht | Code | |
| Scheinwerfer | Code 1 | |
| Nebelscheinwerfer | Code | |
| Tagfahrlicht | Code | |
| Lage der Genehmigungsnummer | Code | |
| Original / Nachbau | Code |
Aha - Rätsel gelöst, doppelte geschweifte Klammer und Hilfe, dann erscheint diese Leiste am rechten Rand. →
So weit so gut, wie komme ich zur Vorlage ?
Testvorlage
| Alpha | Beta | Gamma |
| Delta | Epsilon | Zeta |
| FRONT | Typ | Gen. | ||
|---|---|---|---|---|
| Begrenzungslicht | LED | Beispiel | Beispiel | BILD |
| Abblendlicht | Xenon | Beispiel | Beispiel | |
| Fernlicht | Xenon | Beispiel | Beispiel | |
| Blinker | Beispiel | Beispiel | Beispiel | |
| Nebelscheinwerfer | Halogen | Beispiel | Beispiel | Beispiel |
| Tagfahrlicht | LED | Beispiel | Beispiel | Beispiel |
| Abbiegelicht | - - - | Beispiel | Beispiel | Beispiel |
vertical-align
Diese Eigenschaft gibt es seit Version CSS 1
Die Eigenschaft vertical-align beeinflusst die vertikale Ausrichtung von Text in einer Zeile, bezogen auf das Elternelement, das ein Inline-Element sein muß. Man kann damit also kleineren Text an größerem Text oder auch an Grafiken ausrichten - nicht aber die vertikale Positionierung in einem Blockelement (z.B. div-Element) direkt bestimmen. Außerdem kann Text damit vertikal in Tabellenzellen positioniert werden. Der Normalwert ist dabei »baseline« - die Grundlinie.
border
Beispiel
Legt die drei Angaben Breite (border-width), Farbe (border-color) und Art (border-style) für den gesamten Rahmen fest.
style="border:5px solid #0000ff;" - Ein blauer, durchgezogener Rahmen
style="background-color:#efefef;" - Eine Zelle mit grauer Hintergrunsfarbe
style="padding:35px"
Angeben kannst du ein bis vier Werte, die wie folgt berechnet werden:
- Ein Wert
- Abstand oben, unten, links und rechts
- Zwei Werte
- Der erste Wert für den Abstand oben und unten, der Zweite links und rechts
- Drei Werte
- Der erste Wert für den Abstand oben, der Zweite links und rechts und der Dritte unten
- Vier Werte
- Der erste Wert für den Abstand oben, der Zweite rechts, der Dritte unten und der Vierte links
margin = Außenabstand
Diese Eigenschaft gibt es seit Version: CSS 1
Erzeugt einen transparenten Abstand zu einem anderen Element. Der Abstand wirkt sich also nicht auf die Hintergrundfarbe aus.
Es gibt verschiedene Wege, einem Element den gewünschten Abstand zuzuweisen. Im Folgendem werden alle Wege geschildert.
Kurzschreibweise
Bei der Kurzschreibweise reicht margin, und der oder die Wert(e).
- Ein Wert
- Abstand oben, unten, links und rechts
- Zwei Werte
- Der erste Wert für den Abstand oben und unten, der Zweite Wert für links und rechts
- Drei Werte
- Der erste Wert für den Abstand oben, der Zweite links und rechts und der Dritte unten
- Vier Werte
- Der erste Wert für den Abstand oben, der Zweite rechts, der Dritte unten und der Vierte links
margin-right - Außenabstand rechts:
Diese Eigenschaft gibt es seit Version: CSS 1
Erzeugt rechts von dem Element einen Abstand zu anderen Element. Außenabstände kannst du als transparenten Rand um ein Element betrachten.
font
Die Kurzform für Schriftformatierung heißt font. Sie fasst die sechs einzelnen Eigenschaften für font-size, line-height, font-weight, font-style, font-variant und font-family zusammen.
Die korrekte Reihenfolge ist: font-style, font-variant, font-weight, font-size/line-height, font-family
font-style - font-family:verdana, sans-serif (ist veranda nicht vorhanden wird sans-serif verwendet)
font-variant - font-variant:small-caps; Durch small-caps werden alle Buchstaben wie Großbuchstaben ausgegeben (Kapitälchen).
"Echte" Großbuchstaben, wie zum Beispiel bei Namen und Dingen, werden noch größer angezeigt. Sie heben sich also ab.
font-weight - font-weight:bold; Diesem Absatz ist das Schriftgewicht bold durch die Anweisung
font-weight zugewiesen worden. Die Schrift wird also fett dargestellt.
font-size - font-size:1em; oder font-size:150%; oder font-size:small
line-height .zahl line-height: 1.5; .prozent line-height: 150%; .em line-height: 1.5em;
font-family - font-family:verdana, sans-serif 'arial black';
Texteinrückung: text-indent
Diese Eigenschaft gibt es seit Version: CSS 1
Mit text-indent kann die erste Zeile eines Absatzes eingerückt werden. Auch eine „Textausrückung“ nach links ist möglich, dann muß man einen negativen Wert für »text-indent« verwenden.
Elemente umfließen lassen: float
Beispiel
Läßt andere Elemente um ein mit float formatiertes Element herumfließen.
Irgendein Text
<img style="width:150" height="60" src="images/bild.gif" style="float:left;">
align="right" trennlinie
Möglichkeiten zur Formatierung von Texten
| Was du schreibst | Wie es dargestellt wird |
|---|---|
Der geschriebene Text erscheint so, wie er eingegeben wurde. Zeilenumbrüche werden vom Browser automatisch durchgeführt.<br/><br/> Um einen Zeilenumbruch an einer gewünschten Stelle zu erzwingen, kann das Steuereichen <br/> verwendet werden. <br/> Der Zeilenabstand beträgt 1pt. |
Der geschriebene Text erscheint so, wie er eingegeben wurde. Zeilenumbrüche werden vom Browser automatisch durchgeführt. Um einen Zeilenumbruch an einer gewünschten Stelle zu erzwingen, kann das Steuereichen |
Mit einer Leerzeile zwischen zwei Zeilen kann ebenfalls ein Zeilenumbruch erzwungen werden. Der Zeilenabstand beträgt dabei 1,5pt. |
Mit einer Leerzeile zwischen zwei
Zeilen kann ebenfalls ein Zeilenumbruch erzwungen werden. Der Zeilenabstand beträgt dabei 1,5pt. |
ein (erzwungener) Zeilenum<br />bruch (sollte nur sparsam verwendet werden)
|
ein (erzwungener) Zeilenum bruch (sollte nur sparsam verwendet werden) |
''kursiv''
|
kursiv |
'''fett'''
|
fett |
'''''fett und kursiv'''''
|
fett und kursiv |
<big>groß</big>
|
Text groß |
<small>klein</small>
|
Text klein |
<s>durchgestrichen</s> oder <s>durchgestrichen</s>
|
Text |
<u>unterstrichen</u>
|
Text unterstrichen |
Text <sup>hochgestellt</sup>
|
Text hochgestellt |
Text <sub>tiefgestellt</sub>
|
Text tiefgestellt |
== Überschrift Ebene 2 ==
|
|
=== Überschrift Ebene 3 ===
|
|
==== Überschrift Ebene 4 ====
|
|
===== Überschrift Ebene 5 =====
|
|
====== Überschrift Ebene 6 ======
|
|
Siehe auch: HTML-Hn-Header und MediaWiki
|
Die Ebene 1 ist für den Seitentitel reserviert und innerhalb von Artikeln unerwünscht. In Artikeln werden neue Abschnitte daher mit Überschriften ab der Ebene 2 begonnen.
|
* eins</nowiki><br /> * zwei<br /> ** zwei-eins<br /> ** zwei-zwei<br /><nowiki> * drei |
Es ist zu beachten, dass Leerzeilen zwischen den Aufzählungen auch zu einem semantischen Bruch führen. |
# eins</nowiki><br /> # zwei<br /> ## zwei-eins<br /> ## zwei-zwei<br /><nowiki> # drei |
|
; Definitionsliste</nowiki><br /> : Eine Definition<br /> : Eine andere Definition<br /> ; Begriff<br /><nowiki> : Definition des Begriffs |
Definitionslisten können zur Unterscheidung verschiedener Fachbegriffe benutzt werden (Beispiel). Sie sind nicht dafür verwendbar, durch das Semikolon Fettschreibung oder Zwischenüberschriften zu erzeugen, da die Auszeichnung vom Stylesheet abhängig ist.
|
vorformatierter Text</nowiki><br /> mit einem Leerzeichen<br /><nowiki> # am Zeilenanfang |
vorformatierter Text mit einem Leerzeichen # am Zeilenanfang |
Für Gedichte und ähnliche Texte:<br /> <poem><br /> Ob ich Biblio- was bin?<br /> phile? „Freund von Büchern“ meinen Sie?<br /> Na, und ob ich das bin!<br /> Ha! und wie!<br /> </poem><br /><nowiki> |
Ob ich Biblio- was bin? |
<code>Markiert Text als Quelltext</code>
|
Markiert Text als Quelltext
|
Dies ist ein<!-- unsichtbarer Kommentar-->.
|
Dies ist ein. |
Automatischen Zeilenumbruch zwischen logisch zusammengehörenden Elementen verhindern (sparsam zu verwenden): geschütztes Leerzeichen („non-breaking space“): 10 kg, Dr. Best |
Automatischen Zeilenumbruch zwischen logisch zusammengehörenden Elementen verhindern (sparsam zu verwenden):
geschütztes Leerzeichen („non-breaking space“): 10 kg, Dr. Best |
| {{Zitat|Zitierter Text (als Blockzitat, für mehrzeilige Zitate in ganzen Sätzen).}} |
|
| oder {{"|kurzer zitierter Text}}, auch mitten im Satz. | oder „kurzer zitierter Text“, auch mitten im Satz. |
<span style="color:#00FF7F"> Text in Farbe </span>
|
Text in Farbe |
<p style="color:#FF0000"> ganzer Absatz in Farbe </p>
|
ganzer Absatz in Farbe |
| Hintergrund für ein oder wenige Wörter | |
<span style="background-color:yellow"> Beispiel </span>
|
Beispiel |
| Hintergrund eines Absatzes | |
<p style="background-color:yellow"> Absatz </p>
|
Absatz |
| Farbiger Text + Hintergrund eines Absatzes | |
<p style="color:darkgreen; background-color:yellow"> Absatz </p>
|
Absatz |
| Hintergrund einer Tabellenzelle | |
style="background-color:#fedbca"| Text
|
Text |
Textgestaltung in Farbe
Tabellen und Rahmen
In der MediaWiki-Syntax beginnt jede Tabelle mit einer geschweiften Klammer { gefolgt von einem senkrechten Strich | und endet mit einem Strich | gefolgt von einer geschweiften Klammer }.
Die öffnende Klammer muss als erstes Zeichen der Zeile stehen.
Jede Zelle innerhalb der beiden Klammern beginnt mit einem senkrechten Strich. Dieser macht den Beginn einer neuen Zelle deutlich.
Direkt hinter diesem Strich steht entweder der Inhalt der Zelle oder Attribute (zum Beispiel Rowspanning, siehe unten cellspacing border=1
Der Strich kann am Anfang der Textzeile stehen oder auch mittendrin, dann muss man zwei Striche schreiben. Jedoch sollte man ihn nur am Anfang einer Textzeile verwenden, um die Tabellenstruktur übersichtlich zu halten. Wichtig ist auch, dass jede Zelle mit einem Zeilenumbruch beendet wird.
| Eingabe | Ergebnis | ||||||
|---|---|---|---|---|---|---|---|
{| |
|
| Eingabe | Ergebnis | ||||||
|---|---|---|---|---|---|---|---|
{| |
|
Rahmen
| Border1 | Border1 |
| Border2 | Border1 |
| Border3 | Border3 |
| Border4 | Border4 |
| Border5 | Border5 |
|- | Zelle 3 | Zelle 4 |- | Zelle 5 | Zelle 6 |}
| A | B | C |
|---|---|---|
| Zelle 1 | Zelle 2 | |
| Zelle 3 | Zelle 4 | Zelle 5 |
Spaltenbreiten
Spaltenbreiten können relativ und absolut angegeben werden. Die Breitenangabe ist nur bei einer Zelle der Spalte notwendig und sinnvoll. Sind nur einige Spalten zu schmal oder zu breit, genügt eine relative Breitenangabe in nur diesen Spalten. Ist der Inhalt einer Zelle größer als die vorgegebene Spaltenbreite, dann wird die Spalte automatisch erweitert und die Vorgabe der Spaltenbreite damit unwirksam.
| Eingabe | Ergebnis | ||||||
|---|---|---|---|---|---|---|---|
{| border="1" |
| ||||||
{| border="1" |
|
Die absolute Angabe in der Einheit em sorgt bei allen Textgrößen für gleiche Darstellung. Die absolute Angabe in Pixeln mit style="width:10" oder style="width:10px" oder style="width:10px" soll nur beim Einbinden von Grafiken eingesetzt werden.
Zellenabstände mit cellspacing und cellpadding
Mit cellspacing kann der Abstand zwischen den Zellen festgelegt werden. Je größer der Cellspacing-Wert, desto breiter wird der Steg zwischen den Zellen. Mit cellpadding bestimmt man den Abstand des Zellinhaltes vom Zellrahmen. Das CSS-Attribut style="border-collapse:collapse" lässt zusammenfallende Zellumrandungen verschwinden.
| Eingabe | Ergebnis | ||||||
|---|---|---|---|---|---|---|---|
{| |
| ||||||
{| border="1" |
| ||||||
{| border="1" cellspacing="10" cellpadding="0" |
| ||||||
{| border="1" cellspacing="0" cellpadding="10" |
| ||||||
{| border="1" cellspacing="10" cellpadding="10" |
| ||||||
{| border="1" cellspacing="0" cellpadding="10" style="border-collapse:collapse" |
|
Ausrichtung
Genau wie in HTML kann man den Inhalt von Zellen in der Tabelle unterschiedlich ausrichten. Dabei kann man die Attribute einzelnen Zellen oder auch ganzen Zeilen zuweisen. Für die Ausrichtung wird der Einsatz von CSS-Befehlen empfohlen, das vertical-align gilt jeweils für die ganze Zeile, das text-align nur für die jeweilige Zelle.
| Eingabe | Ergebnis | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{| class="wikitable" |
|
Andere HTML-Formatierungen
Mit der neuen Wiki-Syntax ist es möglich, alte HTML-Formatierungen zu übernehmen, zum Beispiel Zellen farbig zu hinterlegen (style="background:#ABCDEF", Farbtabelle) oder Rahmen andere Farben zu geben. Diese Vorgehensweise ist bei neuen Tabellen aber nicht empfohlen.
| Eingabe | Ergebnis | ||||
|---|---|---|---|---|---|
{| |
|
Ein komplexeres Beispiel
- horizontal und vertikal verbundene Zellen
- strukturierter, zweizeiliger Tabellenkopf
- größere Spaltenbreite bei einer Spalte
| Eingabe | Ergebnis | |||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{| class="wikitable" |
| |||||||||||||||||
Formatvorlagen
Einige Benutzer haben Vorlagen erstellt, um die Formatierung zu vereinfachen. Anstatt sich an die Tabellenparameter erinnern zu müssen, kann eine Formatvorlage verwendet werden. Diese ist nach dem {| einzufügen. Die Verwendung ermöglicht ein konsistentes Tabellenlayout, eine Erleichterung beim Fehlerhandling, die Einhaltung der Konvention „Farben verwenden“ (Farben) sowie einfache Anpassung des Layouts bei allen Tabellen.
Beispielsweise lässt sich mit der Vorlage {{Testvorlage}}, die den Code class="wikitable hintergrundfarbe2" style="border-collapse: separate; border-spacing: 2px;" enthält, und den vorhandenen Farbvorlagen (siehe „Farben verwenden“) folgende Tabelle erstellen, welche im Quelltext keine kompliziert erscheinenden Formatierungsparameter mehr enthält:
| Eingabe | Ergebnis | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{| {{Testvorlage}} |
|
Alle Vorlagen zur Tabellenformatierung stehen in der Kategorie:Vorlage:Tabellenformatierung.
Ausprobieren
|
Willkommen beim Textkasten Nr. 1!
[[Datei:]]
Dieser Kasten erscheint in unterschiedlicher Formatierung
|
Willkommen beim Textkasten Nr. 1! 5px pad 2em font size 180%
[[Datei:]]
Dieser Kasten erscheint in unterschiedlicher Formatierung 3px padding 2, 5, 5, 2, 20px |
Überschrift
Kasten Nummer drei
style="border:1px solid #BFB086; background-color:#ffebac; padding:0.2em; margin:0; font-size: 110%; font-weight:bold; text-indent:0.5em; margin-top:1.0em; margin-right:10px"
Kasten Nummer 3
style="border:1px solid #BFB086; border-top:0px solid #FFFFFF; background-color:#FFFFFF; margin-right:10px; padding:0.2em 0.8em 0.4em 0.8em;"
"font-size:80%; text-align:right;"
border 3px solid blue padding:3.0em
Kasten Nummer 3
border: 1px solid #FFFFFF oder thin solid blue text-indent kann die erste Zeile eines Absatzes eingerückt werden margin top: Außenabstand oben
Neuer Absatz
Überschrift 111
style="border:5px solid blue; background-color: green; padding:2em 2em 0.5em 0.5em; font-size:80; text-indent:0.5em" Textfeld 111
style="border:3px solid black; background-color: #ffebac" |
Überschrift 111
style="border: 5xp ridge black; background-color: yellow; padding:0.1em 0.1em 1.0em 3.0em; font-size:80; text-indent:0.5em" Textfeld 111 ABC EVN REM NSA FBI CIA GOV BKA SID LKA BLS
|
Überschrift 111
Textfeld 111 ABC EVN REM NSA FBI CIA GOV BKA SID LKA BLS
|
1
Damit es einen Rahmen geben kann, ist eine Tabelle erforderlich. Das Gerüst sieht so aus:
{| style="width:100%"|
|-
<div style="border background color padding ..."> TEXT TEXT TEXT </div>
|-
|style="width:33%;" + zB align|
<div style="..."ÜBERSCHRIFT </div>
<div style="..."> TEXT </div>
|style="width:33%;" + zB align |
<div style="...."> ÜBERSCHRIFT </div>
<div + ATTRIBUTE> TEXT </div>
|style="width:33%;" + ATTRIBUTE |
<div + ATTRIBUTE> ÜBERSCHRIFT </div>
<div + ATTRIBUTE> TEXT </div>
|}
Die Größenangaben stehen immer zwischen zwei ||
border
- border
- Legt die drei Angaben - Breite Art und Farbe für den gesamten Rahmen fest.
- style="border:5px solid #0000ff" - Ein blauer, durchgezogener Rahmen
- solid, dotted, dashed, double, groove, ridge, inset, outset.
background-colour
- Die Farben können entweder in Worten "green" oder Codes #0000ff angegeben werden.
- style="background-colour:#0000ff"
padding
- Abstand Text - Rahmen
- Ein Wert - Abstand oben, unten, links und rechts
- Zwei Werte - Der erste Wert für den Abstand oben und unten, der Zweite links und rechts
- Drei Werte - Der erste Wert für den Abstand oben, der Zweite links und rechts und der Dritte unten
- Vier Werte - Der erste Wert für den Abstand oben, der Zweite rechts, der Dritte unten und der Vierte links
- padding-top/right/left/bottom ist auch möglich.
margin
- bezeichnet den Außenabstand, wie weit sind die Elemente voneinander entfernt.
- Außenabstände können also als transparenter Rand um ein Element betrachten werden.
- Ein Wert - Abstand oben, unten, links und rechts
- Zwei Werte - Der erste Wert für den Abstand oben und unten, der Zweite Wert für links und rechts
- Drei Werte - Der erste Wert für den Abstand oben, der Zweite links und rechts und der Dritte unten
- Vier Werte - Der erste Wert für den Abstand oben, der Zweite rechts, der Dritte unten und der Vierte links
- style="margin-right:2em" oder "margin:2.0em 1.0em"
- margin-top/right/left/bottom ist auch möglich.
font
- Font steht für die Schrift
- font-size:150%
- font-style:veranda
align
float
