Festlegen des Layouts

Diese Auszeichnungssprache entwickelt sich stetig weiter und wird aktuell in der Version CSS Level 3 verwendet. Dieses Level ist jedoch noch nicht komplett fertiggestellt, da es Modifizierungen bedarf.

Entwicklung:

Im Jahre 1994 stellte Hakon Wium Lie auf der Veranstaltung Mosaic and the Web ‘94 zum ersten Mal das CSS vor. Bert Bos, der selbst an einem Browser mit eigener Stylesheet-Sprache arbeitete, ist darauf aufmerksam geworden. Die beiden begannen eine erfolgreiche Zusammenarbeit und entwickelten gemeinsam das CSS Level 1, welches sie 1996 vorstellten. Nur zwei Jahre später erschien schon CSS Level 2.3

An der aktuellen Version, CSS Level 3, wird immer noch seit dem Jahre 2000 gearbeitet. CSS 3 ist auf die vorherigen Versionen modular aufgebaut, was bedeutet, dass es bestimmte Teiltechniken von CSS 1 und CSS 2 aufweist. Folglich ist es abwärtskompatibel. Der Funktionsumfang wird stetig erweitert. CSS wurde normiert und kann somit für alle Browser auf gleiche Weise angewendet und von ihnen ausgelesen werden und wird daher von nahezu jeder Webdesign Agentur genutzt.

Funktionen:

Durch das CSS lässt sich bestimmen, welche Schriftarten, Farben, Hintergründe und Ränder in einer Webseite eingesetzt werden sollen. Dies wird in den CSS-Dateien festgelegt oder im Quellcode über die Inline-Befehle. Es ist jedoch empfehlenswert, die erste Methode zu verwenden. Die Größe der Schrift, die Schriftart, die Farbe und ob sie fett oder kursiv sein soll, kann sowohl für einzelne Wörter als auch für ganze Textblöcke und Textboxen definiert werden. Nicht nur das Layout, sondern auch dessen Verhalten kann für die unterschiedlichen Endgeräte festgesetzt werden. CSS wird auch für das Ausgabemedium Print verwendet.

Syntax:

Ein Stylesheet basiert auf Regeln. Eine Regel besteht aus mindestens einem Selektor sowie einem Paar geschweifte Klammern für die Attribut-Wert-Paare. Zusammen stellen sie den Deklarationsblock dar. Dort ist die Eigenschaft und der zugehörige Wert vermerkt.

Beispiel: ein Selektor besteht aus: Selektor { Eigenschaft:Wert; } Der Selektor wählt das gewünschte Element, welches verändert werden soll, z.B. eine Überschrift oder eine Textbox. Die Darstellung wird durch die Eigenschaft und dessen Wert notiert.

Wenn man beispielsweise ein Textfeld fett geschrieben und in der Schrift Times New Roman haben möchte, sieht das so aus: „Raute“Text01 { font:bold Times; }

CSS ist die Abkürzung des englischen Begriffs ,,Cascading Style Sheets“

Verschiedene Arten von Selektoren:

  • Einfache Selektoren: Dazu zählen der Typselektor, der Universalselektor und die Attributsselektoren wie ,,.class“ und ,,#id“.
  • Kombinatoren: Diese verketten mehrere Selektoren miteinander.
  • Pseudoelemente: Diese Selektoren sind, im Gegensatz zu den einfachen Selektoren, für mehrere Elemente zuständig.
  • Pseudoklassen: Hierbei wird zwischen strukturellen und dynamischen Klassen differenziert. Mit den strukturellen Klassen kann man bestimmte Elemente in der HTML-Struktur auswählen und mit den dynamischen Klassen Elemente aus einer Benutzerinteraktion herausgreifen. Ein bekanntes Beispiel dafür ist der Hover-Effekt.

Copyright Hinweis: © Fotolia.com/cobracz

Das CSS Box Modell

Es ist notwendig über Kenntnisse des CSS-Box-Modells zu verfügen, ehe man Selektoren verwendet. Bei diesem Modell wird jede Webseite als eine Box betrachtet, die bestimmte Eigenschaften aufweist, wie die Seiten (left, right, top, bottom) sowie Margin, Border und Padding-Befehle. Dieses abstrakte Raster dient als Hilfe zur Bestimmung und Festlegung des Layouts.

Media Queries

Bei Media Queries handelt es sich um ein ähnliches Konzept. Dieses wurde mit dem CSS 3 eingeführt. Media Queries fragt die Eigenschaften eines Endgerätes ab, auf dem die entsprechenden Inhalte angezeigt werden sollen. Zu diesen Eigenschaften gehören z.B. die Höhe und Breite des Browserfensters. Mit diesen Informationen können Inhalte an das jeweilige Endgerät angepasst werden und ermöglichen bspw. das responsive Webdesign.

Sie sehen gerade einen Platzhalterinhalt von Youtube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen

Vorteile und Nutzen von CSS:

  • CSS-Menüs können ohne JavaScript auskommen.
  • Durch CSS werden HTML-Wiederholungen überflüssig. Je weniger Codes gebraucht werden, desto schneller läuft die Datenübertragung ab.
  • Bei alten Webbrowsern, welche kein CSS unterstützen, können trotzdem alle Elemente, die mit CSS erstellt wurden, angezeigt werden.
  • Änderungen an Formatierungen können ausgelagert werden und gelten somit für alle Unterseiten, sodass keine separaten Änderungen durchgeführt werden müssen.

© Wirestock – stock.adobe.com