die Regeln der Vererbung in CSS3 verstehen, können Sie interessante Websites erstellen, die ein Minimum an Wartung erfordern. Durch die folgenden Regeln, wenn eine Wartung erforderlich ist, müssen Sie in der Regel nur eine Änderung vornehmen, anstatt einzeln Hunderte von Artikeln zu ändern. Es lohnt sich, obwohl zu experimentieren, und schauen Sie sich die volle Wirkung der Vererbung und die Auswirkungen der Verwendung mehrerer Arten zusammen zu verstehen.

1. Erstellen Sie eine neue HTML5-Datei mit einem Texteditor.

   Der Editor kann nicht HTML5-Dateien unterstützen. Jede Textdatei tun wird.

2. Geben Sie den folgenden Code für die HTML-Seite.

   Ein Beispiel für CSS-Vererbung
   Ein Absatz außerhalb ein.
   Ein Absatz in einem Container.

   Diese Seite enthält eine Reihe von Inline-Styles, die immer die höchste Vererbungs Vorrang haben. Beispielsweise die bietet eine Schriftfamilie von Monospace für die

   Tag-Teil des Satzes. Sie könnten die gleiche Sache durch die Zuordnung der voll
   ein Klassenattribut für Code, aber dieses Beispiel verwendet die Inline-Stil statt.

   Das

   nach links verwendet einen Inline-Stil den text-align Stil einzustellen. Da der Standardstil für die Ausrichtung Links setzt, werden Sie keinen Unterschied sehen. Wenn jedoch ein anderer Stil ändern die Textausrichtung ändert, wird dieser Stil in Kraft und Bewegung dieses Absatzes zu verhindern.

   Die internen Stil Modifikationen scheinen alle innerhalb der

   -Tag. Beachten Sie, dass der Stil speziell auf die font-style setzt kursiv und die Schriftgröße bis mittel.

   Die zweite Art ist spezifischer. Es legt die Merkmale für

   Tags, die als Kind von einem erscheinen

   . Folglich sagen Vererbungsregeln, dass dieser Stil Vorrang wird, wenn die Regeln der Vererbung erfüllt sind, was bedeutet, dass die font-style und font-size Stile in diesem Fall anders sein wird.

3. Speichern Sie die Datei als Inheritance.HTML.

4. Laden Sie die Vererbung Beispiel in Ihrem Browser.

   Sie sehen die Rolle, die Vererbung und Kaskadierung Stile spielen.

   

5. Erstellen Sie eine neue CSS-Datei mit einem Texteditor.

   Der Editor kann nicht CSS-Dateien unterstützen. Jede Textdatei tun wird.

6. Geben Sie den folgenden CSS-Style-Informationen.

   body {text-align: center-color: DarkRed-background-color: Khaki-Grenze: Einschub-border-color: Green-} h1 {border: Anfang-border-color: Brown-} p {text-decoration: Unterstrichen font-family: "Times New Roman", Times, serif-font-style: schräg-font-size: xx-groß-}

   Das Tag erscheint als oberste Objekt in einer Seite, so dass die Veränderungen im Körper Stil festgestellt sollte später alles nicht ausdrücklich außer Kraft gesetzt beeinflussen. In diesem Fall ändert sich das Beispiel die Textausrichtung zu zentrieren und legt einen dunkelroten Rand um den Inhalt. Die Hintergrundfarbe wird ebenfalls geändert. Schließlich fügt der Stil einen grünen Rahmen um jedes Objekt.

   Der h1 Stil überschreibt alle Karosserievarianten. In diesem Fall bedeutet, dass die Rahmenarten zu ändern.

   Die p style überschreibt auch alle Karosserievarianten. Allerdings gibt es keine Eigenschaften, die die gleichen sind in diesem Fall, so dass die p Arten die Stile verbessern vom Körper Stil geerbt.

7. Speichern Sie die Datei als Inheritance.CSS.

8. Fügen Sie den folgenden Code in die Bereich der HTML-Datei.

   Dieser Code stellt die Verbindung zwischen der HTML-Datei und der CSS-Datei.

9. Speichern Sie die HTML-Datei und laden Sie die Seite.

   

   Beachten Sie, dass alle zu erwartenden Veränderungen vorhanden sind. Zum Beispiel wird der Text, mit Ausnahme des einen Absatz zentriert, die eine Inline-Stil das Überschreiben der Text zentriert hat. Der Text der Überschrift ist jetzt in dunkelrot - der Absatztext überschreibt die Farbauswahl, so bleibt es blau. Auch wenn es eine externe p style für die Größe des Textes ist der interne Stil außer Kraft gesetzt.

   Sie sollten etwas anderes über das Beispiel bemerken. Der Körper enthält einen Einsatz Grenze von der richtigen Farbe und die Überschrift enthält einen Anfang Rand der richtigen Farbe, da sie den Standard außer Kraft gesetzt hat.

   Allerdings haben die Absätze keine Grenze. Zu einer Zeit, Tag-Änderungen das gesamte Dokument und einige von ihnen immer noch betroffen. Allerdings beeinflussen andere Änderungen nur den Körper und nicht andere Blockelemente. Block-Elemente erben nicht einige Einstellungen aus dem Körper Stil.

10. Löschen Sie die h1-Stil aus dem Inheritance.CSS Stylesheet.

    Sie können auch durch Zugabe der Start (/ *) und das Ende (* /) Kommentar Symbole, um es wie dies die h1-Stil auf Kommentar:

    / * Kommentiert aus Block settings.h1 zu zeigen {border: Anfang-border-color: Braun -} * /

11. Speichern Sie die CSS-Datei und laden Sie die Seite.

    

    Beachten Sie, dass die Überschrift fehlt jetzt eine Grenze. Es stellt sich heraus, dass die Überschrift nicht wurde der Körper-Ebene Grenze überschreiben - es war eine neue Grenze hinzugefügt wird. Niemals davon ausgehen, dass ein Körper Stil zu anderen Block-Level-Arten tragen durch wird - einige Einstellungen einfach nicht. Wenn Sie feststellen, dass Ihre Seite sieht nicht, wie Sie es erwarten zu sehen, versuchen Sie die Einstellung auf einem niedrigeren Blockebene konfigurieren.

    Sie können auch einige Stylesheets zu sehen, dass die HTML-Stil zugreifen, was die Auswirkungen Tag, das das enthält -Tag. Es ist wahr: Sie können mit dem HTML-Stil arbeiten, um einige Effekte zu erzielen.

12. Fügen Sie den HTML-Stil hier zum Inheritance.CSS Stylesheet dargestellt.

    html {border: Anfang-border-color: Green-background-color: White-}

13. Speichern Sie die CSS-Datei und laden Sie die Seite.

    

    Sie müssen nur selten auf der HTML-Stil verlassen, weil es einfach nicht notwendig ist. Der HTML-Block ist eine Ebene über dem Körperblock, wie in diesem Beispiel gezeigt. Der HTML-Block nicht geben Sie den Zugriff auf alles, was der Körper Block nicht in den meisten Fällen ändern können, außer für Spezialeffekte wie das hier gezeigt.