Webprogrammierung — 5. Lektion

Rahmen

Mit dem Attribut border kann ein Element umrandet werden. Der Wert hat drei Bestandteile, die auch einzeln gesetzt werden können. Das Attribut border-color gibt die Rahmenfarbe an, das Attribut border-width die Randstärke und das Attribut border-style die Strichart.
Mit den Zusätzen -top, -bottom, -left und -right nach border kann man die Rahmen für oben, unten, links bzw. rechts einzeln definieren.
Mit dem Attribut border-radius kann man abgerundete Ecken definieren.

Weitere Pseudo-Klassen

Die Pseudoklasse hover ist auch für andere Elemente als nur Links definiert. Darüber hinaus gibt es auch weitere Pseudoklassen. Häufig verwendete Pseudoklassen sind zum Identifizieren von Elementen, die allein auf Grund ihrer Lage besonders behandelt werden. Dazu zählen das erste und das letzte Element eines Typs innerhalb einer Umgebung (z.B. weil es keinen Abstand zu einem vorgehenden oder nachfolgenden Element geben soll) sowie jedes zweite Element eines Typs (z.B. um durch abwechselndes Einfärben die Lesbarkeit zu erhöhen) oder ein Element an einer bestimmten Stelle.
Die erwähnten Pseudoklassen sind
Bei Formularen gibt es noch die folgenden Pseudoklassen:

Listen-Gestaltung

Zum Gestalten von geordneten und ungeordneten Listen gibt es folgende Attribute: list-style-position (Wert outside bewirkt das Standardaussehen, dass der Text eines Listeneintrages linksbündig erscheint und der Anstrich davor; inside bewirkt, dass der Anstrich eingerückt wird), list-style-type gibt die Form des Anstrichs an und mit list-style-image kann für den Anstrich ein Bild geladen werden.

Tabellen-Gestaltung

Ränder werden gesetzt, indem das Attribut border sowohl für die gesamte Tabelle als auch für die einzelnen Einträge gesetzt wird. Standardmäßig sind die einzelnen Umrandungen von einander getrennt. Mit dem Attribut border-collapse kann man veranlassen, dass die Umrandungen zu einfachen Linien zusammenfallen (Wert collapse; Standardwert ist separate). Wenn die Umrandungen nicht zusammenfallen, kann man mit dem Attribut border-spacing den Abstand festlegen (dieses Attribut hat keinen Effekt bei border-collapse: collapse).
Wenn ein Tabelleneintrag fehlt, gibt es dort auch keine Umrandung. Bei einem vorhandenen aber leeren Tabelleintrag kann man dieses Verhalten über empty-cells: hide erreichen (Standard ist der Wert show).
Im folgenden Beispiel wird die Tabelle aus dem letzten Beispiel des Abschnittes zu Tabellen gestaltet.
Attribut caption-side gibt an, wo der caption-Eintrag platziert werden soll: über der Tabelle mit top (Standard) oder unter der Tabelle mit bottom
Attribut vertical-align gibt die vertikale Ausrichtung von Tabellen-Eintragen an (top für bündig oben, bottom für bündig unten, Standardwert ist middle für zentriert)
Attribut height gibt die Höhe an und width die Breite