CSS Einführung

Notwendige Grundkenntnisse

Bevor Sie fortfahren, müssen Sie grundlegende Kenntnisse über die folgenden Themen haben:

  • HTML
  • XHTML

Wenn Sie diese Projekte zunächst lernen möchten, lesen Sie bitte Startseite Besuchen Sie die zugehörigen Tutorials.

CSS Übersicht

  • CSS steht für Cascading Style Sheets (Cascading Style Ssheets)
  • Stildefinitionenwie angezeigt HTML-Elemente
  • Stile werden in der Regel inStilblätterin
  • Stile hinzuzufügen, um HTML 4.0, wardas Problem der Trennung von Inhalt und Darstellung zu lösen
  • Externe Stylisierungsblätterkönnen die Arbeitsproduktivität erheblich verbessern
  • Externe Stilblätter werden in der Regel in CSS-Dateienin
  • Mehrfache Stildefinitionen könnenKaskadierenFür ein

Stile lösen ein allgemeines Problem

HTML-Tags wurden ursprünglich dafür entwickelt, den Dokumentinhalt zu definieren. Durch die Verwendung von Tags wie <h1>, <p>, <table> sollte HTML ursprünglich Informationen wie „Das ist ein Titel“, „Das ist ein Absatz“, „Das ist eine Tabelle“ ausdrücken. Der Dokumentlayout wird von den Browsern erstellt, ohne dass Formatierungstags verwendet werden.

Da die beiden Hauptbrowser (Netscape und Internet Explorer) ständig neue HTML-Tags und Attribute (wie Font-Tags und Far attributes) in die HTML-Spezifikation aufnehmen, wird es immer schwieriger, Websites zu erstellen, deren Dokumentinhalt klar von der Darstellungsschicht des Dokuments getrennt ist.

Um dieses Problem zu lösen, übernahm die World Wide Web Consortium (W3C), eine nicht kommerzielle Standardisierungsallianz, die Aufgabe der Standardisierung von HTML und schuf außerhalb von HTML 4.0 das Styling (Style).

Alle gängigen Browser unterstützen die Kaskadestilblätter

Stilblätter verbessern die Arbeitsproduktivität erheblich

Stilblätter definieren, wie HTML-Elemente angezeigt werden, ähnlich wie die Font-Tags und Far attributes in HTML 3.2. Stile werden in der Regel in externen .css-Dateien gespeichert. Durch die Bearbeitung eines einfachen CSS-Dokuments haben Sie die Möglichkeit, gleichzeitig das Layout und das Erscheinungsbild aller Seiten der Website zu ändern.

Durch die Möglichkeit, gleichzeitig die Stile und Layouts mehrerer Seiten zu steuern, kann CSS als eine Durchbruch im Bereich des Web-Designs bezeichnet werden. Als Website-Entwickler können Sie Stile für jedes HTML-Element definieren und diese auf so viele Seiten anwenden, wie Sie möchten. Für globale Updates genügt es, einfach den Stil zu ändern, und alle Elemente der Website werden automatisch aktualisiert.

Mehrfache Stylisierungen werden zu einem Stapel zusammengefasst.

Stylisierungsblätter erlauben es, Stylisierungsinformationen auf verschiedene Weisen zu spezifizieren. Stylisierungen können in einem einzelnen HTML-Element, im Kopf der HTML-Seite oder in einer externen CSS-Datei definiert werden. Es ist auch möglich, mehrere externe Stylisierungsblätter innerhalb desselben HTML-Dokuments zu referenzieren.

Stapelordnung

Wenn ein gleicher HTML-Element von mehreren Stylisierungen definiert wird, welche Stylisierung wird verwendet?

Im Allgemeinen werden alle Stylisierungen gemäß den folgenden Regeln in einem neuen virtuellen Stylisierungsblatt gestapelt, wobei die Nummer 4 die höchste Priorität hat.

  1. Standardeinstellungen des Browsers
  2. Externe Stylisierungsblätter
  3. Interne Stylisierungsblätter (innerhalb des <head>-Tags)
  4. Inline-Styles (innerhalb von HTML-Elementen)

Daher haben Inline-Styles (innerhalb von HTML-Elementen) die höchste Priorität, was bedeutet, dass sie Priorität vor den folgenden Stylisierungserklärungen haben: Stylisierungserklärungen im <head>-Tag, in externen Stylisierungsblättern oder in den Standardeinstellungen des Browsers.