Zurück zur vorherigen Seite:
Wie CSS funktioniert.Das ist der vierte Abschnitt des CSS Getting Started Tutorials. Er erklärt wie Stylesheets in einer Kaskade interagieren und wie Element den Style von ihren Elternelmenten erben können. Sie werden Vererbung verwenden, um eine Menge von Teilen in Ihrem Beispieldokument in einem Schritt zu verändern.
Information: Kaskadierung und Vererbung
Der schlussendliche Style eines Elements kann an vielen verschiedenen Orten angegeben werden, die auf eine komplexe Art miteinander interagieren. Diese Komplexität macht CSS mächtig. Aber dadurch kann es auch verwirrend und schwer zu debuggen werden.
Drei Hauptquellen von Styleinformationen bilden eine Kaskade. Diese sind:
- Die standardmäßigen Styles des Webbrowsers für die Markup Language.
- Die Styles, die vom Benutzer, der das Dokument liest, angegeben werden.
- Die Styles, die vom Autor mit dem Dokument verknüpft worden sind. Diese können an drei verschiedenen Orten angegeben werden:
- In einer externen Datei: Dieses Tutorial diskutiert hauptsächlich diese Method zur Definition von Styles.
- In einer Definition am Anfang des Dokumenst: Diese Methode sollte nur für Styles verwendet werden, die nur von dieser Seite benützt werden.
- Auf einem bestimmten Element im Inhalt des Dokument: Das ist die am schwersten wartbare Methode, welche für Tests verwendet werden kann.
Der Style des Benutzers verändert den standardmäßigen Style des Webbrowsers. Der Style des Autors des Dokuments verändert dann den Style ein weiteres Mal. In diesem Tutorial sind Sie der Autor des Beispieldokuments und es wird nur mit Stylesheets vom Autor gearbeitet.
Wenn Sie dieses Dokument in einem Webbrowser lesen, kommen Teile des Styles, den Sie sehen, von dem standardmäßigen Style des Webbrowsers für HTML.
Teile vom Style können von angepassten Webbrowsereinstellungen oder von einer angepassten Styledefinitionsdatei stammen. In Firefox können die Einstellungen im Preferences Dialog vorgenommen werden, oder Sie geben Styles in der Datei userContent.css innerhalb Ihres Browserprofils an.
Andere Teile vom Style kommen aus Stylesheets, die vom Wiki-Server mit dem Dokument verlinkt werden.
Wenn Sie Ihr Beispieldokument in Ihrem Webbrowser öffnen, werden die <strong> Elemente mit dickeren Buchstaben als der Rest des Textes dargestellt. Das kommt aus dem standardmäßigen Style des Webbbrowsers für HTML.
Die <strong> Elemente sind rot. Das kommt aus Ihrem Beispielstylesheet.
Die <strong> Elemente erben auch viele Eigenschaften vom Style des <p> Elements, weil sie ein Kindelement davon sind. Auf dieselbe Art erbt das <p> Element vom Style des <body> Elements.
Für Styles in der Kaskade haben die Stylesheets vom Autor höchste Priorität. Danach folgen die Stylesheets des Benutzers und der standardmäßige Stylesheet vom Webbrowser.
Bei vererbten Styles haben die eigenen Styles von Kindelementen eine höhere Priorität als die von dessen Elternelementen.
Das sind nicht alle Prioritäten, die angwendet werden. Folgende Seiten in diesem Tutorial gehen noch detaillierter darauf ein.
CSS ermöglicht es auch mit dem Schlüsselwort !important die Styles vom Autor zu überschreiben.
Das bedeutet, dass ein Autor nicht immer genau vorhersehen kann, was genau die Leser sehen werden.
Wenn Sie alle Details über Kaskadierung und Vererbung erfahren wollen, rufen Sie bitte die Seite Assigning property values, Cascading, and Inheritance in der CSS Spezifikation auf.
Aktion: Vererbung verwenden
- Editieren Sie Ihre CSS Datei.
- Kopieren Sie die folgende Zeile in Ihre CSS Datei. Es macht dabei keinen Unterschied, ob Sie die Zeile vor oder nach der bereits enthaltenen Zeile einfügen. Es ist aber verständlicher die Zeile oben einzufügen, da das
<p>Element in Ihrem Dokument das Elternelement vom<strong>Element ist:p { color: blue; text-decoration: underline; } - Laden Sie die Seite im Webbrowser erneut, damit die Änderung an Ihrem Beispieldokument sehen können. Die unterstreichende Line betrifft den gesamten Text im Absatz und somit auch alle Anfangsbuchstaben. Die
<strong>Elemente haben den Unterstrich von ihrem Elternknoten<p>geerbt.
Die
<strong>Elemente sind aber immer noch rot. Die rote Farbe gehört zu ihrem eigenen Style und hat somit Priorität gegenüber dem blau des<p>Elternelements.
Davor
HTML Inhalt
<p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p>
CSS Inhalt
strong {
color:red
}
Danach
HTML Inhalt
<p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p>
CSS Inhalt
p {
color:blue;
text-decoration:underline;
}
strong {
color:red;
}
| Cascading Style Sheets |
Verschieben Sie die Deklaration für die untersteichende Linie aus der Regel für <p> in die für <strong>. Die resultierende Datei sieht folgendermaßen aus:
p {
color: blue;
}
strong {
color: red;
text-decoration: underline;
}
Lösung ausblenden
Was kommt als Nächstes?
Go to Next Section:
SelektorenIhr Beispielstylesheet definiert Styles für die Tags <p> und <strong>, um den Style der entsprechenden Elemente im gesamten Dokument zu verändern. Der nächste Abschnitt beschreibt, wie Sie den Style auf eine noch selektivere Art angeben können.