CSS kurz & gut
von: Eric A. Meyer
O'Reilly Verlag, 2005
ISBN: 9783897215047
Sprache: Deutsch
139 Seiten, Download: 3045 KB
Format: PDF, auch als Online-Lesen
Darstellungsrollen von Elementen (S. 14-15)
Zusätzlich unterscheidet man in CSS2 Elemente noch anhand ihrer Darstellungsrolle. Die zwei möglichen Darstellungsrollen sind Block-Level und Inline-Level.
Block-Elemente
Block-Level-Elemente erzeugen standardmäßig eine Elementbox, die den Inhaltsbereich ihres Elternelements ausfüllt. Links und rechts neben einem Block-Element können keine anderen Elemente stehen. Block-Level-Elemente erzeugen dadurch eine Art »Zeilenumbruch « vor und nach dem Element. Die bekanntesten Block-Elemente in HTML sind p und div. Es gibt in der Regel keine ersetzten Block-Elemente.
Einen Sonderfall der Block-Elemente stellen die Listeneinträge dar. Abgesehen davon, dass sie ein Aufzählungszeichen (einen so genannten »Marker«) erzeugen, verhalten sie sich aber wie ganz normale Block-Elemente. Bei ungeordneten Listen ist der Marker meist ein kleiner Kreis; bei geordneten Listen meist eine Ziffer. Diese Zeichen werden in der Regel dem Listeneintrag vorangestellt.
Inline-Elemente
Die von Inline-Level-Elementen erzeugte Box wird innerhalb einer Zeile dargestellt und unterbricht den Textfluss nicht. Ein gutes Beispiel für ein Inline-Element in XHTML ist das Element a. Weitere Kandidaten sind strong und em. Bei diesen Elementen wird weder vorher noch nachher ein Umbruch erzeugt, der die Darstellung unterbricht.
Auch wenn die Block- und Inline-Elemente in CSS sehr viel mit ihren Pendants in HTML und XHTML gemeinsam haben, gibt es einen wichtigen Unterschied: In HTML und XHTML können Block- Elemente nicht von Inline-Elementen abstammen. In CSS gibt es dagegen keinerlei Einschränkungen, wie die Darstellungsrollen ineinander verschachtelt werden dürfen.
Grundlagen der visuellen Darstellung
CSS definiert eine Reihe von Algorithmen, nach denen die Elemente eines Dokuments dargestellt werden. Diese bilden die Grundlagen der visuellen Präsentation in CSS. Entsprechend den zwei Arten von HTML-Inhaltsmodellen existieren zwei sehr unterschiedliche Darstellungsformen: Block-Level und Inline-Level.
Darstellung von Block-Level-Elementen
Ein Block-Level-Element erzeugt eine rechteckige, so genannte Elementbox. Diese gibt an, wie viel Platz ein bestimmtes Element einnimmt. Die verschiedenen Teile einer Elementbox sehen Sie in Abbildung 2. Für eine Elementbox gelten folgende Regeln:
- Der Hintergrundbereich erstreckt sich über den Inhaltsbereich, die Innenabstände und Rahmen bis zu den Außenkanten das Rahmens. Besitzt der Rahmen transparente Bereiche (z.B. wenn dieser gepunktet oder gestrichelt ist), so ist an diesen Stellen der Hintergrund zu sehen.
- Nur die Außenabstände (margins) sowie die Eigenschaften height und width können den Wert auto annehmen.
- Negative Werte können nur für Außenabstände festgelegt werden.
- Innenabstände (padding) und Rahmen einer Elementbox erhalten standardmäßig den Wert 0 bzw. none.
- Die Eigenschaft width bestimmt ausschließlich die Breite des Inhaltsbereichs. Die Breite von Innen- und Außenabständen und Rahmen wird hinzugerechnet. Dasselbe trifft auf height zu.
Abbildung 2: Das Boxmodell (Die Abbildung ist kein Bestandteil der Leseprobe)
Darstellung von Inline-Elementen
Sämtliche Inline-Elemente besitzen eine Zeilenhöhe (festgelegt über die Eigenschaft line-height), die zu großen Teilen dafür verantwortlich ist, wie die Elemente dargestellt werden. Die Zeilenhöhe wird für einen Text anhand der folgenden Faktoren ermittelt:
Anonymer Text
Sämtliche Zeichenketten, die sich nicht innerhalb eines Inline- Elements befinden, werden als anynomer Text bezeichnet.
<p> Ich bin <em>so</em> glücklich!</p>
Im obigen Beispiel werden die Zeichenfolgen » Ich bin « und » glücklich!« als anonymer Text betrachtet. Hierzu gehören auch die Leerzeichen, die schließlich auch nur ganz normale Zeichen sind.