Was sind Cascading Style Sheets und wofür wird CSS verwendet?

Mai 15, 2021 Eskere Guru

CSS gehört neben HTML und JavaScript zu einem Triplett der wichtigsten Webtechnologien. Bei sorgfältiger Planung trägt CSS zur Trennung von Bedenken bei. Unabhängige Ressourcen steuern die Struktur, die Darstellung und das Verhalten eines Inhalts.

Stylesheets spielen eine wichtige Rolle für die Zugänglichkeit, Skalierbarkeit und sogar die Webleistung. Als Inhaltsautor oder Webdesigner können Sie steuern, wie Geräte Inhalte rendern. Vom Layout über die Schriftgröße bis hin zur Farbe verwandelt CSS Inhalte in schön aussehende Seiten.

Wie sieht CSS aus?

CSS ist eine große Sprache – es gibt viele verschiedene Dinge zu stylen! Die Syntax ist jedoch unkompliziert und es müssen nur wenige Regeln gelernt werden.

HTML-Elemente haben verschiedene Eigenschaften, die CSS formatieren kann. Die Farbeigenschaft legt die Vordergrundfarbe (z. B. Text) fest. Die Schriftgröße hängt von der Eigenschaft Schriftgröße ab .

Jede Eigenschaft kann auf einen unterstützten Wert festgelegt werden. Die Zuweisung eines Wertes zu einer Eigenschaft ist eine "Deklaration". Im Allgemeinen sehen sie so aus:

 property: value

Beispielsweise:

 color: red

Werte für verschiedene Eigenschaften können sehr unterschiedlich aussehen, sogar Werte für dieselbe Eigenschaft. Hier sind zum Beispiel zwei weitere Möglichkeiten, die vorherige Erklärung zu schreiben:

 color: #ff0000
 color: rgb(255, 0, 0)

Wie HTML und Stylesheets zusammenkommen

Sie können HTML und CSS auf verschiedene Arten kombinieren, jede mit ihren Vorteilen.

Schreibstile Inline

Die einfachste Methode besteht darin, Stildeklarationen direkt an ein Element in der HTML-Datei anzuhängen. Sie können dies wie so das Stil – Attribut:

 <body style="color: red">
 <p>Most of this text is red …</p>
 <p style="color: blue">… but this isn't!</p>
 </body>

Solche Inline-Styling-Elemente können zwar praktisch sein, haben jedoch mehrere Nachteile. Zunächst einmal kompliziert es den HTML-Code und erschwert das Lesen auf einen Blick. Es ist auch umständlich zu pflegen: Stellen Sie sich ein langes Dokument vor, in dem wir die Farbe jedes Absatzes festlegen möchten. Dies ist CSS, aber es sind keine "Style Sheets".

Einbetten von Stilen in den Kopf

Mit dem zweiten Mechanismus, dem Einbetten, können Sie sehen, wie ein Stylesheet aussieht. Mit diesem Ansatz sammeln wir alle Stildeklarationen zusammen in einem Stilelement in dem Kopf unseres Dokuments. Es wird ungefähr so aussehen:

 <!DOCTYPE html>
 <html>
 <head>
 <style>
 /* style instructions go here */
 </style>
 </head>
 <body>
 ...

Unsere Stilanweisungen benötigen jedoch etwas mehr Details als zuvor. Da wir sie in den Kopf verschoben haben, ist nicht mehr jede Regel einem Element zugeordnet. Wir hätten vielleicht Farbe deklarieren können : Rot , aber was sollte diese Farbe haben?

Hier kommen CSS-Selektoren ins Spiel. Mit ihnen können wir bestimmte Teile der Seite als Ziel festlegen und ihren Stil mithilfe dieser Syntax an einer Stelle definieren:

 selector {
 declaration1;
 declaration2;
 /* etc. */
 }

Um beispielsweise den Text von Absätzen blau zu gestalten, können Sie Folgendes angeben:

 p {
 color: blue;
 }

In diesem Beispiel ist der Selektor einfach p , was allen Absatzelementen in unserem Dokument entspricht. Der gesamte Text wird blau gefärbt, solange er sich in <p> -Tags befindet.

Verknüpfen eines externen Stylesheets

Die letzte Methode, die behandelt werden muss, ist das Verknüpfen. Dies ist bei weitem der nützlichste Ansatz, für den Sie sich die meiste Zeit entscheiden sollten. Stattdessen CSS – Regeln im Stil Element direkt in Ihr Dokument einzubetten, können Sie sie heraus in eine separate Datei bewegen.

 <link rel="stylesheet" href="styles.css" />

Fügen Sie diesen Code in die <head> -Tags Ihrer HTML-Datei ein, um Ihr externes Stylesheet zu verknüpfen.

Die Kraft von CSS

Mit der verknüpften Methode nutzen wir eine Kernkompetenz von CSS: die Trennung von Bedenken. Alle semantischen Informationen – was der Inhalt bedeutet – sind im HTML-Dokument enthalten. Das Styling – wie es aussieht – befindet sich in einer separaten Datei, dem Stylesheet.

Hier sind nur einige Vorteile dieser Trennung:

Sie können ein Stylesheet einfach durch Ändern der Dateireferenz austauschen. Dies kann sogar dynamisch geschehen. In einem Schritt können Sie das gesamte Erscheinungsbild einer Seite ändern.
Viele Seiten können dieselben Stylesheets wie erforderlich verwenden. Durch Ändern einer einzelnen Datei können Sie das Erscheinungsbild einer gesamten Website aktualisieren.
Das Aufteilen einer Seite in "Inhalt" und "Stil" hat technische Vorteile. Proxies und Browser können einzelne Dateien separat zwischenspeichern. Dies bedeutet, dass eine Site ihre Stilinformationen einmal senden kann, anstatt sie in jede einzelne Seite aufzunehmen.
Bei der Zusammenarbeit können verschiedene Teams ihre Stärken ausspielen und separate Dateien erstellen und bearbeiten, ohne sich gegenseitig zu beeinflussen.

Die Kaskade erklären

Sie haben viel über Stile und Stylesheets gelernt, aber was ist mit dem „kaskadierenden“ Teil von CSS?

Die Kaskade entscheidet darüber, welche Stile verwendet werden sollen, wenn mehrere Stylesheets vorhanden sind. Sie haben gesehen, wie ein Autor Stile für seinen Inhalt angeben kann. Ein weiteres Merkmal von CSS ist, dass es Lesern und Browserherstellern auch ein Mitspracherecht einräumt.

Möglicherweise haben Sie sich bereits über Standardstile gewundert. Wie erscheint beispielsweise ein H1- Element groß und fett, auch ohne Autoren-Stylesheets? Dies ist einer Reihe spezieller Regeln zu verdanken, aus denen sich das Stylesheet des Benutzeragenten zusammensetzt. Diese Regeln werden zunächst von Ihrem Webbrowser auf jede von Ihnen besuchte Seite angewendet.

Die Kaskade gibt an, dass nach den User-Agent-Stilen ein Autoren-Stylesheet angewendet wird. Wenn unser Browser "Überschriften sind fett" sagt, der Autor der Seite jedoch "Überschriften auf dieser Seite sind hell" deklariert, werden sie hell.

Es gibt eine andere Stylesheet-Quelle, die dem Leser eine gewisse Kontrolle übergibt. Theoretisch kann jeder Webbenutzer ein Benutzer-Stylesheet mit benutzerdefinierten Regeln verwalten. Diese befinden sich in der Mitte: Benutzerregeln überschreiben die Standard-Browsereinstellungen, werden jedoch selbst von Autorenstilen überschrieben. Leider war die Unterstützung für Benutzer-Stylesheets noch nie weit verbreitet.

Targeting verschiedener Medien

Sie können Stylesheets in verschiedenen Kontexten außerhalb des Bildschirms verwenden. Das Medien – Attribut des Verbindungselements definiert , welche Medientypen das Stylesheet gilt. Beispielsweise können Sie ein Stylesheet für den Druck mithilfe von Markups wie folgt definieren:

 <link rel="stylesheet" href="print.css" media="print" />

Sie können allgemeine Stile in einem globalen Stylesheet und medienspezifische Stile in separaten Dateien zusammenfassen. Es gibt sogar Medientypen für akustische oder Braille-Präsentationen Ihrer Inhalte. CSS ist ein wichtiges Instrument zur Verbesserung der Barrierefreiheit.

Websites wie Wikipedia verwenden CSS, um ihren Druckstil zu steuern, unerwünschte Elemente auszublenden und das Layout zu vereinfachen.

Was sind Cascading Style Sheets und wofür wird CSS verwendet? - print wikipedia

CSS lässt HTML gut aussehen

Cascading Style Sheets decken eine Menge ab: Kaskade, Vererbung, Selektoren, Quellen, Medien usw. Aber ihre Leistungsfähigkeit ermöglicht das moderne Web. Dies ist ein Medium, das integrierte Funktionen für Wiederverwendbarkeit, Flexibilität und Zugänglichkeit bietet.

In unserem Spickzettel mit allen wichtigen CSS3-Eigenschaften erfahren Sie, wie viel CSS in vollem Umfang zur Verfügung steht und wie viel es zu bieten hat.