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

CSS - Cascading Style Sheets

CSS - Cascading Style Sheets

CSS (Cascading Style Sheets - Cascading Style Sheets) ist eine formale Sprache zur Beschreibung des Erscheinungsbilds eines Dokuments, das mit einer Auszeichnungssprache geschrieben wurde.

Es wird hauptsächlich zum Beschreiben und Entwerfen des Erscheinungsbilds von Webseiten verwendet, die mit HTML- und XHTML-Auszeichnungssprachen geschrieben wurden, kann jedoch auch auf beliebige XML-Dokumente angewendet werden, z. B. SVG oder XUL.

CSS-Ziel

CSS wird von Webseitenerstellern verwendet, um Farben, Schriftarten, das Layout einzelner Blöcke und andere Aspekte der Darstellung dieser Webseiten festzulegen. Das Hauptziel der CSS-Entwicklung bestand darin, die Beschreibung der logischen Struktur einer Webseite (die mit HTML oder anderen Auszeichnungssprachen erstellt wurde) von der Beschreibung des Erscheinungsbilds dieser Webseite (die jetzt mit der formalen CSS-Sprache erstellt wurde) zu trennen. Diese Trennung kann die Verfügbarkeit des Dokuments erhöhen, eine größere Flexibilität und die Möglichkeit zur Steuerung seiner Darstellung bieten sowie die Komplexität und Wiederholbarkeit des strukturellen Inhalts verringern. Darüber hinaus können Sie mit CSS dasselbe Dokument in verschiedenen Stilen oder Ausgabemethoden wie Bildschirmpräsentation, Druckpräsentation, Sprachausgabe (mithilfe eines speziellen Sprachbrowsers oder Bildschirmlesegeräts) oder bei der Ausgabe mit Braille-Geräten präsentieren.

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 sich sowohl im Webdokument selbst, dessen Erscheinungsbild sie beschreiben, als auch in separaten Dateien im CSS-Format befinden. (Das CSS-Format ist im Wesentlichen nur eine reine Textdatei. Die CSS-Datei enthält nur eine Liste mit CSS-Regeln und Kommentaren dazu.)

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

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

  <! DOCTYPE html>
  <html>
  <head>
  .....
  <link rel = "stylesheet" href = "style.css">
  </ head>
  <body>
  .....
  </ body>
  </ html>
 

+ Wenn sich das Stylesheet in einer separaten Datei befindet, kann es mit der in diesem Dokument zwischen den Tags <style> und </ style> (die sich wiederum zwischen den Tags <befinden) befindlichen @ import-Direktive mit dem Webdokument verbunden werden head> und </ head>) unmittelbar nach dem <style> -Tag, das ebenfalls (in Klammern nach der Wort-URL) auf die Adresse dieses Stylesheets verweist. Alle Regeln dieser Tabelle gelten im gesamten Dokument.

  <! DOCTYPE html>
  <html>
  <head>
  .....
  <style media = "all">
  @import url (style.css);
  </ style>
  </ head>
  </ html>
 

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

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

+ Wenn das Stylesheet im Dokument selbst beschrieben ist, kann es sich im Hauptteil eines einzelnen Tags (über sein Stilattribut) dieses Dokuments befinden. Alle Regeln in dieser Tabelle gelten nur für den Inhalt dieses Tags.

  <! DOCTYPE>
  <html>
  <head>
  .....
  </ head>
  <body>
  <p style = "Schriftgröße: 20px; Farbe: grün; Schriftfamilie: arial, helvetica, sans-serif">
  .....
  </ p>
  </ body>
  </ html>
 

In den ersten beiden Fällen werden externe Stylesheets auf das Dokument angewendet, in den zweiten beiden Fällen interne Stylesheets.

Um einem XML-Dokument CSS hinzuzufügen, muss dieses einen speziellen Link zum Stylesheet enthalten. Zum Beispiel:

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

Die Hierarchie der Elemente in einem Dokument

Wie Sie wissen, basieren HTML-Dokumente auf einer Hierarchie von Elementen, die grafisch in einer Baumform dargestellt werden können. HTML-Elemente für einander können Eltern, Kinder, Vorfahren, Nachkommen und Geschwister sein .

Ein Element ist ein übergeordnetes Element eines anderen Elements, wenn es sich in der hierarchischen Struktur des Dokuments unmittelbar über diesem Element befindet. Ein Element ist der Vorfahr eines anderen Elements, wenn es sich in der hierarchischen Struktur des Dokuments irgendwo über diesem Element befindet.

Angenommen, ein Dokument enthält zwei Absätze p , einschließlich einer fett gedruckten Schrift b . Dann sind Elemente b Kinder ihrer Elternelemente p und Nachkommen ihrer Vorfahren. Bei p- Elementen wiederum ist das body- Element nur das übergeordnete Element. Außerdem werden diese beiden Elemente p Schwesterelemente sein, da sie denselben Elternkörper haben.

In CSS können nicht nur einzelne Elemente mithilfe von Selektoren definiert werden, sondern auch Elemente, die Nachkommen, Kinder oder Geschwister anderer Elemente sind (siehe den Unterabschnitt „Selektoransichten“).

CSS-Erstellungsregeln

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. Die Auswahl auf der linken Seite der Regel bestimmt, für welche Teile des Dokuments die Regel gilt. Der Anzeigenblock befindet sich auf der rechten Seite der Regel. Es steht in geschweiften Klammern und besteht aus einer oder mehreren durch ein „;“ getrennten Deklarationen. Jede Anzeige ist eine Kombination aus einer CSS-Eigenschaft und einem Wert, die durch ein ":" getrennt sind. Selektoren können in derselben Zeile durch Kommas getrennt gruppiert werden. In diesem Fall wird die Eigenschaft auf jeden von ihnen angewendet.

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

Im vierten Fall ist beim Verbinden einer CSS-Tabelle mit einem Dokument (siehe Liste) die CSS-Regel (der Wert des style-Attributs des Tags, auf das sie angewendet wird) eine Liste von Deklarationen ( „CSS-Eigenschaft: Wert“ ), die durch „;“ getrennt sind .