Was ist CSS?

Veröffentlicht: 2019-03-08

Zuletzt aktualisiert am 22. April 2020

Cascading Style Sheets for the web Im World Wide Web (www) ist CSS die Abkürzung für Cascading Style Sheets. CSS ist eine Stylesheet-Sprache, die zur Beschreibung der Präsentation eines Dokuments verwendet wird, das in einer Auszeichnungssprache, üblicherweise HTML, geschrieben ist. CSS regelt, wie das Layout und der Inhalt einer Webseite auf einem Bildschirm, Papier oder in anderen Medien angezeigt werden sollen. CSS spart viel Arbeit, weil es das Layout mehrerer Webseiten auf einmal steuert.

Ein Dokument ist üblicherweise eine Textdatei, die mit einer Auszeichnungssprache wie HTML strukturiert ist. Das Präsentieren eines Dokuments bedeutet, es in eine nutzbare Form umzuwandeln, die visuell auf einem Computerbildschirm über einen Webbrowser wie Chrome, Firefox, Opera, Microsoft Edge und andere dargestellt wird. Webbrowser wenden CSS-Regeln auf ein Dokument an, um zu beeinflussen, wie sie angezeigt werden.

Dieser Blog ist eine allgemeine Einführung in Cascading Style Sheets (CSS) und definiert, was sie sind und wofür sie im Web verwendet werden. Dies ist eine Einführung, die grundlegende Fragen dazu beantwortet, ohne tief in die wunderbare und interessante Welt von CSS einzudringen.

Dass! Das Unternehmen bietet fesselnde und effektive Webdesign-Dienstleistungen für Agenturen weltweit. Erfahren Sie mehr über unsere White-Label-Webdesign-Services und wie wir Ihnen und Ihren Kunden helfen können, ihre Webpräsenz zu erstellen oder zu verbessern. Beginnen Sie noch heute!

CSS wurde 1994 initiiert. Es wurde vom W3C erstellt und wird gepflegt. Die CSS-Arbeitsgruppe des W3C erstellt Dokumente, die als Spezifikationen bezeichnet werden. Nachdem Spezifikationen von den W3C-Mitgliedern diskutiert und offiziell ratifiziert wurden, werden sie zu einer Empfehlung.

Cascading Style Sheets Level 1 (CSS1) kam im Dezember 1996 als Empfehlung des W3C heraus. CSS2 wurde im Mai 1998 zu einer W3C-Empfehlung. CSS Level 3, das 1998 gestartet wurde, befindet sich noch in der Entwicklung. CSS3 ist eine Kombination aus CSS2-Spezifikationen und neuen Spezifikationen, die als Module bezeichnet werden. Eine CSS-Spezifikation wird aus einer Reihe von Eigenschaften gebildet, deren Werte festgelegt sind, um zu aktualisieren, wie der HTML-Inhalt angezeigt wird.

CSS wurde eingeführt, um den Prozess der Präsentation unserer Auszeichnungssprachendokumente zu vereinfachen. Sie können eine Vielzahl von Eigenschaften steuern, wie z.

  • Farbe des Textes,
  • Stil der Schriftarten,
  • Abstand zwischen Absätzen,
  • wie Spalten bemessen und angeordnet sind,
  • Hintergrundbilder oder Farben,
  • Layout-Designs,
  • Variationen in der Darstellung je nach Bildschirmgröße (Media Queries).

Wie wenden wir CSS an?

Cascading Style Sheets for the web Es gibt vier Möglichkeiten, Stile auf unsere HTML-Dokumente anzuwenden. Die am häufigsten verwendeten Methoden sind externe CSS-Dateien, die in ein <style>-Element in unserem HTML-Dokument eingebettet sind. Wenn verschiedene Blattstile angegeben werden, werden die Stile mit der folgenden Priorität in neue Stile kaskadiert (je höher die Zahl, desto weniger wichtig):

Priorität 4: Browser-Standard

Browser enthalten einige Stile, die für uns vorab geschrieben wurden. Manchmal möchten wir diese vorinstallierten Stile nicht, also können wir sie überschreiben. Es gibt einige Browser, die moderne CSS-Spezifikationen nicht unterstützen oder eine eigene Form der Verwendung der CSS-Eigenschaften haben. Aus diesem Grund sollten wir vorsichtig sein, wenn wir unser CSS in ein HTML-Dokument schreiben.

That! Company White Label Services

Priorität 3: Externe Stylesheet-Datei

Das <link>-Element kann verwendet werden, um eine externe Stylesheet-Datei in Ihr HTML-Dokument einzubinden. Ein externes Stylesheet ist eine separate Textdatei mit der Erweiterung „.css“. Wir definieren alle Stilregeln in dieser Textdatei und fügen diese Datei dann in jedes HTML-Dokument innerhalb der <head>…</head>-Tags mit dem <link>-Element ein.

 <link rel="stylesheet" type="text/css" href="style.css" />

Priorität 2: Eingebettet in das HTML-Dokument

Wir können unsere CSS-Regeln in ein HTML-Dokument einfügen, indem wir das <style>-Element verwenden, das die Regeln enthält. Die <style>…</style>-Tags werden innerhalb der <head>…</head>-Tags platziert.

 <Stil>
 Selektor {
 Eigentumswert;
 }
 </style>

Priorität 1: Inline in unseren HTML-Elementen

Wir können das style-Attribut jedes HTML-Elements verwenden, um Stilregeln zu definieren. Diese Regeln werden nur auf dieses Element angewendet.

 <p>Hallo Welt!</p>

Überschreiben von CSS-Regeln

Wir haben vier Möglichkeiten beschrieben, Stylesheet-Regeln auf unser HTML-Dokument anzuwenden. Hier ist die Regel, um jede Stylesheet-Regel zu überschreiben:

Jedes Inline-Stylesheet hat die höchste Priorität. Es überschreibt also alle Regeln, die in <style>…</style>-Tags definiert sind, oder Regeln, die in einer externen Stylesheet-Datei definiert sind.

Jede in <style>…</style>-Tags definierte Regel überschreibt Regeln, die in einer externen Stylesheet-Datei definiert sind.

Jede in der externen Stylesheet-Datei definierte Regel hat die niedrigste Priorität, und in dieser Datei definierte Regeln werden nur angewendet, wenn die beiden oben genannten Regeln nicht anwendbar sind.

CSS-Selektoren

Eine CSS-Regel wird vom Browser interpretiert und dann auf die entsprechenden Elemente in unserem HTML-Dokument angewendet. Eine Stilregel besteht aus drei Teilen:

  • Selector − wird verwendet, um HTML-Elemente anhand ihres Elementnamens, ihrer ID, Klasse, ihres Attributs und mehr zu „finden“ (oder auszuwählen).
  • Eigenschaft − ist eine Stilart des CSS. Dies können Farbe, Rahmen, Hintergrund, Schriftart, Anzeige, Textausrichtung, Ränder, Zeilenabstand usw. sein.
  • Wert − wird Eigenschaften zugewiesen. Beispielsweise kann die Eigenschaft background-color entweder rot oder grün sein.

CSS-Regelsyntax

Die Syntax einer CSS-Regel besteht aus einem Selektor und einer Deklaration von Eigenschaft und Wert:

 Selektor { Eigenschaft: Wert; }

Der Selektor zeigt auf das zu formatierende HTML-Element.

Der Deklarationsblock (in geschweiften Klammern) enthält eine oder mehrere durch Semikolon getrennte Deklarationen.

Jede Deklaration enthält einen CSS-Eigenschaftsnamen und einen Wert, getrennt durch einen Doppelpunkt.

Wir können eine CSS-Regel schreiben und dann dieselbe Regel in mehreren HTML-Elementen und Dokumenten wiederverwenden. Mit CSS müssen wir nicht jedes Mal HTML-Inline-Tag-Attribute schreiben, was nur für das gestylte Element gilt. Wir schreiben einfach eine CSS-Regel und wenden sie auf alle Vorkommen dieses Tag-Elements an. Weniger Code bedeutet also schnellere Seiten.

Änderungen und Wartung unseres HTML-Dokuments sind einfach, wenn wir externe oder eingebettete Stilregeln verwenden. Wir ändern einfach die Stilregel und alle Elemente in unseren HTML-Dokumenten werden automatisch aktualisiert. Mit CSS haben wir über Medienabfragen Zugriff auf mehrere Gerätebildschirmgrößen. Medienabfragen ermöglichen es uns, unser HTML-Dokument für mehr als einen Gerätetyp zu optimieren. Mit demselben HTML-Dokument können wir verschiedene Versionen unserer Webseiten präsentieren.

Weiterlesen

Auch dieser Beitrag weckt kaum das Interesse des Lesers, etwas über CSS und die Vielfalt der verfügbaren Dinge zu lernen, um unsere HTML-Dokumente zu steuern. Es ist super leistungsfähig und ein sehr wichtiger Teil des Webs. Einige Hauptressourcen, in denen Sie tiefer eintauchen können, sind:

W3C-Schule

MDN

CSS-Tutorial