CSS kurz & gut

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

geeignet für: Apple iPad, Android Tablet PC's Online-Lesen PC, MAC, Laptop
Typ: B (paralleler Zugriff)

 

eBook anfordern

Mehr zum Inhalt

CSS kurz & gut



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.

Kategorien

Service

Info/Kontakt

  Info
Hier gelangen Sie wieder zum Online-Auftritt Ihrer Bibliothek