Eine kurze Einführung in die drei in CSS eingeführten Methoden

Der Inhalt dieses Artikels ist eine kurze Einführung in die drei in CSS eingeführten Methoden. Ich hoffe, er wird Ihnen als Referenz dienen.

Es gibt drei Möglichkeiten, CSS einzuführen: internes Stylesheet, Inline-Stylesheet, externes Stylesheet. Natürlich können Sie auch mehrere Stile verwenden

Inline-Stil

<p style="color:red;font-size:20px">内联样式表</p >

Der Inline-Stil lädt den Stil direkt in die HTML-Codezeile. Er wird im Allgemeinen nur verwendet, wenn dieser Stil nur auf den angewendet wird Aktuelles Element. Versuchen Sie, es unter bestimmten Umständen nicht zu verwenden.

Internes Stylesheet

 <style>
        p {
            color: blue;
            font-size: 20px        }
    </style>

Internes Stylesheet wird im Allgemeinen im HTML-Header geschrieben, wobei c9ccee2e6ea535a969eb3f532ad9fe89 verwendet wird. Tag. Tags beigefügt. Diese Methode wird im Allgemeinen verwendet, wenn die aktuelle Seite einen besonderen Stil erfordert.

Externes Stylesheet

 <link rel="stylesheet" href="CSS/Googlefonts.css">

Externes Stylesheet besteht darin, die Stile separat in eine CSS-Datei zu schreiben und im Kopf darauf zu verweisen. Beachten Sie bei der Verwendung externer Stylesheets die Probleme, die durch Stilüberschreibungen entstehen, wenn mehrere Stile angezeigt werden.

Mehrere Stile

Bei Verwendung mehrerer Stile überlappen sich die mehreren Stile zu einem. Im Allgemeinen überlappen sich mehrere Stylesheets zu einem gemäß den folgenden Regeln, wobei 4 die höchste Gewichtung ist.

1. Browser-Standardeinstellungen

2. Externes Stylesheet

3. Internes Stylesheet (befindet sich im Head-Tag Intern)

4. Inline-Stile (innerhalb von HTML-Elementen)

Prioritätsreihenfolge mehrerer Stile

Für dasselbe Element Für mehrere Stile , die Prioritätsreihenfolge ist wie folgt, 7 hat die höchste Priorität (mit Ausnahme der !important-Regel, aber versuchen Sie im Allgemeinen, sie nicht zu verwenden):

1. Universalselektor (*)

2. Element-(Typ-)Selektor

3. Klassenselektor

4. Attributselektor

5. Pseudoklasse

6. ID-Auswahl

7. Inline-Stil

Verwandte Empfehlungen:

So implementieren Sie den Zeilenumbruch schwebender Elemente in CSS

Zusammenfassung der Verwendung des Rasterlayouts in CSS (mit Code)

Das obige ist der detaillierte Inhalt vonEine kurze Einführung in die drei in CSS eingeführten Methoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!