Hilfe:CSS

aus Wikipedia, der freien Enzyklopädie
Wechseln zu: Navigation, Suche

CSS (Cascading Style Sheets) ist eine Technik, mit der sich Wiki-Seiten wie auch Seiten im Internet allgemein mit Farben und Layout-Spezifikationen versehen lassen.

Es gibt folgende Möglichkeien:

  1. Einen einzelnen Text mit besonderer Dekoration versehen. Das ist Gegenstand dieser Hilfeseite.
  2. Alle Seiten mit einem schematischen Stil versehen
    • für die persönlichen Wünsche einzelner Benutzer.
    • für das ganze Projekt (nur Administratoren möglich) oder in der weltweit eingesetzten Software; siehe Skin/MediaWiki.
Icon
Die individuelle, persönliche Gestaltung der Wiki-Seiten wird unter WP:CSS beschrieben.

Formatierung im Quelltext einer Seite[Bearbeiten | Quelltext bearbeiten]

Ausdrücklich angegebene Stilvorgaben in einem einzelnen Element überschreiben (fast[1] immer) die allgemeinen Vorgaben für die Seite.

Die Angaben werden in einem Attribut style="" gemacht, wobei zwischen den Anführungszeichen die CSS-Deklaration angegeben wird.

Es gibt zwei Möglichkeiten, im Wikitext diese Anweisung zu geben:

  1. Tabellen-Elemente; namentlich {| für die gesamte Tabelle, |- für eine ganze Tabellenzeile, zwischen zwei | für eine einzelne Tabellenzelle. Näheres siehe Hilfe:Tabellen.
  2. Tags wie <span> – die meisten dieser Elemente lassen ein style=-Attribut zu; stellen es dann auch dar, sofern möglich.
    • <span style="color: blue">...</span>

CSS-Notation[Bearbeiten | Quelltext bearbeiten]

Es wird einem Schlüsselwort ein Wert zugewiesen, wobei diese beiden durch einen Doppelpunkt getrennt werden.

  • style="Eigenschaft: Wert"

Es gibt eine Vielzahl von Eigenschaften. Jeweils paarweise wird der Eigenschaft der gewünschte Wert zugewiesen. Aufeinander folgende Paare werden durch ein Semikolon getrennt; damit man es beim Ändern nicht vergisst, wird oft hinter das letzte Paar ein eigentlich unnötiges Semikolon gesetzt:

  • style="Eigenschaft1: Wert1; Eigenschaft2: Wert2;"

Die Leerzeichen im Beispiel sind optional und werden auf dieser Seite zur besseren Lesbarkeit gesetzt. Kompakte Zuweisungen von einem Namen und einem Wert werden meist ohne Leerzeichen und Semikolon geschrieben; mehrere Zuweisungen auch mit komplexen Werten dagegen durch Leerzeichen besser lesbar gemacht.

Ein häufiger Wert sind Farben. Sie werden am sichersten als Hexadezimalzahlen angegeben: #RRGGBB – mit R=rot, G=grün, B=blau; jeweils sind die Zeichen 0–9,A–F möglich. Näheres siehe Hilfe:Farbtabelle und weitere.

Ebenfalls häufig sind Längenangaben. Hier sind typisch:

  • % – relative Angabe, beispielsweise 50% (kein Leerzeichen zwischen Zahl und Prozentzeichen!)
  • em – (Geviert), etwas wie die Schrifthöhe oder Breite eines großen M: 5em
  • pxPixel, etwa 20px

Klassen und Stile[Bearbeiten | Quelltext bearbeiten]

Statt Elemente auf mehreren Seiten jeweils einzeln mit individuellen Stilen zu versehen, ist es oft günstiger, auf projektweit einheitliche Stil-Definitionen zurückzugreifen. Damit erhalten alle Seiten ein einheitliches Erscheinungsbild, und es sind notfalls Anpassungen an Mobilgeräte oder Erfordernisse bestimmter Benutzergruppen zentral möglich.

  • Hintergrund- und Rahmenfarben, siehe Hilfe:Farbe
  • Layoutfluss mittels float-right etc., siehe unten
  • Tabellenformate mit wikitable, toptextcells und mehr, siehe Hilfe:Tabellen

Die Angabe erfolgt analog zur Vereinbarung individueller Stile in einem Attribut class="…" und ist an den gleichen Stellen alternativ und zusätzlich möglich.

Mehrere Klassen werden ohne Komma hintereinander, nur durch Leerzeichen getrennt innerhalb desselben und einzigen Attributs class="…" angegeben.

Ist eine Eigenschaft sowohl durch class="…" als auch durch style="…" bestimmt, hat die Definition mit style den Vorrang.

Häufige Aufgaben[Bearbeiten | Quelltext bearbeiten]

Hier eine kurze Auswahl.

Anordnung des Textes[Bearbeiten | Quelltext bearbeiten]

Es gibt zwei Richtungen, die beispielsweise in Tabellenzellen hilfreich sind:

  1. horizontal
    • style="text-align: left"linksbündig
    • style="text-align: center"mittig – Alternativ: class="center" (zieht eine Tabelle gleichzeitig auf die volle Seitenbreite aus; nicht zu verwechseln mit class="centered") – siehe Zentrieren
    • style="text-align: right"rechtsbündig
  2. vertikal
    • style="vertical-align: top"oben
    • style="vertical-align: middle"mittig
    • style="vertical-align: bottom"unten

Layout, Textfluss und zurücksetzen[Bearbeiten | Quelltext bearbeiten]

Siehe insgesamt: Layoutfluss

  • Element am rechten Seitenrand anordnen und vom Text umfließen lassen:
    • style="float: right"
    • class="float-right"besser; vor allem, wenn es schon eine Klasse gibt; sorgt außerdem für einen Abstand zum Fließtext
    • Miniaturbilder werden standardmäßig auf diese Weise deklariert.
  • Genauso für den linken Seitenrand:
    • style="float: left"
    • class="float-left"
  • Gesamtes Element mittig ausrichten:
    • class="centered" (nicht zu verwechseln mit class="center") – siehe Zentrieren
  • Layoutfluss zurücksetzen
    <div style="clear: both;"></div>

Farben[Bearbeiten | Quelltext bearbeiten]

  • Hintergrundfarbe:
    • style="background: black"[2]
    • class="hintergrundfarbe6"Beispiel – Hilfe
  • Schriftfarbe:
    • style="color: #8B008B"Beispiel
  • Rahmenfarbe und mehr:
    • style="border: solid 1px #9932CC"Beispiel
    • class="rahmenfarbe4"Beispiel – Hilfe

Zeilenumbruch unterdrücken[Bearbeiten | Quelltext bearbeiten]

Mehrfache &nbsp; (geschützte Leerzeichen) können eingespart werden.

  • style="white-space: nowrap"

Einrückung, linker Rand[Bearbeiten | Quelltext bearbeiten]

Bei jeder Einrückung in Aufzählungen usw. wird um 2em (zweimal die Breite eines „M“) der linke Rand nach rechts verschoben.

  • style="margin-left: 2em"

Ausblendung (unsichtbar/sichtbar)[Bearbeiten | Quelltext bearbeiten]

Gelegentlich werden Textelemente von vornherein unsichtbar gemacht. Skripte und Konfigurationseinflüsse sorgen später unter bestimmten Bedingungen dafür, dass sie wieder sichtbar werden:

  • style="display: none"

Grenzen der Dekoration[Bearbeiten | Quelltext bearbeiten]

Es gilt auch hier: „Weniger ist mehr.“ Enzyklopädische Seiten konzentrieren sich auf den Inhalt und leben von einem schlichten Design. Übermäßige und gekünstelte CSS-Deklarationen in den Artikeln verbessern nicht die Inhalte, und sie machen den Quelltext für die anderen Autoren schwer zu lesen und zu pflegen. Im Zweifelsfall kann auf Vorlagen zurückgegriffen werden; auch dort sollte man sich aber auf das Notwendige beschränken.

Veraltete Anweisungen[Bearbeiten | Quelltext bearbeiten]

In den 1990er Jahren, bevor sich CSS durchgesetzt hatte, hatte man in HTML noch besondere Attribute für jede einzelne Eigenschaft definiert. Diese sind aber nicht so reichhaltig wie die Möglichkeiten von CSS. Man geht deshalb inzwischen davon ab und verwendet nur noch das Universal-Attribut style= und einheitlich in allen Situationen CSS. Einige häufige Fälle:

Veraltet Bedeutung Ersatz durch CSS Werte und Anmerkungen
bgcolor="" Hintergrundfarbe background:[2] Farbwerte
align="" Textausrichtung (horizontal) text-align:
float:
left center right

Unterschiedliche Wirkung, je nachdem ob ein Block-Element oder aber eine Tabellen-Zelle bzw. -zelle adressiert wird.

Bei Anwendung auf gesamte Tabelle nach {|:

  • text-align:center – wirkt auf alle Zellen
  • class="center" – wirkt auf alle Zellen, zieht gleichzeitig die Tabelle auf volle Seitenbreite
  • class="centered" – zieht die Tabelle auf volle Seitenbreite (nicht den Text)

siehe Zentrieren

Für Block-Elemente beeinflussen align="right" bzw. align="left" hingegen den Layoutfluss.

valign="" Textausrichtung (vertikal) vertical-align: top middle bottom
clear="" Layoutfluss zurücksetzen <div style="clear: both;"></div>
border="1" Umrandung border: solid 1px Oft überflüssig, etwa bei class="wikitable".
cellpadding="10" Innerer Abstand padding: 10px Oft überflüssig, etwa bei class="wikitable".
cellspacing="5" Abstand zwischen Zellen Es ist offenbar noch keine Lösung vorhanden, die sinnvoll für alle Browser einschließlich älterer IE funktionieren und beliebige Werte für cellspacing erlauben würde.
cellspacing="0" ist border-collapse: collapse;
color="" Schriftfarbe usw. color: Farbwerte
width="20%"
width="250"
Breite width: 20%
width: 250px
In CSS gibt es viele Maßeinheiten, und es muss px für „Pixel“ gesetzt werden, während es in HTML nur Prozent und Pixel gibt.
  • Achtung: Generell werden HTML-Attribute bei Vorhandensein von entsprechendem CSS wirkungslos, sprich überschrieben.
  • Die Angaben colspan= und rowspan= sind strukturelle Eigenschaften und keine bloßen CSS-Dekorationen.

Die veralteten Stile haben das Problem, dass sie mit den modernen Definitionen nicht kompatibel sind, und bei gemischtem Auftreten das Resultat schwer vorhersagbar und womöglich browserabhängig ist.

  • Moderne Klassendefinitionen und Zuweisungen in übergeordneten Elementen sollen heutzutage Vorrang vor den veralteten HTML-Attributen haben.

Einige Anleitungen[Bearbeiten | Quelltext bearbeiten]

Anmerkungen[Bearbeiten | Quelltext bearbeiten]

  1. Ausnahme: Sogenanntes !important
  2. a b Etwas detaillierter:
    • Die präzise Farbangabe nur für die Hintergrundfarbe würde etwa lauten: background-color: #FFFF00
    • Kürzer und in der Regel genauso wirksam ist: background: #FFFF00
      • Hier kämen noch weitere Spezifikationen für den Hintergrund in Frage, die in der Wikipedia aber eher selten und teilweise unterbunden sind.
    • background-color ist im Zweifelsfall sicherer als background