Hilfe:Stylesheets/Gebräuchliche Syntaxen

Aus Stupidedia, der sinnfreien Enzyklopädie!
Wechseln zu: Navigation, Suche

Diese Seite enthält eine Sammlung häufig verwendeter CSS-Befehle. Sie darf von jedem User erweitert werden, sofern die Erweiterung sinnvoll ist und er keine Unordnung verursacht.

Wichtige Elemente

Diese Tabelle enthält einige mehr oder weniger wichtige Elemente, die vom System generiert werden und auf die Otto Normaluser keinen direkten Einfluss hat.

Allerdings stehen nicht alle existierenden Elemente hier drin, sonst wäre die Tabelle länger als alle diese Elemente aneinandergekettet. Also sehr lang. Man kann aber IDs und Klassen anderer Elemente ermitteln, indem man den Website-Quelltext betrachtet (damit ist die Browserfunktion gemeint, nicht der Bearbeiten-Knopp) oder einen DOM-Inspektor wie z. B. Firebug benutzt.

Selektor Element
body Das gesamte Dokument
#content Der blau umrandete Bereich unter den Tabs
#firstHeading Die Seitenüberschrift
#bodyContent Der Bereich unter der Seitenüberschrift
#siteSub „Aus Stupidedia, der sinnfreien Enzyklopädie!“ (normalerweise unsichtbar)
#contentSub Enthält u. a. den Hinweis „Weitergeleitet von …“, die Links unter der Seitenüberschrift auf Spezial:Beiträge und die übergeordneten Seiten auf Unterseiten
#mw-content-text Liegt im #bodyContent und enthält den gesamten per Quelltext erstellten Seiteninhalt
#catlinks Die Kategorienleiste am Ende der Seite
.catlinks Alle Elemente, die aussehen wie die Kategorienleiste; kann genutzt werden, um Elemente so aussehen zu lassen (class-Attribut ohne den Punkt am Anfang)
#awards Die Sterne neben der Seitenüberschrift
#werbung Die Werbung unter der Sidebar
#editpage-copywarn Der Urheberrechtshinweis
.mw-newarticletext Der Text, der erscheint, wenn man eine neue Seite erstellen will
#talkpagetext Der blaue Kasten auf Diskussionsseite, der einen auf die Signatur hinweist
#anontalkpagetext Der Hinweistext am unteren Ende von IP-Diskussionen
#socialshareprivacy Die sozialen Knöppe am Seitenende
#footer-info Seiteninformationen im Footer
#footer-places Links im Footer
#footer-icons Icons im Footer
#footer-info-lastmod „Diese Seite wurde zuletzt am … um … Uhr geändert.“
#footer-info-viewcount Seitenaufrufzähler
#footer-info-copyright Urheberrechtshinweis im Footer
.mw-editTools Der graue Kasten mit diversen Bearbeitungslinks
#mw-panel Die Sidebar
#p-logo Das Logo über der Sidebar
#p- Die Icons unter dem Logo
#p-Navigation Der Sidebar-Kasten „Navigation“ (das ist der ganz oben)
#p-Mitmachen Der Sidebar-Kasten „Mitmachen“
#p-tb Der Werkzeugkasten in der Sidebar
#p-lang Der Sprachkasten in der Sidebar
#p-personal Die Benutzerlinks rechts oben
#left-navigation Die Tabs auf der linken Seite
#right-navigation Die Tabs auf der rechten Seite, sowie Aufklappmenü und Suchfunktion
#p-views Die Tabs auf der rechten Seite
#p-cactions Der Knopf mit dem Aufklappmenü
#p-cactions .menu Das Aufklappmenü
#p-search Die Suchfunktion
.usermessage Alle Kästen, die wie der Kackbalken aussehen
#bodyContent > .usermessage Der wahre Kackbalken
#mw-content-text .usermessage Alle Kästen, die wie der Kackbalken aussehen und sich im bearbeitbaren Seiteninhalt befinden (also alle Fakes)
#editinginterface Der Kasten, der einen beim Bearbeiten von MediaWiki-Seiten darauf hinweist, dass man eine MediaWiki-Seite bearbeitet
.error Fehlermeldungen
.noarticletext Der Kasten, in dem steht, dass der Artikel noch nicht existiert
#mw-userjsyoucanpreview Erzählt einem, dass man auf JS-Seiten die Vorschau benutzen kann
#mw-usercssyoucanpreview Das gleiche für CSS-Seiten
#mw-clearyourcache Cacheleerungsbefehl
#editnotice-2 Der Text, der einen warnt, wenn man eine fremde Benutzerseite bearbeitet
.mw-userpage-userdoesnotexist Warnt einen, dass man gerade die Seite eines nicht existenten Benutzers bearbeitet

Übrigens: Man kann die Definitionen auf einen bestimmten Namensraum beschränken, indem man .ns-Namensraumnummer vor dem jeweiligen Selektor notiert. Die Nummern der Namensräume stehen in dieser Tabelle. Und ja, Spezialseiten sind .ns--1.

Häufig verwendete Eigenschaften

Viele dieser Eigenschaften erwarten standardisierte Werte, z. B. numerische. Listen mit solchen möglichen gibt es bei SELFHTML.

Manchmal muss mit Farben hantiert werden. Damit man nicht jedes Mal zu einem Bildbearbeitungsprogramm greifen muss, gibt es eine Farbtabelle, in der jede Menge übliche und unübliche Farben stehen.

Darstellung

Mit der Eigenschaft display kann man Elemente anders darstellen, als sie es von sich aus tun würden. Sinnvolle Werte sind vor allem none, block und inline. none blendet ein Element komplett aus, block macht aus ihm einen Kasten bzw. Absatz und inline ermöglicht es, das Element innerhalb einer Zeile darzustellen. Viele Elemente haben von Natur aus eine dieser Eigenschaften, div-Elemente z. B. block und span-Elemente inline.

none wird vor allem gerne bei störenden Hinweistexten eingesetzt, die man als regelmäßiger Benutzer irgendwann auswendig kennt. Der Code dafür ist: display: none;

Um z. B. alles auszublenden, kann man Folgendes in seiner common.css notieren:

body {
    display: none;
}

Oder man ersetzt body durch einen oder mehrere durch Kommata getrennte Selektoren aus der Tabelle:

#werbung,
#editpage-copywarn,
.mw-newarticletext,
#talkpagetext,
#anontalkpagetext {
    display: none;
}

Das lässt die Werbung, den Urheberrechtshinweis und drei andere Platzfresser verschwinden.

Text einfärben

Das geht ganz einfach mit color: Beliebige Farbe;. Hilfreich ist in solchen Fällen die Farbtabelle.

Um irgendwelchen Text grün einzufärben, kann man das benutzen: <span style="color: green;">Beliebiger Text</span>

Das sieht hinterher so aus: Beliebiger Text

Hintergrund einfärben

Das funktioniert wie das Einfärben des Textes, nur mit der Eigenschaft background oder auch background-color: <span style="background: lightblue;">Beliebiger Text</span>

Und daraus wird das: Beliebiger Text

Lässt sich natürlich mit der Texteinfärbung kombinieren: <span style="color: yellow; background: lightblue;">Beliebiger Text</span>

Das wird zu: Beliebiger Text

Rahmen

Das wird etwas komplizierter. Ein Rahmen besteht nicht nur aus Farbe, sondern hat auch einen Stil und eine Breite. Daher hat die border-Eigenschaft einen mehrteiligen Wert: Breite Stil Farbe

  • Breite ist dabei ein numerischer Wert, der auf px, cm, em oder andere Maßeinheitskürzel endet. 3px sind also drei Pixel, 3cm drei Zentimeter (was viel ist!) und 3em irgendwas anderes.
  • Stil kann einer von mehreren möglichen Werten sein, z. B. solid (durchgezogen), dotted (gepunktet), dashed (gestrichelt) und double (doppelt).
  • Farbe kann entweder ein Farbname oder ein hexadezimaler Farbwert sein.

Um z. B. einen 3 Pixel breiten, doppelten Rahmen in der Farbe rot zu erstellen, kann man diesen Code nutzen: <div style="border: 3px double red;">Inhalt</div>

Im Ergebnis sieht das so aus:

Inhalt

Hier wurden übrigens div- statt span-Elemente genutzt, da Rahmen um einzelne Worte innerhalb einer Zeile oft eher besengt aussehen.

Rahmenbreite, -stil und -farbe können auch unabhängig voneinander mit den Eigenschaften border-width, border-style und border-color definiert werden. Das ist vor allem nützlich, wenn man einen bereits definierten Rahmen nachträglich verändern möchte, ohne ihn komplett zu erneuern.

Rahmen können auch abgerundete Ecken haben. Dazu muss nicht einmal ein Rahmen vorhanden sein, notfalls wird halt der Seiteninhalt zwangsgerundet. Das ist allerdings erheblich komplizierter als ein normaler Rahmen, da es mehrere browserabhängige Eigenschaften dafür gibt: -moz-border-radius, -webkit-border-radius und den vom W3C vorgegebenen Standard, border-radius. Die müssen alle notiert werden, damit der Rahmen sich in möglichst vielen Browsern korrekt rundet. Aus technischen Gründen, die zu langweilig sind, um sie hier breitzutreten, muss border-radius generell hinter den beiden anderen Eigenschaften stehen. Als Werte sind bei allen drei Eigenschaften die gleichen Werte wie bei der Rahmenbreite möglich, plus einen Prozentwert, der mit % endet.

Man kann auch für einzelne Ecken Rundungen vorgeben, was im schlimmsten Fall den Einsatz von zwölf verschiedenen Eigenschaften bedeutet. Aber mit diesem netten, kleinen Tool kann man sich den Code für die Rundungen automatisch generieren lassen, inklusive Vorschau. Damit das aber funktioniert, muss JavaScript aktiviert sein.

Weitere Informationen zu Rahmen gibt’s bei SELFHTML.

Innenabstand

Oft sieht es unschön aus, wenn der Text innerhalb eines Elements direkt am Rahmen klebt. Dagegen kann man etwas tun: Mit der Eigenschaft padding kann man den Abstand zwischen Rahmen und Inhalt eines Elements festlegen. Der Wert ist, wie auch bei der Rahmenbreite, ein numerischer Wert, auf den px, em, cm oder ähnliche Einheiten folgen. Ebenso kann man einen Prozentwert angeben, der dann relativ zur Breite des Elements ist. Diesen notiert man mit %. Einige Beispiele mit Rahmen:

border: 2px solid blue; padding: 10px;
border: 1px dashed green; padding: 1cm;
border: 4px groove gold; padding: 2%;
border: 5px dotted red; padding: 1.5em;
border: 3px double black; padding: 10pt;

Es ist auch möglich, den Innenabstand für einzelne Seiten festzulegen, und zwar mit padding-left, padding-right, padding-top und padding-bottom. Eine solche Definition überschreibt dabei für die jeweilige Seite einen mit padding gesetzten Abstand. Beispiel:

border: 1px solid black; padding: 10px; padding-left: 50px; padding-right: 50px;

Mehr zum Innenabstand gibt es da.

Text umfließen lassen

float: left; padding: 10px; border: 1px solid green;
float: right; padding: 10px; border: 1px solid darkred;

Auf vielen Seiten sieht man Elemente, die sich links oder rechts an der Seite befinden und um die der Text herumfließt. Das sind meist Bilder oder Vorlagen. Erreichen kann man dies mit der Eigenschaft float. Diese wird dem Element, das an der Seite landen soll, zugewiesen. Mögliche Werte sind left, right und none, wobei Letzteres keinen Umfluss bedeutet. Beispiele für einen solchen float-Kasten stehen da links und rechts.

Wie du vielleicht schon gemerkt hast, sollte man mit solchen Dingern vorsichtig umgehen, sonst setzen sie das Layout in den Sand. ;)

Übrigens, die Breite eines float-Elements richtet sich, sofern nicht anders angegeben (dazu mehr im Abschnitt Breite und Höhe), nach der Breite des Inhalts.

Umfluss beenden

Mit der Eigenschaft clear kann man einen solchen Umfluss beenden. Das bedeutet konkret, dass ein Element mit dieser Eigenschaft und alles darunter nicht mehr um ein Element mit der Eigenschaft float herumfließt. Dabei gibt es die Werte left, right, both und none. left und right beenden jeweils nur dem Umfluss um float-Elemente auf der linken oder rechten Seite, both beide und none gar nichts. Ein Beispiel:

float: left; padding: 10px; border: 1px solid darkblue;

Dieser Text unterwirft sich dem float-Element.

clear: both; padding: 10px; border: 1px solid gold;

Dieser Text und der über ihm stehende Kasten jedoch nicht mehr.

Vor allem Staffelvorlagen und andere vollbreite Kästen sollten mit der clear-Eigenschaft ausgestattet werden, da es sonst sehr schnell scheiße aussieht. Falls in einem Artikel mal die Bilder in den nächsten Abschnitt reinragen, kann man sowas auch gebrauchen. Dafür kann man übrigens {{Clear}} an der entsprechenden Stelle platzieren.

Außenabstand

Wie du wohl schon im Abschnitt zum Textumfluss gesehen hast, drückt sich der Text ziemlich an die Kästen mit der Eigenschaft float. Das liegt daran, dass sich eigentlich alle Elemente von Natur aus sehr zueinander hingezogen fühlen. Falls du dieses Verhalten für unsittlich hältst, kannst du es mit der Eigenschaft margin beenden. Das geht übrigens nicht nur mit float-Elementen, sondern mit fast allen. Der folgende Kasten hält einen eher großen Abstand zu diesem Absatz, dem nächsten und dem Seitenrand:

border: 1px solid blue; padding: 10px; margin: 30px;
… margin-right: 5px; margin-bottom: 5px;

Wie auch schon padding kann man auch margin in margin-left, margin-right, margin-top und margin-bottom aufteilen. Der links stehende Kasten hat einen linken und einen unteren Außenabstand, hält also respektvoll Distanz zu diesem Text und dem unter ihm stehenden, jedoch nicht zu dem über ihm stehenden (der sowieso eine gewisse Entfernung hält, da ein float-Element naturgemäß auf einer Höhe mit einer Zeile beginnt) und dem Seitenrand.

Breite und Höhe

Dieser Kasten hat folgende CSS-Eigenschaften:
float: right;
padding: 10px;
border: 1px solid silver;
margin-left: 5px;
margin-bottom: 5px;
width: 200px;

Gerade bei Elementen mit der Eigenschaft float ist es nervig, wenn sie aufgrund ihres Inhalts so breit werden wie der Rest der Seite – wollte man das, hätte man float auch weglassen können. Der nebenstehende Kasten enthält einen längeren Text, ist jedoch nur 200 Pixel breit. Also innen, die Breite bezieht sich immer auf den Inhalts eines Elements, Abstände und Rahmen machen das Ding häufig noch breiter. Mögliche Angaben sind numerische Werte mit px, cm, em, % und dem ganzen anderen Kram.

Man kann auch eine minimale oder maximale Breite definieren, und zwar mit den Eigenschaften min-width und max-width. Die überschreiben notfalls width und sorgen dafür, dass der Kasten auf keinen Fall breiter oder schmaler wird als angegeben. Macht vor allem Sinn, wenn die Breite nicht feststeht, sondern durch Prozentangaben oder den Inhalt flexibel ist.

Für die Höhe gilt das gleiche, nur sind die Eigenschaften dafür height, min-height und max-height.

Positionierung

Mit den Eigenschaften position, left, right, top und bottom kann man ein Element verschieben. position gibt dabei die Art der Positionierung an und die anderen vier Eigenschaften die Position. Dabei gilt, dass die vier Positionseigenschaften das Element in die umgekehrte Richtung verschieben. left: 20px; verschiebt das Element 20 Pixel nach rechts, bedeutet also 20 Pixel linken Abstand zu seiner ursprünglichen Position oder dem Rand seines Elternelements, des Seiteninhalts oder des Fensters. Das hängt von der Eigenschaft position ab, die folgende Werte haben kann:

  • relative verschiebt das Element relativ zu seiner normalen Position entsprechend den Positionseigenschaften. Alle anderen Elemente drumherum bleiben von der Umpositionierung unbeeinflusst und verhalten sich so, als befinde sich das Element an seiner regulären Position.
  • absolute verschiebt das Element relativ zum body-Element oder zum nächsthöheren Element mit absoluter Position.
  • fixed positioniert das Element relativ zum Browserfenster, es scrollt also nicht mit, sondern bleibt immer an der gleichen Stellen auf dem Bildschirm.
  • static ist der Standardwert und bedeutet keine Positionsänderung. Dadurch werden alle Positionseigenschaften wirkungslos.
Ferner gibt es noch eine fünfte Eigenschaft, z-index. Die wird benötigt, um überlappende Elemente besser koordinieren zu können. Falls durch Umpositionierung ein Element über oder unter ein andere gerät, liegt normalerweise das oben, das im DOM bzw. Seitenquelltext später auftaucht. Das kann man mit z-index korrigieren. Je höher der Wert liegt, desto höher liegt auch das Element. Negative Werte sind ebenfalls möglich, um ein Element hinter ein anderes zu verschieben. Ohne die Eigenschaft position oder mit position: static; ist auch diese Eigenschaft wirkungslos.

Linktipps: Faditiva und 3DPresso