Verwendet, wie man mehrere Stile zusammen mit CSS3 - Dummies

Das Verständnis der Vererbungsregeln in CSS3 hilft Ihnen dabei, interessante Websites zu erstellen, die ein Minimum an Wartung erfordern. Wenn Sie diese Regeln befolgen, müssen Sie normalerweise nur eine Änderung vornehmen, wenn Sie Wartungsarbeiten durchführen müssen, anstatt Hunderte von Elementen einzeln zu ändern. Es lohnt sich jedoch, zu experimentieren, um die vollen Auswirkungen der Vererbung und die Auswirkungen der Verwendung mehrerer Stile zusammen zu verstehen.

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

   Ihr Editor unterstützt möglicherweise keine HTML5-Dateien. Jede Textdatei wird funktionieren.

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

   Vererbung Beispiel p {font-family: Arial, Helvetica, Sans-Serif; Farbe blau; Hintergrundfarbe: Gelb; Rand: 0; Schriftstil: Kursiv; Schriftgröße: mittel;} div p {font-style: italic; font-size: larger;}
   
   Ein Beispiel für CSS-Vererbung
   
   
   
   
   
   
   
   Ein Absatz außerhalb von.
   Ein Absatz in einem Container.
   

   Diese Seite enthält eine Reihe von Inline-Stilen, die immer die höchste Vererbungspriorität haben. Zum Beispiel liefert das eine Schriftfamilie von Monospace für den Tagteil des Satzes. Sie könnten das Gleiche erreichen, indem Sie das a-Klassenattribut für den Code zuweisen. In diesem Beispiel wird stattdessen der Inline-Stil verwendet.

   Mithilfe eines Inline-Stils wird der Textausrichtungsstil auf links eingestellt. Da der Standardstil die Ausrichtung auf links setzt, sehen Sie keinen Unterschied. Wenn jedoch eine andere Stiländerung die Textausrichtung ändert, wird dieser Stil wirksam und verhindert die Bewegung dieses Absatzes.

   Die internen Stiländerungen werden alle innerhalb des Tags im Element angezeigt. Der erste Stil legt die allgemeinen Merkmale für ein

   -Tag fest. Beachten Sie, dass der Stil den Schriftstil speziell auf kursiv und die Schriftgröße auf mittel setzt.

   Der zweite Stil ist spezifischer. Es legt die Merkmale für

   -Tags fest, die als Kind von a erscheinen. Folglich besagen Vererbungsregeln, dass dieser Stil Vorrang hat, wenn die Regeln der Vererbung erfüllt sind, was bedeutet, dass die Schriftstil- und Schriftgrößenstile in diesem Fall unterschiedlich sind.

3. Speichern Sie die Datei als Vererbung. HTML.

4. Laden Sie das Vererbungsbeispiel in Ihren Browser.

   Sie sehen die Rolle, die Vererbungs- und Cascading-Stile spielen.

   

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

   Ihr Editor unterstützt möglicherweise keine CSS-Dateien. Jede Textdatei wird funktionieren.

6. Geben Sie die folgenden CSS-Stilinformationen ein.

   body {text-align: zentrum; Farbe: Dunkelrot; Hintergrundfarbe: Khaki; Rand: Einfügung; border-color: Grün;} h1 {Grenze: Anfang; Randfarbe: Braun;} p {Textdekoration: Unterstrichen; Schriftfamilie: "Times New Roman", Times, Serif; Schriftstil: schräg; font-size: xx-large;}
   

   Das Tag wird als oberstes Objekt auf einer Seite angezeigt. Daher sollten die Änderungen im Textstil Auswirkungen auf alles haben, was später nicht ausdrücklich überschrieben wird.In diesem Fall ändert das Beispiel die Ausrichtung des Textes in der Mitte und platziert einen dunkelroten Rahmen um jeden Inhalt. Die Hintergrundfarbe wird ebenfalls geändert. Schließlich fügt der Stil jedem Objekt einen grünen Rahmen hinzu.

   Der h1-Stil überschreibt alle Körperstile. In diesem Fall bedeutet das, dass Sie die Rahmenstile ändern müssen.

   Der p-Stil überschreibt auch alle Körperstile. Da es in diesem Fall jedoch keine Eigenschaften gibt, die identisch sind, erweitern die p-Stile die vom Körperstil geerbten Stile.

7. Speichern Sie die Datei als Vererbung. CSS.

8. Fügen Sie dem Bereich der HTML-Datei den folgenden Code hinzu.

   Dieser Code erstellt die Verknüpfung zwischen der HTML-Datei und der CSS-Datei.

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

   

   Beachten Sie, dass alle erwarteten Änderungen vorhanden sind. Beispielsweise ist der Text zentriert, mit Ausnahme des einen Absatzes, der einen Inline-Stil hat, der den zentrierten Text überschreibt. Der Überschriftentext ist jetzt dunkelrot - der Absatztext überschreibt diese Farbauswahl, bleibt also blau. Obwohl für die Größe des Texts ein externer p-Stil vorhanden ist, überschreibt der interne Stil diesen.

   Sie sollten etwas anderes über das Beispiel bemerken. Der Textkörper enthält einen Einfügungsrand der korrekten Farbe und die Überschrift enthält einen Anfangsrand der richtigen Farbe, da der Standardwert überschrieben wurde.

   Die Absätze haben jedoch keine Begrenzung. Zu einem bestimmten Zeitpunkt betrafen Tag-Änderungen das gesamte Dokument und einige von ihnen tun dies immer noch. Andere Änderungen betreffen jedoch nur den Körper und nicht andere Blockelemente. Blockelemente erben einige Einstellungen nicht vom Körperstil.

10. Löschen Sie den h1-Stil aus der Vererbung. CSS-Stylesheet.

    Sie können den h1-Stil auch auskommentieren, indem Sie die Anfangs- (/ *) und End- (* /) Kommentarsymbole wie folgt hinzufügen:

    / * Kommentiert, um Blockeinstellungen anzuzeigen. h1 {Grenze: Anfang; border-color: Braun;} * /
    

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

    

    Beachten Sie, dass die Überschrift jetzt keine Umrandung aufweist. Es stellt sich heraus, dass die Überschrift nicht die Grenze auf Körperebene außer Kraft setzte - sie fügte eine neue Grenze hinzu. Nimm niemals an, dass ein Body-Style zu anderen Block-Level-Stilen übergeht - einige Einstellungen tun es einfach nicht. Wenn Sie feststellen, dass Ihre Seite nicht wie erwartet aussieht, versuchen Sie, die Einstellung auf einer niedrigeren Blockebene zu konfigurieren.

    Möglicherweise sehen Sie auch einige Stylesheets, die auf den HTML-Stil zugreifen, der das Tag betrifft, das das Tag enthält. Es ist wahr: Sie können mit dem HTML-Stil arbeiten, um einige Effekte zu erzielen.

12. Fügen Sie den hier gezeigten HTML-Stil zur Vererbung hinzu. CSS-Stylesheet.

    html {Grenze: Anfang; Randfarbe: Grün; background-color: Weiß;}
    

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

    

    Sie müssen sich selten auf den HTML-Stil verlassen, da dies einfach nicht notwendig ist. Der HTML-Block ist eine Ebene über dem Body-Block, wie in diesem Beispiel gezeigt. Der HTML-Block gibt Ihnen keinen Zugriff auf irgendetwas, das der Körperblock in den meisten Fällen nicht ändern kann, mit Ausnahme von Spezialeffekten wie dem hier gezeigten.