This page has been robot translated, sorry for typos if any. Original content here.

CSS - Cascading Stylesheets

CSS - Cascading Style Sheets

CSS (Englisch Cascading Style Sheets) ist eine formale Sprache zum Beschreiben der Darstellung eines Dokuments, das mit einer Auszeichnungssprache geschrieben wurde.

Es wird hauptsächlich verwendet, um das Erscheinungsbild von Webseiten zu beschreiben, die mit den Markup-Sprachen HTML und XHTML geschrieben wurden, kann aber auch auf beliebige XML-Dokumente angewendet werden, zum Beispiel auf SVG oder XUL.

Der Zweck der Erstellung von CSS

CSS wird von den Erstellern von Webseiten verwendet, um Farben, Schriftarten, die Position einzelner Blöcke und andere Aspekte der Darstellung dieser Webseiten anzugeben. Der Hauptzweck der CSS-Entwicklung bestand darin, die Beschreibung der logischen Struktur einer Webseite (die mit HTML oder anderen Markup-Sprachen erstellt wurde) von der Beschreibung des Aussehens dieser Webseite zu trennen (die nun in der formalen CSS-Sprache erfolgt). Diese Trennung kann die Verfügbarkeit des Dokuments erhöhen, eine größere Flexibilität und die Möglichkeit bieten, die Präsentation zu verwalten und außerdem die Komplexität und Wiederholbarkeit struktureller Inhalte zu reduzieren. Darüber hinaus können Sie mit CSS das gleiche Dokument in verschiedenen Stilen oder Ausgabemethoden darstellen, z. B. in einer Bildschirmdarstellung, einer gedruckten Präsentation, einer Sprachausgabe (einem speziellen Sprachbrowser oder Bildschirmleser) oder von Geräten, die Braille verwenden.

Möglichkeiten, CSS mit einem Dokument zu verbinden

CSS-Regeln sind in der formalen CSS-Sprache geschrieben und befinden sich in Stylesheets, dh Stylesheets enthalten CSS-Regeln. Diese Stylesheets können sowohl in das Webdokument selbst, dessen Erscheinungsbild sie beschreiben, als auch in einzelne Dateien im CSS-Format platziert werden. (Tatsächlich ist das CSS-Format eine reine Textdatei. Die .css-Datei enthält nichts als eine Liste von CSS-Regeln und Kommentaren zu ihnen.)

Das heißt, diese Stylesheets können verbunden werden, eingebettet in das Webdokument, das sie auf vier verschiedene Arten beschreiben:

+ Wenn sich das Stylesheet in einer separaten Datei befindet, kann es über das <link> -Tag in diesem Dokument zwischen den <head> - und </ head> -Tags mit dem Web-Dokument verbunden werden. (Das <link> -Tag hat ein href-Attribut, das den Wert der Adresse dieses Stylesheets hat). Alle Regeln dieser Tabelle gelten für das gesamte Dokument.

  <! DOCTYPE html>
  <html>
  <Kopf>
  .....
  <link rel = "stylesheet" href = "style.css">
  </ Kopf>
  <Körper>
  .....
  </ body>
  </ html>
 

+ Wenn sich das Stylesheet in einer separaten Datei befindet, kann es über die Anweisung @import, die sich in diesem Dokument zwischen den Tags <style> und </ style> befindet (die wiederum in diesem Dokument zwischen den < head> und </ head>) unmittelbar nach dem <style> -Tag, das auch (in Klammern nach dem Wort url) die Adresse dieses Stylesheets angibt. Alle Regeln dieser Tabelle gelten für das gesamte Dokument.

  <! DOCTYPE html>
  <html>
  <Kopf>
  .....
  <style media = "alle">
  @ import URL (style.css);
  </ Stil>
  </ Kopf>
  </ html>
 

+ Wenn ein Stylesheet im Dokument selbst beschrieben wird, kann es zwischen den Tags <style> und </ style> eingefügt werden (die sich wiederum in diesem Dokument zwischen den Tags <head> und </ head> befinden). Alle Regeln dieser Tabelle gelten für das gesamte Dokument.

  <! DOCTYPE html>
  <html>
  <Kopf>
  .....
  <Stil>
  Körper {
  Farbe: rot;
  }
  </ Stil>
  </ Kopf>
  <Körper>
  .....
  </ body>
  </ html>
 

+ Wenn ein Stylesheet im Dokument selbst beschrieben wird, kann es sich im Body eines bestimmten Tags (über sein style-Attribut) dieses Dokuments befinden. Alle Regeln in dieser Tabelle gelten nur für den Inhalt dieses Tags.

  <! DOCTYPE>
  <html>
  <Kopf>
  .....
  </ Kopf>
  <Körper>
  <p style = "Schriftgröße: 20px; Farbe: grün; Schriftfamilie: Arial, Helvetica, Sans-Serif">
  .....
  </ p>
  </ body>
  </ html>
 

In den ersten beiden Fällen wird gesagt, dass externe Stylesheets auf das Dokument angewendet werden, und in den zweiten beiden Fällen - interne Stylesheets.

Um CSS zu einem XML-Dokument hinzuzufügen, muss dieses eine spezielle Verknüpfung zum Stylesheet enthalten. Zum Beispiel:

  <? xml-stylesheet type = "text / css" href = "style.css"?> 

Hierarchie von Elementen innerhalb eines Dokuments

Wie Sie wissen, werden HTML-Dokumente auf der Basis der Hierarchie von Elementen erstellt, die in einer baumähnlichen Form visuell dargestellt werden können. HTML-Elemente füreinander können Eltern, Kind, Vorfahren, Nachkommen, Schwester sein .

Ein Element ist das übergeordnete Element eines anderen Elements, wenn es sich direkt in der hierarchischen Struktur des Dokuments direkt über diesem Element befindet. Ein Element ist der Vorgänger eines anderen Elements, wenn es sich in der hierarchischen Struktur des Dokuments oberhalb dieses Elements befindet.

Zum Beispiel gibt es zwei Absätze von p in dem Dokument, einschließlich einer Schriftart mit Fettdruck b . Dann sind die Elemente von b die Kinder ihrer Elternelemente p und Nachkommen ihres Vorfahrenkörpers. Für Elemente p ist das Körperelement wiederum nur das Elternelement. Und außerdem werden diese zwei Elemente p Schwesterelemente sein, da sie den gleichen Elternkörper haben.

In CSS können nicht nur einzelne Elemente mit Selektoren angegeben werden, sondern auch Elemente, die Nachkommen, Kinder oder Schwesterelemente anderer Elemente sind (siehe Unterabschnitt "Typen von Selektoren").

CSS-Bauregeln

In den ersten drei Fällen, in denen eine CSS-Tabelle mit einem Dokument verbunden wird (siehe oben), besteht jede CSS-Regel aus dem Stylesheet aus zwei Hauptteilen - einem Selektor und einem Anzeigenblock. Der Selektor auf der linken Seite der Regel bestimmt, auf welche Teile des Dokuments die Regel angewendet wird. Der Anzeigenblock befindet sich auf der rechten Seite der Regel. Es wird in geschweifte Klammern gesetzt und besteht wiederum aus einer oder mehreren Deklarationen, die durch ein ";" getrennt sind. Jede Deklaration ist eine Kombination aus einer CSS-Eigenschaft und einem Wert, der durch ein ":" getrennt ist. Selektoren können in einer Zeile, getrennt durch ein Komma, gruppiert werden. In diesem Fall wird die Eigenschaft auf jede von ihnen angewendet.

  Selektor, Selektor {
  Eigenschaft: Wert;
  Eigenschaft: Wert;
  Eigenschaft: Wert;
  }
 

Im vierten Fall, bei dem eine CSS-Tabelle mit einem Dokument verbunden wird (siehe Liste), ist die CSS-Regel (der Wert des style-Attributs des Tags, auf dem sie ausgeführt wird) eine Liste von Anzeigen (die "CSS-Eigenschaft: value" ), getrennt durch ein ";" .