CSS - Cascading Style Sheets

CSS - Cascading Style Sheets

CSS (Cascading Style Sheets Englisch -. Cascading Style Sheets) - eine formale Sprache zur Beschreibung des Aussehens eines Dokuments mit der Markup - Sprache geschrieben.

Meist verwendet als Mittel der Beschreibung, das Erscheinungsbild der Web-Seiten in HTML und XHTML Markup-Sprachen, sondern auch auf eine der XML-Dokumente, wie SVG oder XUL angewendet werden kann.

Der Zweck der CSS

CSS von den Machern von Web-Seiten verwendeten Farben, Schriften, Layout der einzelnen Blöcke und andere Aspekte der Darstellung der Präsentation von Web-Seiten zu definieren. Der Hauptzweck der Entwicklung des CSS ist eine logische Unterteilung der Beschreibung der Web-Seite-Struktur aus der Beschreibung der Darstellung der Web-Seite (die mit Hilfe von HTML oder einer anderen Auszeichnungssprachen vorgenommen wird) (die nun CSS formale Sprache unter Verwendung hergestellt wird). Diese Trennung kann die Verfügbarkeit des Dokuments zu erhöhen, eine größere Flexibilität zu bieten und die Fähigkeit, seine Leistung zu verwalten, und die Komplexität zu reduzieren und die Wiederholung des strukturellen Inhalte. Darüber hinaus CSS ermöglicht es Ihnen, ein und dasselbe Dokument in verschiedenen Stilen und Ausgabemethoden darzustellen, wie Bildschirmdarstellung, gedruckte Darstellung, Sprache (spezielle Sprachbrowser oder einem Bildschirmleseprogramm) zu lesen, oder wenn die Stilllegung von Geräten Braille verwenden.

Verfahren zum Verbinden von an dem Dokument CSS

CSS CSS-Regeln in einer formalen Sprache geschrieben werden und sind in den Stylesheets befindet, das heißt, enthält das Stylesheet eine CSS-Regel. Diese Stylesheets können im Web-Dokument platziert werden, um das Aussehen von dem sie beschreiben, und in einer separaten Datei mit CSS-Format. (In der Tat, CSS-Format - es ist eine einfache Textdatei in der Datei css enthalten nichts anderes als eine Liste von CSS-Regeln und Kommentare zu ihm ..)

Das heißt, das Stylesheet verbunden werden, werden sie in der beschriebenen Web-Dokument auf vier verschiedene Weisen eingeführt werden:

+ Wenn das Stylesheet in einer separaten Datei, kann es durch den Tag <link>, die sich im Dokument zwischen den Tags <head> und </ head> zu einem Web - Dokument verbunden werden. (<Link> -Tag href Attribut sein wird, einen Wert der Adresse dieses Sheet mit). Alle Regeln in dieser Tabelle sind für das gesamte Dokument;

  <! DOCTYPE html>
  <Html>
  <Head>
  .....
  <Link rel = "stylesheet" href = "style.css">
  </ Head>
  <Body>
  .....
  </ Body>
  </ Html>
 

+ Wenn das Stylesheet in einer separaten Datei, kann es zu einem Web - Dokument , das von der Richtlinie @ import angeschlossen werden, die in diesem Dokument zwischen den Tags <style> basiert und </ style> (die wiederum in diesem Dokument zwischen die angeordnet sind < head> und </ head>) unmittelbar nach dem Tag <style>, die auch (in ihren Klammern nach dem Wort uRL) angezeigt wird diese Vorlage zu adressieren. Alle Regeln in dieser Tabelle sind für das gesamte Dokument;

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

+ Wenn das Stylesheet ist in dem Dokument beschrieben ist , kann es in zwischen den Tags <style> platziert und </ style> (die wiederum in diesem Dokument zwischen den Tags <head> befinden und </ head>). Alle Regeln in dieser Tabelle sind für das gesamte Dokument;

  <! DOCTYPE html>
  <Html>
  <Head>
  .....
  <Style>
  body {
  Farbe: rot;
  }
  </ Style>
  </ Head>
  <Body>
  .....
  </ Body>
  </ Html>
 

+ Wenn die beschriebenen Tabelle Stile im Dokument, kann es in es in den Körper des einzelnen Tag (ein Attribut durch seinen Stil) des Dokuments platziert werden. Alle Regeln in dieser Tabelle beziehen sich nur auf den Inhalt dieses Tags.

  <! DOCTYPE>
  <Html>
  <Head>
  .....
  </ Head>
  <Body>
  <P style = "font-size: 20px; color: green; font-family: Arial, Helvetica, sans-serif">
  .....
  </ P>
  </ Body>
  </ Html>
 

In den ersten beiden Fällen sagen wir, dass das Dokument externe Stylesheets angewendet, und in der zweiten der beiden Fälle - interne Sheet.

Um CSS in die XML-Dokument hinzufügen, so müssen diese eine besondere Verbindung zum Sheet enthalten. Zum Beispiel:

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

Die Hierarchie von Elementen innerhalb des Dokuments

Wie allgemein bekannt ist, HTML-Dokumente sind auf der Hierarchie von Elementen basiert, die grafisch in einer Baumform dargestellt werden kann. HTML - Elemente miteinander kann ein Elternteil, Kind, Eltern - Element, untergeordnete Elemente Schwester sein.

Ein weiteres Element ist das übergeordnete Element in der Baumstruktur, wenn es sich um ein Dokument auf einmal ist, direkt auf dieses Element. Element ist ein Vorfahre von einem anderen Element in der Baumstruktur, wenn das Dokument, das er irgendwo über dem Element ist.

Lassen Sie zum Beispiel das Dokument enthält zwei Absätze p, einschließlich der Schrift und fett b. Dann werden die Elemente von b sind untergeordnete Elemente ihrer Eltern Elemente p und die Nachkommen ihrer Vorfahren Körper. Im Gegenzug werden nur die Elemente p Körperelement ein Elternteil sein. Und außerdem werden diese beiden Elemente sein p Geschwisterelemente wie die gleichen Eltern haben - Körper.

Die CSS kann so eingestellt werden, um die Selektoren nicht nur einzelne Elemente, sondern auch Elemente, die Nachkommen sind, Geschwister oder Kinder anderer Elemente (siehe. Abschnitt "Arten von Selektoren").

CSS-Regeln der Konstruktion

In den ersten drei Fällen (siehe oben). Die CSS-Tabelle Anschluss an das Dokument Jede der CSS-Stylesheet besteht aus zwei Teilen - der Wähler und der Deklarationsblock. Der Selektor auf der linken Seite der Regel befindet sich bestimmt, was ein Teil der von der Regel abgedeckt Dokument. Deklarationsblock ist auf der rechten Seite der Regel entfernt. Es wird in Klammern gesetzt, und wiederum besteht aus einer oder mehreren Anzeigen, getrennt durch ";". Jede Anzeige ist eine Kombination von CSS-Eigenschaften und durch das Zeichen getrennte Werte ":". Die Wähler können zusammen in einer einzigen Zeile durch Komma getrennt gruppiert werden. Diese Eigenschaft gilt für den Fall eines jeden von ihnen.

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

Im vierten Fall wird die Verbindung CSS - Tabelle auf das Dokument (siehe Liste) . CSS - Regel (das ist ein Stil - Tag Attributwert, für die sie wirkt) ist eine Liste der Anzeigen ( "CSS - Eigenschaft: value"), mit ";" getrennt.