Drei Möglichkeiten zur Einführung von CSS-Stilen

Stylesheets werden an verschiedenen Stellen platziert und haben unterschiedliche Wirkungsbereiche. Grob gesagt werden Stylesheets in Inline-Stylesheets und externe Stylesheets unterteilt, das heißt, es gibt drei Methoden: Platzierung auf der Seite, externe Referenz und externer Import.
1. Inline-Stylesheet
Inline-Stylesheet platziert die Stylesheet-Regeln zwischen < /HEAD>, sodass sich das Stylesheet auf die gesamte aktuelle HTML-Seite auswirkt.
Inline-Stylesheets enthalten auch eine Methode zum direkten Einfügen, bei der eine bestimmte Markierung in der HTML-Seite separat angegeben und deren Stil angegeben wird. Dies kann wie folgt geschrieben werden:

   < Table style=" font-size:10pt; color:blue;">

Definieren Sie die Zeichengröße in Die Tabelle ist 10pt groß und die Farbe ist blau. Die umständlichen und komplizierten Stylesheet-Regeln sind offensichtlich nicht das, was wir wollen.

Schreiben Sie ein Stylesheet, um es auf verschiedenen Seiten mit demselben Stil zu implementieren. Dies kann durch die Einführung eines externen Stylesheets erreicht werden. Und wenn das externe Stylesheet geändert wird, ändert sich auch der Stil jeder HTML-Seite, die auf das Stylesheet verweist, entsprechend, ohne dass jede einzelne Seite manuell geändert werden muss.

Ein externes Stylesheet bezieht sich auf die Erstellung einer völlig unabhängigen Textdatei mit der Erweiterung .css. Der Inhalt der Datei wird mit Stylesheet-Informationen eingegeben, ausgenommen jegliche zugehörige HTML-Sprache.
Geben Sie zum Beispiel in das externe Stylesheet ein:

Wir sehen, dass nur die Tags STYLE> fehlen und der Rest des Schreibens im externen Stil Blatt hat sich nicht geändert. Speichern Sie es nach der Eingabe als example.css.

Es gibt zwei Möglichkeiten, externe Stylesheets zu referenzieren.

(1) Verwenden Sie das Tag < LINK>, um auf ein externes Stylesheet zu verlinken.

Verwenden Sie die folgende Anweisung, um auf ein externes Stylesheet zu verlinken:
< LINK REL=STYLESHEET HREF="example.css ">
HREF sollte Pfadangaben enthalten, was bedeutet, dass sich die Stylesheet-Datei und das HTML-Dokument im selben Verzeichnis befinden.
Ein HTML-Dokument kann auf mehrere externe Stylesheets verweisen, zum Beispiel:

   < LINK REL=STYLESHEET HREF="example.css">
   < LINK REL=STYLESHEET HREF="style/other.css">

Das erste verlinkte example.css ist das Standard-Stylesheet des Dokuments Bei einem Konflikt zwischen Stildefinitionen sollte ersteres zuerst erfüllt werden.
(2) Verwenden Sie @IMPORT, um Stylesheet-Informationen zu importieren.

Verwenden Sie den Befehl @import, um externe Stylesheet-Informationen in die Tags < /STYLE> zu importieren. Zum Beispiel:

< STYLE TYPE="text/css"> 
@import "example.css"; 
@import "style/other.css"; 
< /STYLE>

Natürlich kann diese Methode auch auf mehrere externe Stylesheet-Informationen gleichzeitig verweisen. Die Priorität des Stylesheets wird entsprechend der Reihenfolge festgelegt in dem es importiert wird.
Diese drei Methoden können gemischt werden, das heißt, sie können gleichzeitig auf einer Seite verwendet werden. Wenn jedoch zu viele Stylesheet-Informationsregeln vorhanden sind, ist es wahrscheinlicher, dass Konflikte auftreten. Beispielsweise enthalten mehrere der genannten Stylesheet-Informationen Einstellungen für den H1-Titel. Welche davon ist also die wichtigste? Zu diesem Zeitpunkt hängt es davon ab, welches Stylesheet zuerst referenziert wird und welches die erste Priorität hat. Daher müssen wir beim Umgang mit komplexen Stylesheet-Informationen die Möglichkeit von Stylesheet-Konflikten vollständig berücksichtigen, Konflikte besser lösen und diese koordinieren und anpassen.

Weitere verwandte Artikel zu den drei Methoden zur Einführung von CSS-Stilen finden Sie auf der chinesischen PHP-Website!