Websites bestehen aus einer Reihe von Einzelstücken, darunter Bilder, Text und verschiedene Dokumente. Zu diesen Dokumenten gehören nicht nur solche, auf die von verschiedenen Seiten aus verlinkt werden kann, wie PDF-Dateien, sondern auch die Dokumente, die verwendet werden, um die Seiten selbst zu erstellen, wie HTML-Dokumente um die Struktur einer Seite zu bestimmen und CSS (Cascading Style Sheet)-Dokumente, um das Aussehen einer Seite zu bestimmen. Dieser Artikel befasst sich mit CSS und beschreibt, was es ist und wo es heute auf Websites verwendet wird.
Eine CSS-Geschichtsstunde
CSS wurde erstmals 1997 als Möglichkeit für Webentwickler entwickelt, das visuelle Erscheinungsbild der von ihnen erstellten Webseiten zu definieren. Es sollte Web-Profis ermöglichen, den Inhalt trennen und Struktur des Codes einer Website aus der visuellen Gestaltung, was bis dahin nicht möglich war.
Die Trennung von Struktur und Stil ermöglicht es HTML, mehr von der Funktion auszuführen, auf der es ursprünglich basierte – das Markup von Inhalt, ohne sich um das Design und das Layout der Seite selbst kümmern zu müssen, was allgemein als "Look and Feel" der Seite bekannt ist Seite.
Die Entwicklung von CSS
CSS gewann erst um das Jahr 2000 an Popularität, als Webbrowser begannen, mehr als nur die grundlegenden Schriftart- und Farbaspekte dieser Auszeichnungssprache zu verwenden. Heutzutage unterstützen alle modernen Browser alle CSS Level 1, die meisten CSS Level 2 und sogar die meisten Aspekte von CSS Level 3. Während sich CSS weiterentwickelt und neue Stile eingeführt werden, haben Webbrowser damit begonnen, Module zu implementieren die neue CSS-Unterstützung in diese Browser bringen und Webdesignern leistungsstarke neue Styling-Tools zur Verfügung stellen mit.
In (vielen) Jahren gab es ausgewählte Webdesigner, die sich weigerten, CSS für die Design und Entwicklung von Websites, aber diese Praxis ist heute fast aus der Industrie verschwunden. CSS ist heute ein weit verbreiteter Standard im Webdesign und Sie werden heute kaum jemanden finden, der in der Branche arbeitet, der nicht zumindest ein grundlegendes Verständnis dieser Sprache hat.
CSS ist eine Abkürzung
Wie bereits erwähnt, steht der Begriff CSS für "Cascading Style Sheet". Lassen Sie uns diesen Satz etwas herunterbrechen, um genauer zu erklären, was diese Dokumente tun.
Das Wort "Stylesheet" bezieht sich auf das Dokument selbst (wie HTML sind CSS-Dateien eigentlich nur Textdokumente, die mit einer Vielzahl von Programmen bearbeitet werden können). Stylesheets werden seit vielen Jahren für die Dokumentengestaltung verwendet. Sie sind die technischen Vorgaben für ein Layout, egal ob Print oder Online. Druckdesigner verwenden seit langem Stylesheets, um sicherzustellen, dass ihre Designs genau nach ihren Spezifikationen gedruckt werden. Ein Stylesheet für eine Webseite dient dem gleichen Zweck, jedoch mit der zusätzlichen Funktionalität, dem Webbrowser auch mitzuteilen, wie das angezeigte Dokument zu rendern ist. Heute können auch CSS-Stylesheets verwendet werden Medien-Anfragen um die Art und Weise zu ändern, nach der eine Seite sucht verschiedene Geräte und Bildschirmgrößen. Dies ist unglaublich wichtig, da es ermöglicht, dass ein einzelnes HTML-Dokument je nach Bildschirm, der für den Zugriff verwendet wird, unterschiedlich gerendert werden kann.
Kaskade ist der ganz besondere Teil des Begriffs "Cascading Style Sheet". Ein Web-Stylesheet soll durch eine Reihe von Stilen in diesem Blatt kaskadieren, wie ein Fluss über einem Wasserfall. Das Wasser im Fluss trifft auf alle Felsen im Wasserfall, aber nur die am unteren Rand beeinflussen genau, wo das Wasser fließen wird. Das gleiche gilt für die Kaskade in Website-Stylesheets.
Designer-Stylesheets überschreiben Browser-Standard-Stylesheets
Jede Webseite ist von mindestens einem Stylesheet betroffen, auch wenn der Webdesigner keine Styles anwendet. Dieses Stylesheet ist das User-Agent-Stylesheet — Auch bekannt als die Standardstile, die der Webbrowser verwendet, um eine Seite anzuzeigen, wenn keine anderen Anweisungen bereitgestellt werden. Beispielsweise werden Hyperlinks standardmäßig blau dargestellt und unterstrichen. Diese Stile stammen aus dem Standard-Stylesheet eines Webbrowsers. Wenn der Webdesigner jedoch andere Anweisungen bereitstellt, muss der Browser wissen, welche Anweisungen Vorrang haben. Alle Browser haben ihre eigenen Standardstile, aber viele dieser Standardeinstellungen (wie die blau unterstrichenen Textlinks) werden von allen oder den meisten gängigen Browsern und Versionen verwendet.
Für ein weiteres Beispiel für einen Browser-Standard ist in unserem Webbrowser die Standardschriftart "Times New Roman" in Größe 16 angezeigt. Fast keine der Seiten, die wir besuchen, wird jedoch in dieser Schriftfamilie und -größe angezeigt. Dies liegt daran, dass die Kaskade definiert, dass die zweiten Stylesheets, die von den Designern selbst festgelegt werden, neu definiert werden die Schriftgröße und Familie und überschreibt die Standardeinstellungen unseres Webbrowsers. Alle Stylesheets, die Sie für eine Webseite erstellen, haben mehr Spezifität als die Standardstile eines Browsers, sodass diese Standardeinstellungen nur gelten, wenn Ihr Stylesheet sie nicht überschreibt. Wenn Links blau und unterstrichen sein sollen, müssen Sie nichts tun, da dies die Standardeinstellung ist. aber wenn die CSS-Datei Ihrer Site besagt, dass Links grün sein sollten, überschreibt diese Farbe das Standardblau. Die Unterstreichung bleibt in diesem Beispiel erhalten, da Sie nichts anderes angegeben haben.
Wo wird CSS verwendet?
CSS kann auch verwendet werden, um zu definieren, wie Webseiten aussehen sollen, wenn sie in anderen Medien als einem angezeigt werden Webbrowser. Sie können beispielsweise ein Druck-Stylesheet erstellen, das definiert, wie die Webseite ausgedruckt werden soll. Da Webseitenelemente wie Navigationsschaltflächen oder Webformulare auf der gedruckten Seite keinen Zweck haben, kann ein Druckstilblatt verwendet werden, um diese Bereiche beim Drucken einer Seite "auszuschalten". Obwohl dies auf vielen Websites nicht wirklich üblich ist, ist die Option zum Erstellen von Druckstilvorlagen leistungsstark und attraktiv (in unserer Erfahrung — die meisten Webprofis tun dies nicht, nur weil der Budgetumfang einer Site diese zusätzliche Arbeit nicht erfordert getan werden).
Warum ist CSS wichtig?
CSS ist eines der mächtigsten Tools, die ein Webdesigner lernen kann, da Sie damit das gesamte visuelle Erscheinungsbild einer Website beeinflussen können. Gut geschriebene Stylesheets können schnell aktualisiert werden und ermöglichen es Websites, die visuellen Prioritäten auf der Website zu ändern Bildschirm, der den Besuchern wiederum Wert und Fokus zeigt, ohne dass Änderungen an der zugrunde liegenden HTML-Markup.
Die größte Herausforderung von CSS besteht darin, dass es einiges zu lernen gibt – und da sich die Browser täglich ändern, funktioniert das heute gut well kann morgen keinen Sinn machen, da neue Stile unterstützt werden und andere aus einem bestimmten Grund fallen gelassen werden oder in Ungnade fallen oder Ein weiterer.
Die CSS-Lernkurve lohnt sich
Da CSS kaskadieren und kombinieren kann und wenn man bedenkt, wie verschiedene Browser die Direktiven unterschiedlich interpretieren und implementieren können, kann CSS schwieriger zu erlernen sein als reines HTML. CSS ändert sich auch in Browsern auf eine Weise, die HTML wirklich nicht tut. Sobald Sie jedoch mit der Verwendung von CSS beginnen, werden Sie feststellen, dass Sie durch die Nutzung der Leistungsfähigkeit von Stylesheets unglaubliche Flexibilität beim Layout von Webseiten und beim Definieren ihres Erscheinungsbilds erhalten. Unterwegs sammelst du eine "Trickkiste" an Stilen und Ansätzen, die in der Vergangenheit für dich funktioniert haben und auf die du dich im Laufe der Zeit wieder zurückgreifen kannst neue Webseiten erstellen in der Zukunft.