Benutzer:RobbiRobb/CSS-Cheat-Sheet

Diese Seite soll als Cheat-Sheet für CSS-Seiten dienen. Mit CSS ist es möglich, das Design einer Vorlage oder Seite zu beeinflussen. Dies erweist sich allerdings als schwierig, wenn es zu HTML-Elementen kommt, die vom Parser übersetz werden; der Quelltext einer Seite also nicht dem entspricht, was das endgültige Element ist. Daher findet sich hier eine Übersicht über die am häufigsten Markup-Elemente und die dazu äquivalenten HTML-Ausschnitte. Neben diesem Markup lassen sich auch einige HTML-Elemente direkt im Wiki verwenden, so etwa <span> oder <div>. Auf diese kann wie sonst auch über direkt zugegriffen werden. Während hier eine allgemeine Übersicht zu finden ist, lässt sich mit Spezial:Vorlagen expandieren für jeden Fall der eigentliche HTML-Quelltext generieren und im Zweifel so herausfinden, was genau als Selektor benötigt wird.

Viele der nachfolgend gelisteten Elemente haben in allen Browsern Standard-Styles, die nicht explizit angegeben werden müssen, ein Überschreiben ist allerdings möglich. Für eine vollständige Liste dieser siehe hier. Für eine Liste allermöglichen CSS-Selektoren siehe hier.

Listen

Eine ungeordnete Liste (unordered list) lässt sich im Wiki wie folgt erstellen:

* Eintrag 1
* Eintrag 2
* Eintrag 3

Das HTML-Äquivalent dazu ist dann:

<ul>
	<li>Eintrag 1</li>
	<li>Eintrag 2</li>
	<li>Eintrag 3</li>
</ul>

Eine geordnete Liste (ordered List) lässt sich im Wiki wie folgt erstellen:

#Eintrag 1
#Eintrag 2
#Eintrag 3

Das HTML-Äquivalent dazu ist dann:

<ol>
	<li>Eintrag 1</li>
	<li>Eintrag 2</li>
	<li>Eintrag 3</li>
</ol>

Text

Kursive Texte (idiomatics) lassen sich im Wiki wie folgt erstellen:

''Kursiver Text''

Das HTML-Äquivalent dazu ist dann:

<i>Kursiver Text</i>

Fette Texte (boldface) lassen sich im Wiki wie folgt erstellen:

'''Fetter Text'''

Das HTML-Äquivalent dazu ist dann:

<b>Fetter Text</b>

Überschriften

Überschriften (heading) lassen sich im Wiki wie folgt erstellen:

== Überschrift zweite Ebene ==
=== Überschrift dritter Ebene ===
==== Überschrift vierter Ebene ====
===== Überschrift fünfter Ebene =====
====== Überschrift sechster Ebene ======

Das HTML-Äquivalent dazu ist dann:

<h2>Überschrift zweite Ebene<h2>
<h3>Überschrift dritter Ebene<h3>
<h4>Überschrift vierter Ebene<h4>
<h5>Überschrift fünfter Ebene<h5>
<h6>Überschrift sechster Ebene<h6>

Überschriften der Ebene 7 und höher existieren nicht. Überschriften der Ebene 1 sind für Artikeltitel reserviert und sollten nicht verwendet oder verändert werden.

Links

Links (anchor) lassen sich im Wiki wie folgt erstellen:

[[Linkziel]]
[https://www.externalurl.end/externes_ziel Externes Linkziel]

Das HTML-Äquivalent dazu ist dann:

<a href="/Linkziel">Linkziel</a>
<a href="https://www.externalurl.end/externes_ziel">Externes Linkziel</a>

Dateien

Dateien (image) lassen sich im Wiki wie folgt einbinden:

[[Datei:Dateiname.Dateiendung]]

Das HTML-Äquivalent dazu ist dann:

<img alt="Dateiname.Dateiendung" src="Dateiname.Dateiendung" />

Tabellen

Tabellen (table) lassen sich im Wiki wie folgt erstellen:

{|
|+ Caption
|-
! Heading
|-
| Content
|}

Das HTML-Äquivalent dazu ist dann:

<table>
	<caption>Caption</caption>
	<tbody>
		<tr>
			<th>Heading</th>
		</tr>
		<tr>
			<td>Content</td>
		</tr>
	</tbody>
</table>