CSS-Eigenschaft Display – Art der Darstellung festlegen
- Schriftart definieren
- Schriftgröße definieren
- Schriftfarbe definieren
- Textausrichtung
- Text-Dekoration
- Hintergrundfarbe definieren
- Schriftfarbe definieren
- Rahmen – Border
- HTML Farbnamen
- CSS Box-Modell
- Außenabstand – Margin
- Innenabstand – Padding
- Rahmen – Border
- CSS Float Modell
- Art der Positionierung: Position
- Art der Darstellung: Display
- Außenabstand – Margin
- Innenabstand – Padding
- Rahmen – Border
- CSS Float Modell
- CSS Selektoren
- CSS Maßeinheiten
Inhaltsübersicht CSS Grundlagen
Eigenschaften für Text
Farben und Hintergründe definieren
Grundlagen Box-Modell?
Box-Positionierung
Art der Darstellung: CSS Property display
Die Elemente einer Webseite lassen sich grob in zwei Haupt-Kategorien einteilen – Block-Elemente und Inline-Elemente. Block-Elemente erzeugen einen eigenen Absatz, d.h. sie erzeugen einen Zeilenumbruch vor und nach dem Element.
Die wichtigsten und meist genutzten HTML Blockelemente sind:
Überschriften (H1 - H6)
| Beschreibung | mögliche Werte | Standardwert | Kategorie |
|---|---|---|---|
| Art der Darstellung | block inline inline-block table none grid flex initial inherit | inline | Bildschirm Positionierung |
Die »Angabe in oranger Schrift« ist die Standardanwendung dieser CSS-Eigenschaft.
Es gibt noch mehr Werte für display. Aus Gründen der Übersichtlichkeit gehe ich auf diese eher selten benutzten Werte an dieser Stelle nicht ein.
Mit der CSS-Eigenschaft display kann man das Verhalten eines HTML-Elements ändern. Die typische Verwendung von display sind die Eigenschaften
- display: block,
- display: inline,
- display: inline-block und
- display: none.
Mit der Eigenschaft »display« lässt sich der Typ eines HTML-Elements (Block-Element oder Inline-Element) nicht ändern. Nur das Verhalten des HTML-Elements wird geändert. Block-Elemente bleiben Block-Elemente und Inline-Elemente bleiben Inline-Elemente. Die allgemeine Regel, dass Block-Elemente nicht in Inline-Elemente platziert werden dürfen, gilt nach wie vor.
Die Eigenschaft »display« wird benutzt, wenn für ein Inline-Element das Verhalten eines Block-Elements benötigt wird.
Oder wenn für ein Block-Element das Verhalten eines Inline-Elements notwendig ist.
Block-Elemente erzeugen einen eigenen Absatz. D.h. vor und nach dem HTML-Element wird gemäß Standard ein automatischer Zeilenumbruch (d.h. eine neue Zeile) eingefügt. Man nennt dies auch Zeilenvorschub bzw. Englisch »Linefeed«.
Inline-Elemente erzeugen keinen eigenen Absatz. D.h. der normale Textfluss wird nicht unterbrochen. Ein Inline-Element ist stets nur so breit wie für den Inhalt notwendig. Inline-Elemente werden standardmäßig nebeneinander positioniert.
Ein Element mit der Eigenschaft display: inline-block ist ein Inline-Element. Es ist aber möglich mit Margin einen Außenabstand und mit Padding einen Innenabstand zu definieren.
Eine für die Praxis wichtige Deklaration ist display: none. Diese Deklaration legt fest, dass für das Element keine Box erzeugt werden soll. Das mit »display: none« ausgeblendete Element hat gar keinen Einfluss auf folgende Elemente des Layouts.
Mit »display: none« ausgeblendete Elemente können mit jedem anderen Wert wieder eingeblendet werden.
Im Gegensatz zu »display: none« erzeugt visibility: hidden für das Element eine vollständig transparente Box. Mit »visibility: hidden« ausgeblendete Elemente haben Einfluss auf nachfolgende Elemente.
CSS-Layouts mit display, position und float
Die Eigenschaften display, position und float ermöglichen CSS-basierte Layouts. Normalerweise werden die HTML-Elemente je nach Element-Typ untereinander (Block-Elemente) oder nebeneinander (Inline-Elemente) positioniert. Die Breite der Block-Elemente wird dabei jeweils durch das übergeordnete Element bestimmt.
Durch gezielte Definitionen lassen sich die Boxen und alle anderen Elemente auf der Webseite beliebig ausrichten. Dazu muss für jedes Element die Standard-Ausrichtung außer Kraft gesetzt und neu definiert werden.
Dieses Muster-Template demonstriert die Positionierung mit display, position und float am Beispiel eines responsiven Zwei Spalten Standard Layouts.