Box - Modell
Das Box-Modell definiert die Breite und Höhe von Elementen. Diese ergeben sich aus einer Addition von:
- Breite (width)
- Innenabstand (padding)
- Rahmenstärke (border)
- Aussenabstand (margin)
[Quelle: SelfHTML]
Cascading Syle Sheets (CSS) ergänzen in sinnvoller Weise strukturierte HTML–, XHTML– und XML–Dokumente.
Es stehen drei Methoden zur Einfügung von CSS–Angaben in (X)HTML Dokumenten zur Verfügung.
style–Attribut Das style–Attribut ist ein Universalattribut und ist in nahezu allen HTML Elementen erlaubt. Die Syntax lautet:
<element style="Eigenschaft1:Wert1; ... ;Eigenschaft1:Wert1;" />
Das style–Attribut
style–Element Das style–Element wird innerhalb des Dokumentkopfs head platziert. Es enthält die Stylesheet–Formatdefinitionen.
<style type="text/css"> /* CSS-Regeln */ </style>
Mittels des style–Elements definiertes CSS
link–Element Das link–Element wird ebenfalls innerhalb des Dokumentkopfs head platziert. Es enthält einen Verweis auf die externe Datei, welche die Stylesheet–Formatdefinitionen enthält.
<link rel="stylesheet | alternate stylesheet" type="text/css" media="[media list]" title="[title name]" href="[URI of css-file]" />
Mittels des link–Elements definiertes CSS
| Typ | Medium |
| all | Für alle Geräte. |
| aural | Für Sprachsynthesizer |
| braille | Für Braille-Geräte mit taktilem Feedback (Blindenschrift). |
| embossed | Für Braille-Seitendrucker |
| handheld | Für Handheld-Geräte vorgesehen (normalerweise mit kleinem Schwarzweißbildschirm und begrenzter Bandbreite) |
| Für ausgedrucktes Material oder Dokumente, die im Druckvorschaumodus auf dem Bildschirm angezeigt werden. | |
| projection | Für projizierte Präsentationen oder den Ausdruck auf Folien |
| screen | Für Computer-Farbbildschirme |
| tty | Für Medien mit einem festen Zeichenraster (Fernschreiber, Terminals, …) |
| tv | Für die Ausgabe auf Fernsehern oder ähnlichen Geräten mit geringer Auflösung und Farbmöglichkeiten) |
Die Regel einer Stylesheet Angabe besitzt folgenden syntaktischen Aufbau:
Selektor {
Eigenschaft1: Wert1;
Eigenschaft2: Wert2;
: :
EigenschaftN: WertN;
}Eine Regel besteht also aus
h1, h2, h4 /* Selektorenliste */
{ /* Beginn Deklarationsblock */
color: red; /* Deklaration */
background-color: #9ef; /* " */
text-align: center; /* " */
} /* Ende Deklarationsblock */Innerhalb von CSS–Angaben sind Kommentare erlaubt, deren Syntax den mehrzeiligen Kommentaren von C, C++, Java, Javascript entspricht.
/* einzeiliger Kommentar */
/* mehrzeiliger
Kommentar */
Eine Verschachtelung dieser Kommentare ist nicht erlaubt.
Die einzeiligen Kommentare von C++, Java und Javascript werden nicht unterstützt.
| Selektor | Bezeichnung | Bedeutung |
| * | Universalselektor | alle Elemente |
| E | Typselektor | Element E |
| E.class | Klassenselektor | Element E der Klasse class |
| E#id | ID–Selektor | Element E mit der ID id |
| E[foo] | Attributselektor | Element E mit Attribut foo |
| E[foo='bar'] | Attributselektor | Element E mit Attribut foo und Wert bar |
| E:link | Link-Pseudoklasse | unbesuchter Hyperlink |
| E:visited | Link-Pseudoklasse | besuchter Hyperlink |
| E:hover | dynamische Pseudoklasse | wenn E mit dem (Maus-)Zeiger berührt wird |
| E:focus | dynamische Pseudoklasse | wenn E den Fokus hat |
| E:active | dynamische Pseudoklasse | wenn E aktiviert ist (z.B. Eingabefeld) |
| F E | Kombinator | Element E ist Nachfahre eines Elements vom Typ F |
| F > E | Kombinator | Element E ist Kind eines Elements vom Typ F |
| F + E | Kombinator | Element E folgt unmittelbar ein Geschwisterelement vom Typ F |
| F ~~ E | Kombinator | Element E folgt ein Geschwisterelement vom Typ F |
Für Farbdefinitionen erlaubt CSS vier Möglichkeiten:
color:redcolor:#c0c0c0;color:rgb(255,255,0);color:rgb(100%,33.3%,0%);
Das Box-Modell definiert die Breite und Höhe von Elementen. Diese ergeben sich aus einer Addition von:
[Quelle: SelfHTML]
CSS Angaben zur Schriftformatierung beinhalten Schriftarten, Schriftgrößen, Schriftfarben, Schriftgewicht, Zeichen- und Wortabstände.
Neben der Ausrichtung (recht–, linksbündig), gehören Einzug, Umbruchmodus und Zeilenhöhe zu den absatztypischen Eigenschaften.
CSS etabliert einen Vererbungsmechanismus für hierarchische Auszeichnungssprachen. Demnach vererben äussere Elemente ihre CSS–Eigenschaften an die jeweils innenliegenden.
Somit genügt es also, dem body–Element beispielsweise die Farbe grün zu geben, um mittels Vererbung allen weiteren Kindelementen dieselbe Farbe mitzugeben.
Das 'C' in CSS steht für Cascading. Hierdurch wird dem gleichzeitigen – u.U. konkurrierenden – Einfluss von mehreren externen und internen Autoren– und auch Anwender–Stylesheets Rechnung getragen.
In diesem Zusammenhang wird eindeutig definiert, wie evtl. widersprüchliche CSS Angaben aufzulösen sind.
Beispiel:
color: red; /* externe CSS Angabe (link) */ color: blue; /* interne CSS Angabe (style--Element) */ color: green; /* Element CSS Angabe (style--Attribut) */
Im vorliegenden Beispiel hat das style–Attribute den höchsten Stellenwert. Der zugehörige Text hat die Farbe grün.