14 - CSS: Werte und Eigenschaften/Attribute von StylesheetsStylesheet-WertangabenBevor 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 Wert 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-AttributeNun 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-familyHier 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.:
- Code:
-
font-family: arial, verdana, sans-serif;
font-sizefont-size ist die Angabe der Schriftgröße. Hier wird ein numerischer Wert eingetragen, meist in Punkt (pt), Pixel (px) oder em.
Bsp.:
- Code:
-
font-size: 12pt;
font-styleWird genutzt, um Schrift kursiv zu setzen. Die festgelegten Werte sind normal, italic (kursiv) und oblique (elektronisch schräggestellt).
Bsp.:
- Code:
-
font-style: italic;
font-weightDient dazu, eine Schrift fett zu setzen. Festgelegte Werte sind normal und bold (fett).
Bsp.:
- Code:
-
font-weight: bold;
text-decorationLegt 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.:
- Code:
-
text-decoration: underline overline;
letter-spacingGibt den Anstand der Buchstaben an (Textlaufweite). 0pt ist der Standardwert.
Bsp.:
- Code:
-
letter-spacing: 3pt;
Zusammenfassung fontDie Schriftformatierungen lassen sich in einer Zeile zusammenfassen. So wird aus:
- Code:
-
font-family: arial, verdana, sans-serif;
font-size: 12pt;
font-style: italic;
font-weight: bold;
in einer Zeile (
Achtung, die Reihenfolge style – weight – size – family muss eingehalten werden!):
- Code:
-
font: italic bold 12pt arial, verdana, sans-serif;
Bereichs- & Absatzformatierung (alle Absatzbildenden Elemente, z.B. <p>; ebenso Tabellenzellen usw.)
text-alignIst die Ausrichtung des Textes. Mögliche Werte sind left (linksbündig; Standardwert), center (zentiert), right (rechtsbündig) oder justify (Blocksatz).
Bsp.:
- Code:
-
text-align: right;
text-indentErmöglicht eine Einrückung der ersten Zeile des Bereiches. Hier werden numerische Werte angegeben.
Bsp.:
- Code:
-
text-indent: 3em;
line-heightLegt die Zeilenhöhe fest. Der Standardwert ist etwas höher als die gewählte Schriftgröße. Es stehen numerische Werte zur Verfügung.
Bsp.:
- Code:
-
line-height: 14pt;
vertical-alignIst die vertikale Ausrichtung eines Elements, entspricht dem valign von Tabellenzellen. Mögliche Werte sind baseline (Standardwert), middle, top sowie nummerische Werte.
Bsp.:
- Code:
-
vertical-align: middle;
displayBestimmt, 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:
- Code:
-
display: none;
Farben & Bilder (jedes Element mit Textinhalt)
colorLegt die Textfarbe fest.
Bsp:
- Code:
-
color: #660000;
background-colorStellt die Hintergrundfarbe ein. Jedes Element kann seine eigene Hintergrundfarbe haben!
Bsp:
- Code:
-
background-color: #339933;
background-imageDefiniert das Hintergrundbild eines Elements. Wert ist die URL des Bildes.
Bsp:
- Code:
-
background-image: url(hintergrundbild.jpg);
background-attachmentBestimmt, ob das Hintergrundbild mit der Seite mitscrollt oder fixiert ist. Die festgelegten Werte sind fixed oder scroll (Standardeinstellung).
Bsp:
- Code:
-
background-attachment: fixed;
background-repeatErlaubt 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:
- Code:
-
background-repeat: no-repeat;
background-positionIst 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:
- Code:
-
background-position: 200px 70%;
Zusammenfassung backgroundMan kann die ganzen Angaben zum Hintergrund eines Elementes auch zusammenfassen. So wird aus:
- Code:
-
background-color: #339933;
background-image: url(hintergrundbild.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 200px 70%;
in einer Zeile:
- Code:
-
background: #339933 url(hintergrundbild.jpg) no-repeat fixed 200px 70%;
Rahmen & Linien (alle Elemente)
Box-ModellDas 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.
paddingPadding 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:
- Code:
-
padding-top: 10px;
Bsp. Zusammenfassung:
- Code:
-
padding: 20px 10px 5px;
marginMargin 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:
- Code:
-
margin-top: 20px;
Bsp. Zusammenfassung:
- Code:
-
margin: 10px 15px;
borderBorder 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:
- Code:
-
border-color: red;
border-top-width: 3px;
border-left-style: dashed;
border-bottom-color: #003300;
Zusammenfassung borderMan kann einige ganzen Angaben des border zusammenfassen. So wird aus:
- Code:
-
border-width: 5px;
border-style: solid;
border-color: red;
in einer Zeile:
- Code:
-
border: 5px solid red;
~~~
Und wieder ein ziemlich umfangreiches Kaiptel. Aber ich bin mir sicher, dass ihr damit klar kommt
Nächste Woche wird es richtig spannend: es geht um die Layererstellung und -positionierung beim Layouten.