Websites bestehen aus einer Reihe von Einzelteilen, einschließlich Bildern, Text und verschiedenen Dokumenten. Zu diesen Dokumenten gehören nicht nur solche, auf die von verschiedenen Seiten (z. B. PDF-Dateien) aus verlinkt werden kann, sondern auch die Dokumente, die zum Erstellen der Seiten selbst verwendet werden, z. B. HTML-Dokumente zur Bestimmung der Struktur einer Seite und CSS-Dokumente (Cascading Style Sheet) das Aussehen einer Seite 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 entwickelt, um Webentwicklern das visuelle Erscheinungsbild der von ihnen erstellten Webseiten zu definieren. Web-Professionals sollten in die Lage versetzt werden, Inhalt und Struktur des Website-Codes vom visuellen Design zu trennen, was zuvor nicht möglich war.
Durch die Trennung von Struktur und Stil kann HTML mehr von der Funktion ausführen, auf der es ursprünglich basierte - dem Markup von Inhalten, ohne sich um das Design und das Layout der Seite selbst kümmern zu müssen. Dies wird allgemein als "Look and Feel" bezeichnet. der Seite.
CSS gewann erst 2000 an Popularität, als Webbrowser mehr als die grundlegenden Schrift- und Farbaspekte dieser Auszeichnungssprache verwendeten. Heute unterstützen alle modernen Browser alle CSS Level 1, die meisten CSS Level 2 und sogar die meisten Aspekte von CSS Level 3. Da sich CSS ständig weiterentwickelt und neue Stile eingeführt werden, haben Webbrowser damit begonnen, Module zu implementieren, die neue CSS-Unterstützung bieten in diese Browser und geben Webdesignern leistungsstarke neue Styling-Tools, mit denen sie arbeiten können.
In den vergangenen (vielen) Jahren gab es ausgewählte Webdesigner, die sich weigerten, CSS für das Design und die Entwicklung von Websites zu verwenden, aber diese Praxis ist heute aus der Industrie fast völlig verschwunden. CSS ist heute ein weit verbreiteter Standard im Webdesign, und es würde Ihnen schwer fallen, jemanden zu finden, der heute in der Branche tätig ist und nicht über ein grundlegendes Verständnis dieser Sprache verfügt.
CSS ist eine Abkürzung
Wie bereits erwähnt, steht der Begriff CSS für "Cascading Style Sheet". Lassen Sie uns diesen Satz ein wenig aufschlüsseln, um ausführlicher 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 Dokumentgestaltung verwendet. Sie sind die technischen Spezifikationen für ein Layout, ob gedruckt oder online. Druckdesigner verwenden seit langem Stylesheets, um sicherzustellen, dass ihre Designs genau nach ihren Vorgaben gedruckt werden. Ein Stylesheet für eine Webseite dient demselben Zweck, jedoch mit der zusätzlichen Funktionalität, dem Webbrowser auch mitzuteilen, wie das angezeigte Dokument gerendert werden soll. Heute können CSS-Stylesheets auch Medienabfragen verwenden, um die Art und Weise zu ändern, auf der eine Seite nach verschiedenen Geräten und Bildschirmgrößen sucht. Dies ist unglaublich wichtig, da ein einzelnes HTML-Dokument je nach dem für den Zugriff verwendeten Bildschirm unterschiedlich dargestellt werden kann.
Cascade ist der ganz besondere Teil des Begriffs "Cascading Style Sheet". Ein Web-Stylesheet soll eine Reihe von Styles in diesem Blatt durchlaufen, wie ein Fluss über einem Wasserfall. Das Wasser im Fluss trifft alle Felsen im Wasserfall, aber nur diejenigen, die unten liegen, beeinflussen genau, wohin das Wasser fließt. Gleiches gilt für die Kaskade in Website-Stylesheets.
Jede Webseite ist von mindestens einem Stylesheet betroffen, auch wenn der Webdesigner keine Stile verwendet. Dieses Stylesheet ist das Stylesheet für Benutzeragenten - auch als Standardstile bezeichnet, die der Webbrowser zum Anzeigen einer Seite verwendet, wenn keine anderen Anweisungen bereitgestellt werden. Beispielsweise sind Hyperlinks standardmäßig blau und unterstrichen dargestellt. Diese Stile stammen aus dem Standard-Stylesheet eines Webbrowsers. Wenn der Webdesigner andere Anweisungen bereitstellt, muss der Browser jedoch 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 gemeinsam genutzt.
Ein anderes Beispiel für einen Browser-Standard ist in unserem Webbrowser die Standardschriftart "Times New Roman", die bei Größe 16 angezeigt wird. Nahezu keine der Seiten besucht die Anzeige in dieser Schriftfamilie und -größe. Dies liegt daran, dass die Kaskade definiert, dass die zweiten Stylesheets, die von den Designern selbst festgelegt werden, die Schriftgröße und -familie neu definieren und die Standardeinstellungen unseres Webbrowsers überschreiben. Alle Stylesheets, die Sie für eine Webseite erstellen, sind genauer als die Standardstile eines Browsers. Daher gelten diese Standardeinstellungen nur, wenn Ihr Stylesheet sie nicht überschreibt. Wenn Sie möchten, dass Links blau und unterstrichen angezeigt werden, müssen Sie nichts tun, da dies die Standardeinstellung ist. Wenn die CSS-Datei Ihrer Site jedoch angibt, 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 festzulegen, wie Webseiten aussehen sollen, wenn sie in anderen Medien als einem Webbrowser angezeigt werden. Sie können beispielsweise ein Druckformat erstellen, das definiert, wie die Webseite gedruckt 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 zu deaktivieren.Auf vielen Websites ist das zwar nicht üblich, aber die Option zum Erstellen von Druckformatvorlagen ist leistungsfähig und attraktiv (unserer Erfahrung nach tun dies die meisten Web-Profis nicht, nur weil der Budgetumfang einer Website nicht die zusätzliche Arbeit erfordert ).
Warum ist CSS wichtig?
CSS ist eines der leistungsfähigsten Werkzeuge, die ein Webdesigner erlernen kann, da Sie damit das gesamte Erscheinungsbild einer Website beeinflussen können. Gut geschriebene Stylesheets können schnell aktualisiert werden und ermöglichen Websites, die Priorität der visuellen Darstellung auf dem Bildschirm zu ändern. Dies wiederum zeigt den Besuchern Wert und Fokus, ohne dass Änderungen an dem zugrunde liegenden HTML-Markup vorgenommen werden müssen.
Die Hauptherausforderung von CSS besteht darin, dass es einiges zu lernen gibt - und da Browser sich jeden Tag ändern, macht das, was heute gut funktioniert, morgen möglicherweise keinen Sinn, da neue Stile unterstützt werden und andere aus irgendwelchen Gründen fallen gelassen oder in Ungnade geraten .
Da CSS kaskadieren und kombinieren kann und berücksichtigt, wie verschiedene Browser die Anweisungen unterschiedlich interpretieren und implementieren können, kann CSS schwieriger zu beherrschen sein als einfaches HTML. CSS ändert sich auch in Browsern auf eine Weise, die HTML wirklich nicht tut. Sobald Sie mit der Verwendung von CSS beginnen, werden Sie feststellen, dass die Nutzung der Möglichkeiten von Stylesheets Ihnen unglaubliche Flexibilität beim Layout von Webseiten und beim Definieren des Aussehens und Verhaltens von Webseiten bietet. Auf dem Weg werden Sie eine "Tasche voller Tricks" mit Stilen und Ansätzen sammeln, die in der Vergangenheit für Sie funktioniert haben und an die Sie sich beim Erstellen neuer Webseiten in der Zukunft wenden können.
Originalartikel von Jennifer Krynin. Bearbeitet von Jeremy Girard am 05.07.17
