CSS Display: Was das ist und warum es wichtig ist

Willst Du das Programmieren zwecks Webseitenerstellung lernen, kommst Du nicht um die Kurzschrift CSS display herum. Woran handelt es sich hierbei? Wie nutzt man sie? Und was kannst Du mit der Nutzung dieser shorthand erreichen?

Worum geht’s dabei?

Ähnlich wie andere Kurzschriften wie CSS border, postion oder padding ist auch die shorthand CSS display ein essenzieller Bestandteil der Programmiersprache. Doch worum handelt es sich bei diesem Codierungsmittel im Genauen?

Der Name lässt es bereits vermuten: Die Kurzschrift CSS display hat Auswirkungen darauf, wie eine Webseite angezeigt wird – ergo, wie bestimmte Elemente auf dem Display am Laptop oder Computer erscheinen. Mithilfe dieser shorthand können die Verhaltensweisen einzelner HTML-Elementes gesteuert werden. Diese werden, wenn man im Netz unterwegs ist, oftmals als Box aufgefasst. Wie diese Boxen erscheinen oder was sie machen, wird mit der shorthand CSS display festgesetzt.

Jene Boxen – samt ihres entsprechenden Inhaltes – übernehmen also entsprechende Eigenschaften. So können sie zum Beispiel als Block eingestellt werden, wie eine Tabelle oder Liste aussehen oder das Erscheinungsbild eines Inline-Inhaltes repräsentieren.

Welche Arten gibt’s?

Insgesamt kann man auf vier verschiedene Arten das Layout einer Webseite verändern. Hierzu gibt man nach der Kurzschrift die entsprechende Eigenschaft hinzu.

display: none

Durch display: none wird bewirkt, dass das jeweilige Element überhaupt nicht angezeigt wird. Der Vorteil an diesem Befehl ist, dass dadurch der Platzverbrauch im Seitenlayout reduziert wird.

Wie sieht das auf der Webseite aus? Meistens steht an entsprechender Stelle auf der Webseite ein Button. Dieser verbirgt den Inhalt des Elementes, welches vorher im Code unter display: none entsprechend strukturiert wurde.

Kleine Randnotiz: Eine ähnliche Wirkung hat auch die Eingabe von display: contents. Die Inhalte (contents) verschwinden. Anders als bei der Eingabe von display: none verfügen die Inhalte der Elemente weiterhin über ihre Eigenschaften.

display: block

Mithilfe von display:block wird die ausgewählte Box mitsamt seines Elementes letztlich auf Blockebene angezeigt. Das heißt: wie ein Absatz. Dadurch ist ein Zeilenumbruch – also eine neue Zeile – möglich. Praktisch ist das vor allem, wenn Du zum Beispiel ein Element, das inline ist, verlegen möchtest.

In diesem Zusammenhang…

display: inline

… ist auch der Befehl display: inline relevant. Dieser bewirkt nämlich das komplette Gegenteil: Mithilfe dieser shorthand kannst Du Blockelemente in ein Element, das inline ist, umwandeln.

display: inline-block

Im Zusammenhang mit dieser Kurzschrift ist der Begriff Gestaltung von besonderer Rolle. Denn: Mithilfe dieser Eingabe kannst Du das Erscheinungsbild von Inline-Elementen wie ein herkömmliches Blockelement ändern. Das meint, Du kannst die Webseite zum Beispiel wie ein Formular mit Zeilen zum Ausfüllen aussehen lassen.

display: grid

Display: grid ist ein Befehl, der zur Rastererstellung in 2D genutzt wird. Wenn Du diese Kurzschrift verwendest, kannst Du ein Element Deiner Wahl nach Belieben über das jeweilige Raster setzen. Wohingegen…

display: flex

… display:flex dafür gebraucht wird, um die entsprechenden Elemente zu strukturieren. Das funktioniert sowohl senk- als auch waagerecht.

display: table-row und display: table-cell

Möglich ist es mithilfe dieser Kurzschriften, tabellenartige Elemente auf einer Webseite erscheinen zu lassen. Die Zusätze -row und -cell beschreiben hierbei die entsprechenden Spalten und Zeilen.

Weiterhin gibt es die Möglichkeit, die bisher aufgelisteten Kurzschriften zu spezifizieren, teilweise miteinander zu kombinieren oder neue Kurzschriften zu erschaffen.

Auf einen Blick

Die Kurzschrift CSS display nutzt man dazu, um das Verhalten bzw. die Anzeige von bestimmten HTML-Elementen auf einer Webseite zu beeinflussen. Auf diese Weise können sie Eigenschaften annehmen. Sie können zum Beispiel wie eine Liste aussehen oder wie eine Tabelle wirken.

Es gibt verschiedene Arten von CSS display. Darunter: display: none, display: block, display: inline, display: inline-blick, display: grid sowie display: flex, um die wichtigsten zu nennen.

Daher stellt die Eingabe von CSS display eine der grundlegenden Befehle im Programmieren dar.

FAQ zu CSS display

Was ist CSS display?

Diese Kurzschrift hat direkten Einfluss auf die Gestaltung der dargestellten Elemente und ihrer Inhalte auf einer Webseite.

Was ist ein Inline CSS?

Ein CSS kann auf unterschiedliche Weise gestaltet sein – external, internal und inline. Ein Inline CSS wird genutzt, um einem Einzelelement auf der Webseite zu gestalten. Meist in einem besonderen und sich von den anderen Elementen abhebenden Look.

Wann spricht man von einem Inline-Element?

Davon ist die Rede, kein Zeilenumbruch stattfindet – weder vor noch nach dem entsprechendem Element.

Schreibe einen Kommentar