CSS-Grundtutorials

Benötigte Grundkenntnisse

Bevor Sie fortfahren, müssen Sie eine grundlegende Kenntnis der folgenden Themen haben:

  • HTML
  • XHTML

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

CSS Übersicht
  • CSS steht für Cascading Style Sheets (Cascading Style Shets)
  • Stildefinitionenwie angezeigt HTML-Elementen
  • Stile werden in der Regel inStilvorlagenin
  • Stile hinzuzufügen, um HTML 4.0 zudas Problem der Trennung von Inhalt und Darstellung zu lösen
  • Externe Stylisierungsblätterkönnen die Arbeitsproduktivität erheblich verbessern
  • Externe Stilvorlagen werden in der Regel in CSS-Dateienin
  • Mehrfache Stildefinitionen könnenKaskadierungFür eine

Die Stile lösen ein allgemeines Problem.

HTML-Tags wurden ursprünglich entwickelt, um den Dokumentinhalt zu definieren. Durch die Verwendung von Tags wie <h1>, <p>, <table> sollte HTML ursprünglich verwendet werden, um Informationen wie „Dies ist ein Titel“, „Dies ist ein Absatz“, „Dies ist eine Tabelle“ auszudrücken. Die Layoutgestaltung sollte von den Browsern übernommen werden, ohne dass Formatierungstags verwendet werden.

Da beide Hauptbrowser (Netscape und Internet Explorer) ständig neue HTML-Tags und Attribute (wie Font-Tags und Farbt Eigenschaften) in die HTML-Normen aufnehmen, wird es immer schwieriger, Websites zu erstellen, deren Dokumentinhalte klar von der Darstellungsebene des Dokuments getrennt sind.

Um dieses Problem zu lösen, hat die World Wide Web Consortium (W3C), eine nicht kommerzielle Standardisierungsgemeinschaft, die Aufgabe der Standardisierung von HTML übernommen und hat außerhalb von HTML 4.0 STYLES (Stil) geschaffen.

Alle gängigen Browser unterstützen die каскадierende Stilvorlagen.

Die Stilvorlagen verbessern die Arbeitsproduktivität erheblich.

Die Stilvorlagen definieren, wie HTML-Elemente angezeigt werden. Die im Stil der HTML 3.2 enthaltenen Font-Tags und Farbt Eigenschaften werden in der Regel in externen .css-Dateien gespeichert. Durch die Bearbeitung eines einfachen CSS-Dokuments haben Sie die Möglichkeit, gleichzeitig das Erscheinungsbild der Layouts aller Seiten Ihrer Website zu ändern.

Da CSS es ermöglicht, gleichzeitig die Stylisierung und das Layout mehrerer Seiten zu steuern, kann CSS als ein Durchbruch im Bereich des Web-Designs bezeichnet werden. Als Website-Entwickler können Sie Stylisierungen für jedes HTML-Element definieren und diese auf so viele Seiten anwenden, wie Sie möchten. Um globale Änderungen vorzunehmen, genügt es, die Stylisierungen zu ändern, und alle Elemente der Website werden automatisch aktualisiert.

Mehrfache Stylisierungen werden zu einem Stapel gestapelt

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

Stapelordnung

Wenn ein einzelnes 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. Standardkonfiguration des Browsers
  2. Externe Stylisierungsblätter
  3. Interne Stylisierungsblätter (situiert 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 Stylisierungen haben: Stylisierungen im <head>-Tag, in externen Stylisierungsblättern oder in den Standardkonfigurationen des Browsers (Standardwerte).