Kapitel 1.1: CSS und Dokumente
Elementarten in CSS
Generell werden in CSS zwei Arten von Elementen unterschieden: ersetzte und nicht-ersetzte.
Ersetzte Elemente sind Beispielsweise das img-Tag oder die input-Tags in Formularen:
Beispiel: <img src="bild.gif" />
Das img-Tag hat für sich selbst keine Bedeutung. Erst wenn es durch ein Attribut und seinen Wert ersetzt wird, erhält <img> eine Funktion. Ähnlich verhält es sich auch mit dem <a>-Tag, dem Anker für die Verlinkung, das erst durch href="xyz" einen Wert erhält.
Nicht-ersetzte Elemente sind jene, die für sich selbst eine besondere Bedeutung haben und in der Erscheinungsweise definiert sind:
Beispiel: <span> Hi, here I am </span>
Innerhalb des Box-Modells hat span einen festen Platz als Inline Element. Weitere derartige Elemente gibt es viele, eben alle, die eigene Struktureigenschaften haben und definierte Verhaltensweisen hervorrufen.
Methoden des Displays von Elementen
Grundtypen des Elementen-Displays sind die Block-Level Elemente und die Inline-Level Elemente.
CSS erlaubt die Hauptdisplayarten: display:block; und display:inline, was beispielsweise für die Darstellungsweise von Folgeelementen von immenser Bedeutung ist. (Es gibt noch eine ganze Zahl anderer Displayarten)
Block-Elemente
Blockelemente generieren eine Box, die durch "linebreaks" am Anfang und am Ende definiert sind. Einfach gesagt, erzeugen Sie einen eigenen Absatz mit Zeilenschaltung vorn und hinten. Bekannteste Beispiele sind <div> und <p> oder die <Hx>-Überschriftenelemente. Eine besondere Stellung unter den Blockelementen nehmen die Listen ein. <ol>-und <ul>-Listen erzeugen Blockelemente, die jedoch durch ein besonderes Zeichen am Anfang der Zeile definiert sind (Bullets, wie Punkt, eckiger Punkt, Disk, Nummerierungsarten oder ein eigenes Bild).
Inline-Elemente
Diese Elemente generieren eine Box innerhalb einer Textzeile. Beste Beispiele sind das <a>-Element für Links, das <img>-element, die Textauszeichnungselemente <em>, <i>, <b> und natürlich <span>.
Die Differenz zwischen (X)HTML und CSS bezüglich dieser Elementarten ist die Tatsache, dass bei (X)HTML in einem Inline-Element niemals ein Blockelement stehen kann, während dies bei CSS möglich ist:
Beispiel: p{display:inline}; em{display:block} Was also zu einem Code führen kann der folgendermassen aussehen kann:
<em><p>Ein Absatz-Element in einem Em-Element, in (X)HTML undenkbar</p></em>
Besonders fruchtbar ist die Anwendung der Display-Direktive in XML, wo die Tags unterschiedliche, selbst gewählte Namen haben können.
Als sinnvolle Praxis bei der Verwendung von Block- und Inline-Elementen, gilt generell, dass ihre natürlichen Struktureigenschaften ausgenützt werden sollten. Blockelemente dienen dabei dem Layout der Seite, während Inline-Elemente das "innere " visuelle Fein-Design der positionierten Blöcke bestimmen. Viele Eigenschaften von Blockelementen sind in Inline-Elementen nicht anwendbar. Der "natürliche" Vererbungsweg von Elementen und Eigenschaften sollte daher ausgenützt werden.
Weiter zu: Einbindung von CSS in (X)HTML