Tutorials – Webdesign

CSS – Einstieg  |  CSS – Layer erzeugen & positionieren

14. CSS – Werte & Eigenschaften

Textformatierung
Bereichs- & Absatzformatierung
Farben und Bilder
Rahmen & Linien

Stylesheet-Wertangaben

Bevor wir uns mit den Attributen des CSS befassen, will ich kurz einen überblick über die Werte, die diese annehmen können, schaffen. Sie unterscheiden sich ein wenig, von den Werten des klassischen HTML – oft sind sie eindeutiger und man viel mehr Auswahlmöglichkeiten.

Grundsätzlich stehen 3 Arten von Werten zur Verfügung: festgelegte, numerische und Farbwerte.

Festgelegte Werte sind bereits vordefinierte Worte, die in Verbindung mit bestimmten Attributen wirken. Viele Attribute kennen mehrere unterschiedlicher Angaben. z.B. kann dem Attribut font-family eine Liste bevorzugter Schriftarten vorgeben werden; das Attribut text-align versteht die festgelegten Werte left, right, center und justify usw.

Numerische Werte erfordern eine Zahl und eine angehängte Maßeinheit (ohne Leerzeichen), z.B. font-size: 10pt; Folgende mögliche Maßeinheiten existieren:

px (Pixel) – häufigste und wichtigste Maßeinheit
pt (Punkt) – der DTP-Punkt, wird bei Schriftgrößen verwendet
mm (Millimeter) – von Bildschirmgröße und -auflösung abhängig; gebrochene Werte sind mit Punkt zu trennen; in der Praxis eher ungeeignet
cm (Centimeter) – von Bildschirmgröße und -auflösung abhängig; gebrochene Werte sind mit Punkt zu trennen; in der Praxis eher ungeeignet
in (Inch) – von Bildschirmgröße und -auflösung abhängig; gebrochene Werte sind mit Punkt zu trennen; in der Praxis eher ungeeignet
em (= Breite eines "m") – entspricht einem Geviert
ex (= Breite eines "x") – wird ggf. als relative Angabe für Wort-, Zeichen- oder Zeilenabstände benutzt
% (Prozent) – steht allg. als relativ zum umgebenen Element (Browserfenster, Tabellenzelle o.ä.)

Farben kennt ihr bereits aus dem HTML: euch stehen die Farbnamen und Hexadezimalzahlen zur Verfügung.

Stylesheet-Attribute

Nun stelle ich euch die wichtigsten Stylesheet-Attribute vor. Ein gutes Nachschlagewerk für eine komplette Referenz ist die Website http://www.css4you.de - wenn man das Prinzip, nach dem CSS funktioniert verstanden hat, kann man dort alles Nötige zum "CSSen" nachschlagen.
Nicht jedes Attribut kann bei jeden beliebigen Selektor (Element) benutzt werden. Meistens ist aber offensichtlich, welches Attribut zulässig ist.

Textformatierung (bei fast jedem Element zulässig)

font-family
Hier wird eine Liste von Schriftarten eingetragen, getrennt durch Komma. Festgelegte Werte sind die Schriftarten. Achtet darauf, nur Systemschriften zu verwenden – auf exotische Schriften sollte verzichtet werden (der Besucher hat sie wahrscheinlich nicht auf dem Rechner installiert).
Bsp.:

font-size
font-size ist die Angabe der Schriftgröße. Hier wird ein numerischer Wert eingetragen, meist in Punkt (pt), Pixel (px)
oder em.
Bsp.:

font-style
Wird genutzt, um Schrift kursiv zu setzen. Die festgelegten Werte sind normal, italic (kursiv) und oblique (elektronisch schräggestellt).
Bsp.:

font-weight
Dient dazu, eine Schrift fett zu setzen. Festgelegte Werte sind normal und bold (fett).
Bsp.:

text-decoration
Legt fest, ob ein Text mit Linien versehen ist. Festgelegte Werte sind none (keine Linie, Standardeinstellung bei normalem Text), underline (unterstrichen; Standardeinstellung bei Links), overline (Linie über Text), line-through (durchgestrichen).
Bsp.:

letter-spacing
Gibt den Anstand der Buchstaben an (Textlaufweite). 0pt ist der Standardwert.
Bsp.:

Zusammenfassung font
Die Schriftformatierungen lassen sich in einer Zeile zusammenfassen. So wird aus:

in einer Zeile (Achtung, die Reihenfolge style – weight – size – family muss eingehalten werden!):

Bereichs- & Absatzformatierung (alle Absatzbildenden Elemente, z.B. <p>; ebenso Tabellenzellen usw.)

text-align
Ist die Ausrichtung des Textes. Mögliche Werte sind left (linksbündig; Standardwert), center (zentiert), right (rechtsbündig) oder justify (Blocksatz).
Bsp.:

text-indent
Ermöglicht eine Einrückung der ersten Zeile des Bereiches. Hier werden numerische Werte angegeben.
Bsp.:

line-height
Legt die Zeilenhöhe fest. Der Standardwert ist etwas höher als die gewählte Schriftgröße. Es stehen numerische Werte zur Verfügung.
Bsp.:

vertical-align
Ist die vertikale Ausrichtung eines Elements, entspricht dem valign von Tabellenzellen. Mögliche Werte sind baseline (Standardwert), middle, top sowie nummerische Werte.
Bsp.:

display
Bestimmt, ob ein Element absatzbildend ist oder nicht. Werte sind none (Element wird nicht angezeigt), block (absatzbildend, füllt die Zeile aus, erzeugt Umbruch) und inline (keine neue Zeile, normaler Textfluss).
Bsp:

Farben & Bilder (jedes Element mit Textinhalt)

color
Legt die Textfarbe fest.
Bsp:

background-color
Stellt die Hintergrundfarbe ein. Jedes Element kann seine eigene Hintergrundfarbe haben!
Bsp:

background-image
Definiert das Hintergrundbild eines Elements. Wert ist die URL des Bildes.
Bsp:

background-attachment
Bestimmt, ob das Hintergrundbild mit der Seite mitscrollt oder fixiert ist. Die festgelegten Werte sind fixed oder scroll (Standardeinstellung).
Bsp:

background-repeat
Erlaubt festzulegen, ob und wohin ein Hintergrundbild wiederholt ("gekachelt") wird. Werte sind repeat (in beide Richtungen wiederholen, Standardwert), repeat-y (nur vertikal wiederholen), repeat-x (nur horizontal wiederholen) oder no-repeat (keine Wiederholung – Einzelbild).
Bsp:

background-position
Ist abhängig vom background-repeat und legt die Position des Hintergrundbildes fest. Der erste Wert bestimmt die horizontale, der zweite die vertikale Position. Wird nur ein Wert angegeben, bestimmt dieser die horizontale Position, vertikal wird automatisch auf 50% gesetzt.
Mögliche Werte: nummerische Angaben sowie left, right, center, top, bottom.
Bsp:

Zusammenfassung background
Man kann die ganzen Angaben zum Hintergrund eines Elementes auch zusammenfassen. So wird aus:

in einer Zeile:

Rahmen & Linien (alle Elemente)

Box-Modell
Das Boxmodell beschreibt den rechteckigen Bereich, der für jedes Element reserviert ist. Dieser Bereich setzt sich aus Inhalt, Innenabstand (Padding), Rahmen (Border) und Außenabstand (Margin) zusammen.

padding
Padding bestimmt den Abstand eines Elementes zum Rand – der Innenabstand. Ein einfaches "padding" ermöglicht einen einheitlichen Abstand zu allen 4 Seiten. padding-top bestimmt den Abstand nach oben, padding-right nach rechts, padding-bottom nach unten und padding-left den Abstand nach links.
Die 4 Attribute können wie folgt zusammengefasst werden: wird bei "padding" nur ein Wert angegeben, gilt dieser für alle 4 Seiten (siehe oben), 2 Werte bestimmen den Abstand oben/unten (1. Wert) und links/rechts (2. Wert). 3 Werte bestimmen den Abstand oben (1. Wert), links/rechts (2. Wert) und unten (3. Wert). 4 Werte bestimmen den Abstand oben (1. Wert), rechts (2. Wert), unten (3. Wert) und links (4. Wert).
Bsp:

Bsp. Zusammenfassung:

margin
Margin definiert den Abstand vom Rand eines Elementes zum nächsten Element (z.B. Browserfenster). Es gelten die gleichen Regeln und Möglichkeiten wie bei "padding".
Bsp:

Bsp. Zusammenfassung:

border
Border ist der Rahmen, der um ein Element und dessen Innenabstand liegt. Dem Rahmen kann eine Breite (width, nummerische Werte) und eine Art (style) zugewiesen werden, Werte für den Style sind: solid (durchgezogen), dashed (gestrichelt), dotted (gepunktet) und double (doppelt). Natürlich kann auch eine Farbe bestimmt werden.
Diese Dinge können allgemein allen 4 Seiten zugewiesen werden (border), oder nur speziellen Seiten (border-top, border-right, border-bottom,
boder-left).
Bsp:

Zusammenfassung border
Man kann einige ganzen Angaben des border zusammenfassen. So wird aus:

in einer Zeile:

nach oben