Aufbau der Testwebsite

Die Testwebsite besteht aus 7 Seiten mit verschiedenen definitionen zu Vorder- und Hintergrundfarben, aber von der Struktur her gleich aufgebaut. Damit soll die Vererbung der Farben gezeigt und überprüft werden.
Hier geht es zur Testwebsite

Hier ist die für den Body die Background-color (Hintergrundfarbe) und die Color (Schriftfarbe) definiert.

Hier ist die für den Body der Background (Hintergrundfarbe veraltet) und die Color (Schriftfarbe) definiert.

Hier ist die für den Body die Color (Schriftfarbe) definiert.

Hier ist weder die für den Body die Background-color (Hintergrundfarbe) noch die Color (Schriftfarbe) definiert.

Hier ist die für den Body der Background (Hintergrundfarbe veraltet) definiert.

Hier ist die für den Body der Background (Hintergrundfarbe veraltet) und die Color definiert.

Seite ist vom Aufbau her wie sie Seite BackgroundcolorColor, aber die Backgroundcolor und die color sind für den ganzen Body schwarz.

Die Seiten sind in sechs nummerierte Abschnitte aufgeteilt, welche als Module bezeichnet werden. Module umschließen immer dieselben Elemente, haben dabei aber jeweils unterschiedliche Eigenschaften in den Angaben zu Vorder- und Hintergrundfarben. Die Elemente selbst in den Modulen haben auch verschiedene Eigenschaften. Jedes Modul hat eine beschreibende H2-Überschrift. Damit die Seiten gut vergleichbar sind, wurden die Module mit ihren Elementen auf allen Seiten immer gleich aufgebaut.

• Modul 1: Bringt keine eigenen Eigenschaften mit. Hier wird gezeigt, wie die Elemente mit den im Body definierten Eigenschaften korrelieren
• Modul 2: Hat selbst eine Background-color (Hintergrundfarbe) definiert. Hier wird gezeigt, wie die Elemente mit den im Body definierten Eigenschaften und der im Modul definierten Background-color korrelieren
• Modul 3: Hat selbst eine Background (Hintergrundfarbe veraltet) definiert. Hier wird gezeigt, wie die Elemente mit den im Body definierten Eigenschaften und der im Modul definierten Background korrelieren
• Modul 4: Hat selbst ein Background-img (Hintergrundbild) definiert. Hier wird gezeigt, wie die Elemente mit den im Body definierten Eigenschaften und dem im Modul definierten Background-img korrelieren
• Modul 5: Hat selbst ein Image als Background (Hintergrundbild veraltet) definiert. Hier wird gezeigt, wie die Elemente mit den im Body definierten Eigenschaften und dem im Modul definierten Image als Background korrelieren
• Modul 6: Ein Bild als img-Element bildet den Hintergrund und ist mit Bildbeschriftungselementen (den Elementen mit verschiedenen Eigenschaften) versehen. Hier bestehet die Ausnahme, dass immer nur bis zu zwei Elemente pro Bildelement gesetzt ist. Ein div-Element umschließt aber auch hier alle anderen

• Element 0: Textelement schwarze Color auf schwarzer Backgroundcolor
• Element 1: Textelement ohne Eigenschaften
  • Darunter kleine Schrift (Schriftgröße 6 und Fontweight 300)
• Element 2: Color definiert aktuelles div
• Element 3: Background-color im aktuellen Element
• Element 4: Background-color und Color im aktuellen Element definiert
• Element 5: Background statt Background-color im aktuellen Element gesetzt
• Element 6: Background statt Background-color und Color im aktuellen Element definiert
• Element 7: Transparenz Color für aktuelles Element definiert
• Element 8: Transparenz Background-color für aktuelles Element definiert
• Element 8: Transparenz Background-color für aktuelles Element definiert
• Element 9: Transparenz Background-color und Color im aktuellen Element definiert
• Element 10: Transparenz Background im aktuelles Element
• Element 11: Transparenz Background und Color im aktuellen Element definiert
• Element 12: Transparenz Color HSLA für aktuelles Element definiert
• Element 13: Transparenz Background-color HSLA für aktuelles Element definiert
• Element 14: Transparenz Background-color HSLA und Color für aktuelles Element definiert
• Element 15: Transparenz Background HSLA für aktuelles Element definiert
• Element 16: Transparenz Background HSLA und Color für aktuelles Element definiert
• Element 17: Background als Farbpattern gesetzt
• Element 18: Background als Farbpattern und Background-color gesetzt
• Element 19: Background als Farbpattern, Background-color und Color gesetzt
• Element 20: Element/ Pattern als Background gesetzt mit Background-color und Color, Schrift mit Color und Transparenz abgesetzt
  • a: Transparenz als Background-color
  • b: Transparenz als Background
  • c: Transparenz als Background-color HSLA
  • d: Transparenz als Background HSLA
  • Element 21: Zwei Schriftgrafiken mit transparentem Hintergrund sind nebeneinander als Bilder eingesetzt. Die eine hat die Farbe schwarz, die andere rot

In jedem Element ist auch einen Hyperlink eingesetzt. Für die Hyperlinks ist die CSS-Eigenschaft „hover“ gesetzt, was bewirkt, dass beim Darüberfahren mit dem Mauszeiger den Hyperlink einen Hintergrund erhält. Für „hover:visited“ ist auch eine Farbe definiert. In Zeilen, in denen für die Schrift eine extra Color definiert ist, ist diese auch für den Hyperlink gesetzt. Das gilt auch für Transparenzen. Einige der Links sind unterstrichen oder kursiv.