Hilfe:CSS: Unterschied zwischen den Versionen
Cowboy (Diskussion | Beiträge) Die Seite wurde neu angelegt: „{{Hilfe}} '''CSS''' ({{WP|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öglichkeiten: # Das {{WP|Layout}} eines einzelnen Artikels beeinflussen. Das ist Gegenstand dieser Hilfeseite. # Alle Wiki-Seiten mit einem schematischen Stil versehen #* für die persönlichen Wünsche einzelner Benutzer. #* für das ganze Projekt (n…“ |
Cowboy (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| (5 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 33: | Zeile 33: | ||
* <code>%</code> – relative Angabe, beispielsweise <code>50%</code> (kein Leerzeichen zwischen Zahl und Prozentzeichen!) | * <code>%</code> – relative Angabe, beispielsweise <code>50%</code> (kein Leerzeichen zwischen Zahl und Prozentzeichen!) | ||
* <code>em</code> – ({{WP|Geviert (Typografie)|Geviert}}), etwas wie die Schrifthöhe oder Breite eines großen M: <code>5em</code> | * <code>em</code> – ({{WP|Geviert (Typografie)|Geviert}}), etwas wie die Schrifthöhe oder Breite eines großen M: <code>5em</code> | ||
* <code>px</code> – | * <code>px</code> – {{WP|Pixel}}, etwa <code>20px</code> | ||
== Klassen und Stile == | == Klassen und Stile == | ||
| Zeile 64: | Zeile 64: | ||
* Element am rechten Seitenrand anordnen und vom Text umfließen lassen: | * Element am rechten Seitenrand anordnen und vom Text umfließen lassen: | ||
** <code>style="float: right"</code> | ** <code>style="float: right"</code> | ||
** <code>class="float-right"</code> – ''besser; vor allem, wenn es schon eine Klasse gibt; sorgt außerdem für einen Abstand zum | ** <code>class="float-right"</code> – ''besser; vor allem, wenn es schon eine Klasse gibt; sorgt außerdem für einen Abstand zum {{WP|Fließtext}}'' | ||
** Miniaturbilder werden standardmäßig auf diese Weise deklariert. | ** Miniaturbilder werden standardmäßig auf diese Weise deklariert. | ||
* Genauso für den linken Seitenrand: | * Genauso für den linken Seitenrand: | ||
| Zeile 85: | Zeile 85: | ||
=== {{Anker|nowrap}} Zeilenumbruch unterdrücken === | === {{Anker|nowrap}} Zeilenumbruch unterdrücken === | ||
Mehrfache <code>&nbsp;</code> ( | Mehrfache <code>&nbsp;</code> ({{WP|Geschütztes Leerzeichen|geschützte Leerzeichen}}) können eingespart werden. | ||
* <code>style="white-space: nowrap"</code> | * <code>style="white-space: nowrap"</code> | ||
| Zeile 102: | Zeile 102: | ||
== Veraltete Anweisungen == | == Veraltete Anweisungen == | ||
In den 1990er Jahren, bevor sich CSS durchsetzte, wurden in | In den 1990er Jahren, bevor sich CSS durchsetzte, wurden in {{WP|Hypertext Markup Language|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 <code>style=</code> und einheitlich in allen Situationen CSS. Einige häufige Fälle: | ||
{| class="wikitable toptextcells sortable" | {| class="wikitable toptextcells sortable" | ||
| Zeile 167: | Zeile 167: | ||
| Breite | | Breite | ||
| <code>width: 20%</code><br /> <code>width: 250px</code> | | <code>width: 20%</code><br /> <code>width: 250px</code> | ||
| In CSS gibt es viele Maßeinheiten, und es muss <code>px</code> für „Pixel“ gesetzt werden, während es in | | In CSS gibt es viele Maßeinheiten, und es muss <code>px</code> für „Pixel“ gesetzt werden, während es in {{WP|Hypertext Markup Language|HTML}} nur Prozent und Pixel gibt. | ||
|} | |} | ||
| Zeile 215: | Zeile 215: | ||
* Die präzise Farbangabe nur für die Hintergrundfarbe würde etwa lauten: <code style="white-space: nowrap">background-color: #FFFF00</code> | * Die präzise Farbangabe nur für die Hintergrundfarbe würde etwa lauten: <code style="white-space: nowrap">background-color: #FFFF00</code> | ||
* Kürzer und in der Regel genauso wirksam ist: <code style="white-space: nowrap">background: #FFFF00</code> | * Kürzer und in der Regel genauso wirksam ist: <code style="white-space: nowrap">background: #FFFF00</code> | ||
** Hier kämen noch weitere Spezifikationen für den Hintergrund in Frage, die in | ** Hier kämen noch weitere Spezifikationen für den Hintergrund in Frage, die in {{SITENAME}} aber eher selten und teilweise unterbunden sind. | ||
* <code>background-color</code> ist im Zweifelsfall sicherer als <code>background</code>. | * <code>background-color</code> ist im Zweifelsfall sicherer als <code>background</code>. | ||
* In der Regel und insbesondere im ANR genügt es, <code style="white-space: nowrap">background:#FFFF00</code> zu schreiben. Dies ist übersichtlicher und kürzer. | * In der Regel und insbesondere im ANR genügt es, <code style="white-space: nowrap">background:#FFFF00</code> zu schreiben. Dies ist übersichtlicher und kürzer. | ||
* Im Wikitext sind für die <code>style</code>-Angaben ohnehin keine anderen Spezifikationen als die Farbe sinnvoll wählbar. | * Im Wikitext sind für die <code>style</code>-Angaben ohnehin keine anderen Spezifikationen als die Farbe sinnvoll wählbar. | ||
* Lediglich bei [[Hilfe:Tabellen|sortierbaren Tabellen]] muss im Tabellenkopf <code>background-color:</code> verwendet werden, weil hier später durch | * Lediglich bei [[Hilfe:Tabellen|sortierbaren Tabellen]] muss im Tabellenkopf <code>background-color:</code> verwendet werden, weil hier später durch {{WP|JavaScript}} die Sortierpfeile als Hintergrundbild generiert werden. Durch<code>background:</code> wird jedoch ggf. der Browser schon darauf festgelegt, dass kein Hintergrundbild angezeigt werden soll. | ||
* In der Vorlagenprogrammierung und ähnlich fortgeschrittenem Kontext wird man vorrangig explizit <code>background-color</code> angeben, um die Wirkung anderweitiger Effekte nicht zu behindern. | * In der Vorlagenprogrammierung und ähnlich fortgeschrittenem Kontext wird man vorrangig explizit <code>background-color</code> angeben, um die Wirkung anderweitiger Effekte nicht zu behindern. | ||
</ref> | </ref> | ||