Stylesheets

Eigenschaften von Schriften

Eigenschaft Wert Beschreibung
font-family Genaue Schrift (Arial, Times, Verdana)
Familie (serif, sans-serif, fantasy, monospace, kursiv)
Definiert einen oder mehrere Namen von Schriften oder Schriftfamilien. Werden mehrere Schriften definiert, wird diejenige verwendet, die als erste auf dem System des Users gefunden wird.
font-style normal, italic, oblique Definiert den Schriftstil
font-weight lighter, normal, bold ou bolder.
numerischer Wert (100, 200, 300, 400, 500, 600, 700, 800, 900)
Definiert die Dicke (Stärke) der Schrift
font-size xx-small, x-small, small, medium, large, x-large, xx-large
Größe in Punkt (pt), cm, %
Definiert die Größe der Schrift
font-variant normal, small-caps Definiert eine Variante (kleine Großbuchstaben)
font font: Verdana, Arial, bold italic 8px; Abkürzung, um alle Eigenschaften zu setzen

Text und Absätze

Eigenschaft Wert Beschreibung
color "#RRGGBB" Definiert die Textfarbe
line-height line-height: 12pt; Definiert die Zeilenhöhe
text-align left, center, right ou justify Definiert die Ausrichtung des Textes
text-indent text-indent: 5px; Definiert den Einzug des Textes
text-decoration blink (aufblinken), underline (unterstrichen), line-through (durchgestrichen), overline (Strich darüber) oder none (keine Verzierung) Definiert eine Verzierung
text-shadow text-shadow: 1px 2px 4px black; Definiert den Textschatten, also, in dieser Reihenfolge, die Verschiebung nach rechts, unten, den Umkreis des Unschärfe-Effekts und die Farbe.
text-transform uppercase (Großbuchstaben), lowercase (Kleinbuchstaben) oder capitalize (erster Buchstabe großgeschrieben) Definiert die Schreibweise des Textes
white-space normal (automatischer Zeilenumbruch), pre (Text erscheint mit den Leerzeichen, wie sie eingegeben wurden), nowrap (kein automatischer Zeilenumbruch) Zäsur
word-spacing word-spacing: 6px; Definiert den Abstand zwischen den Worten
width In Punkten (pt), inches (in), cm, pixel (px), oder % Definiert die Länge eines Textelements oder Bildes
height In Punkten (pt), inches (in), cm, pixel (px), oder % Definiert die Höhe eines Textelements oder Bildes

Farben und Hintergrund

Eigenschaft Wert Beschreibung
background-color "#RRGGBB" Definiert die Hintergrundfarbe
background-image url(http://url) Definiert das Hintergrundbild
background-repeat repeat, repeat-x, repeat-y, no-repeat Legt fest, wie der Hintegrund wiederholt wird
background-attachment scroll, fixed Legt fest, ob das Bild bei Bildschirmbewegungen fix bleibt
background-position top, middle, bottom, left, center ou right Position des Bildes in Bezug auf die linke obere Ecke
background background: url(test.jpg) fixed repeat; Abkürzung zu den Hintergrundeigenschaften

Ränder

Eigenschaft Beispiel Beschreibung
margin-top margin-top: 5px; Wert des oberen Randes
margin-right margin-right: 0.5em; Wert des rechten Randes
margin-bottom margin-bottom: 2pt; Wert des unteren Randes
margin-left margin-left: 0; Wert des linken Randes
margin margin: 5px 0.5em 2pt 0; Abkürzung zu den Rand-Eigenschaften

Rahmen

Eigenschaft Wert Beschreibung
border[-top -left -bottom -right]-width In Punkt (pt), Inches (in), cm, pixel (px), oder % Dicke des Rahmens [oben, links, unten, rechts]
border[-top -left -bottom -right]-color border-left-color: #RRGGBB; Farbe des Rahmens [oben, links, unten, rechts]
border[-top -left -bottom -right]-style solid (durchgehend), dashed (strichliert), dotted (punktiert), double (doppelt und ausgefüllt) oder ridge (in 3D) Stil des Rahmens [oben, links, unten, rechts]
border-collapse collapse
separate
E» 3D »-Effekt oder nicht
border border: 1px 0 0 2px dotted green; Allgemeine Abkürzung zu Rahmen-Eigenschaften

Innenabstand

Eigenschaft Wert Beschreibung
padding-top padding-top: 3px; Innenabstand zwischen dem Element und dem oberen Rand
padding-right padding-right: 0.25em; Innenabstand zwischen dem Element und dem rechten Rand
padding-bottom padding-bottom: 0; Innenabstand zwischen dem Element und dem unteren Rand
padding-left padding-left: 2pt; Innenabstand zwischen dem Element und dem linken Rand
padding padding: 3px 0.25em 0 2pt; Abkürzung zu allen Innenabstand-Einstellungen

Tabellen

Eigenschaft Wert Beschreibung
border-collapse separate oder collapse Verschmelzen der Zellränder (collapse) oder nicht (separate)
border-spacing border-spacing: 4px; Abstand zwischen den Zellen
caption-side top, bottom, left ou right Positionierung der Legende der Tabelle
empty-cells show oder collapse Anzeigen (show) oder Verbergen (collapse) von leeren Zellen
table-layout fixed (unabhängig vom Zellinhalt) oder auto (je nach Zellinhalt) Fixe oder variable Breite
speak-headers alwats (systématiquement avant chaque cellule) ou once (une seule fois) Einstellung für taube und schwerhörige Personen, gibt das Verhalten beim Lesen der Header-Zellen einer Tabelle an

Listen

Eigenschaft Wert Beschreibung
list-style-type decimal, upper-roman, lower-latin, disc, circle, square ou none Arten von Anführungszeichen und Nummerierung
list-style-image list-style-image: url(image.png); Ermöglicht die Personalisierung von Anführungzeichen durch Bilder
list-style-position inside ou outside Gibt den Einzug der Anführungszeichen an
list-style   Abkürzung zu den Listeneigenschaften

Layout

Eigenschaft Wert Beschreibung
@page @page(size: portrait) Definiert das Druck-Layout
size auto, landscape ou portrait Format des Ausdrucks
margin-top margin-top: 3 cm; Oberer Rand
margin-right margin-right: 1.5 cm; Rechter Rand
margin-bottom margin-right: 1 cm; Unterer Rand
margin-left margin-left: 2 cm; Linker Rand
marks crop (Schneidmarken), cross (Passermarken), none (keine Marken) Schneid- und Passermarken
page-break-before Always, avoid Seitenumbruch vor einem Element erzwingen
page-break-after Always, avoid Seitenumbruch nach einem Element erzwingen
orphans orphans: 2; Verhindert alleinstehende Zeilen am Seitenende. Legt die Mindestzeilenanzahl fest, ab der ein Umbruch auf die nächste Seite durchgeführt wird.
widows widows: 1; Verhindert alleinstehende Zeilen am Seitenanfang. Legt die Mindestzeilenanzahl fest, ab der ein Umbruch auf die vorherige Seite durchgeführt wird.
Letzte Änderung am Mittwoch April 1, 2009 02:16:17 von Jeff
Das Dokument mit dem Titel « Stylesheets » aus Kioskea.net (de.kioskea.net) wird zur Verfügung gestellt unter den Bedingungen der Creative Commons Lizenz. Sie dürfen das Dokument verwenden, verändern sowie Vervielfältigungen dieser Seite erstellen, unter den Bedingungen, die in der vorgenannten Lizenz erwähnt sind und unter der gleichzeitigen Bedingung, dass Sie im Rahmen Ihrer Verwendung, Veränderung oder Vervielfältigung nach außen hin klar und deutlich auf den Urheber (= de.kioskea.net) des Dokuments hinweisen.
CSS-Positionierung
Stylesheets