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 - Cascading Style Sheets) ist eine formale Sprache, die das Aussehen eines Dokuments beschreibt, das mit einer Auszeichnungssprache geschrieben wurde.

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

Der Zweck der Erstellung von CSS

CSS wird von Webseiten-Erstellern verwendet, um Farben, Schriftarten, die Position einzelner Blöcke und andere Aspekte der Darstellung dieser Webseiten anzugeben. Der Hauptzweck der Entwicklung von CSS 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 (die nun in der formalen CSS-Sprache erzeugt wird) zu trennen. Diese Trennung kann die Verfügbarkeit eines Dokuments erhöhen, eine größere Flexibilität und Kontrolle über seine Darstellung ermöglichen sowie die Komplexität und Wiederholbarkeit in strukturierten Inhalten reduzieren. Darüber hinaus können Sie mit CSS das gleiche Dokument in verschiedenen Stilen oder Ausgabemethoden darstellen, z. B. Bildschirmpräsentation, Druckpräsentation, Sprachlesung (mit einem speziellen Sprachbrowser oder Bildschirmleseprogramm) oder bei Ausgabe über Braille.

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 im Webdokument selbst, dessen Erscheinungsbild sie beschreiben, als auch in separaten Dateien, die ein CSS-Format haben, gefunden werden. (Im Wesentlichen ist das CSS-Format eine reine Textdatei. Die .css-Datei enthält nichts als eine Liste von CSS-Regeln und Kommentaren für sie.)

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

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

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

+ Wenn sich ein 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 < head> und </ head>) unmittelbar nach dem <style> -Tag, das auch (in seinen Klammern nach dem Wort url) die Adresse dieses Stylesheets angibt. Alle Regeln dieser Tabelle sind im gesamten Dokument gültig.

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

+ Wenn das Stylesheet im Dokument selbst beschrieben wird, kann es sich zwischen den Tags <style> und </ style> befinden (die sich in diesem Dokument zwischen den Tags <head> und </ head> befinden). Alle Regeln dieser Tabelle sind im gesamten Dokument gültig.

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

+ Wenn das Stylesheet im Dokument selbst beschrieben wird, kann es im Body eines einzelnen Tags (über sein Style-Attribut) dieses Dokuments gefunden werden. Alle Regeln dieser Tabelle betreffen nur 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 werden interne Stylesheets angewendet.

Um CSS zu einem XML-Dokument hinzuzufügen, muss dieses einen speziellen Verweis auf das Stylesheet enthalten. Zum Beispiel:

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

Die Hierarchie der Elemente innerhalb des Dokuments

Wie Sie wissen, werden HTML-Dokumente auf der Basis einer Hierarchie von Elementen erstellt, die in einer Baumform übersichtlich dargestellt werden können. Die HTML-Elemente füreinander können Eltern, Kinder, Vorfahrenelemente, Nachkommen, Schwesterelemente 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 ein Vorgänger eines anderen Elements, wenn es sich in der hierarchischen Struktur eines Dokuments oberhalb dieses Elements befindet.

Zum Beispiel, in dem Dokument gibt es zwei Absätze p , einschließlich der Schriftart in Fettschrift b . Dann werden Elemente b Kinder ihrer Elternelemente p und Nachkommen ihres Vorfahrenkörpers sein. Bei p- Elementen ist das body- Element wiederum nur das übergeordnete Element. Und außerdem werden diese zwei Elemente von p Schwesterelemente sein, da sie den gleichen Elternkörper haben.

In CSS können nicht nur einzelne Elemente, sondern auch Elemente, die untergeordnete Elemente, untergeordnete Elemente oder Schwesterelemente anderer Elemente sind (siehe Abschnitt "Typen von Selektoren"), mithilfe von Selektoren angegeben werden.

CSS-Konstruktionsregeln

In den ersten drei Fällen, in denen eine CSS-Tabelle mit einem Dokument verbunden wird (siehe oben), hat jede CSS-Regel aus einem Stylesheet zwei Hauptteile - einen Selektor und einen Deklarationsblock. 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 das Zeichen ";" getrennt sind. Jede Anzeige ist eine Kombination aus CSS-Eigenschaften und Werten, die durch ein ":" getrennt sind. Selektoren können in einer durch Kommas getrennten Zeile gruppiert werden. In diesem Fall wird die Eigenschaft auf jede von ihnen angewendet.

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

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