Die nächsten CSS-Attribute, die beschrieben werden, sind die klassifizierenden Attribute, die beispielweise steuern, wie Listen oder HTML-Elemente dargestellt werden, sowie Pseudo-Attribute.
Das display-Attribut ist sehr praktisch. Es legt fest, ob ein Listenelement angezeigt oder nicht angezeigt wird. Das folgende Beispiel schaltet die Anzeige aller Elemente aus; dazu wird die Klasse nodisplay angewendet:
Mithilfe des DOM (siehe DHTML) können anfangs unsichtbare Elemente dynamisch sichtbar geschaltet werden.
Die Anzeige white-space steuert, ob Leerzeichen, die in einem Element enthalten sind, so wie eingegeben dargestellt werden, ähnlich der Verwendung der PRE-Tags, oder ob diese Leerzeichen komprimiert werden sollen. Der folgende Code spezifiziert, dass alle Absätze mit Leerzeichen so dargestellt werden, wie sie eingegeben wurden:
Die list-style-Attribute steuern, wie eine geordnete oder ungeordnete Liste angezeigt wird. Mit Hilfe dieser Attribute können Sie die Listensymbole ändern, angeben, ob es sich bei diesen Symbolen um ein Bild handeln soll, und wie zusätzlicher Listentext im Verhältnis zum Symbol angezeigt wird. Das folgende Beispiel ändert das Symbol der geordneten Liste in römische Grossbuchstaben. Der gesamte Text wird rechts vom Symbol angezeigt:
Das Attribut list-style-position wird standardmässig auf den Wert outside gesetzt, das heisst, dass der Listentext rechts von seinem Symbol ausgerichtet wird.
Die Attribute float, clear, width und height können für die meisten HTML-Elemente verwendet werden, werden jedoch hauptsächlich bei Bildern definiert. Sie kennen die Verwendung von float bereits aus früheren Beispielen. Es steuert, wie andere Elemente im Verhältnis zum Zielelement ausgerichtet werden, in diesem Fall dem Bild auf der Webseite. Der folgende Code beispielsweise richtet den Text, der um das Bild herumfliessen soll, links vom Bild aus:
Mit dieser Stylesheet-Einstellung werden alle Bilder auf der Webseite links vom umschliessenden Text ausgerichtet. Das clear-Attribut entfernt alle Elemente links oder rechts vom Zielelement.
Die CSS-Attribute width und height definieren die Breite und die Höhe dessen, was das W3C als ersetzte Elemente bezeichnet, wie etwa Bilder. Diese Attribute können auch für andere Elemente auf Blockebene eingesetzt werden, wurden jedoch hauptsächlich für die ersetzten Elemente definiert.
Um einige dieser Elemente zu demonstrieren, enthält das folgende Beispiel ein Style-Sheet, das die Liste auf der Seite verbirgt, das Bild rechts ausrichtet und die clear-Attribute für alle Anker anwendet. Ausserdem ändert es den Rahmen für die Überschrift, den Hintergrund für den Standardtext, die Absätze und die Verwendung des HTML-Elements strong.
Hier zunächst das Listing:
Das Beispiel zum ansehen
Beachten Sie in dem Listing, dass der erste Absatz ein Inline-Style-Sheet erhält, das das Attribut white-space auf den Wert pre setzt, was bedeutet, dass die Abstände in dem Absatz nicht komprimiert werden. Der Internet-Explorer erlaubt es momentan noch nicht, das white-space Attribut zu verarbeiten, d.h., für diesen Browser hat die Verwendung des Attributs keine Auswirkung auf die Darstellung der Leerzeichen. Die Leerzeichen werden nicht wie eingegeben verwaltet und dem Standard der HTML-Spezifikation für Leerzeichen folgend komprimiert. Der Navigator hingegen erkennt dieses Attribut. Leider unterstützt er viele andere Attribute nicht, wie etwa header, border, die Anzeige-Eigenschaft für eine Liste oder die Eigenschaften width und height für das Bild.