Heim > Artikel > Web-Frontend > 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 d27673a4bda8f14d600193678e55432d, 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. ef1cac8df639bc9110cb13b8b5ab3dd7 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:
Es gibt zwei Möglichkeiten, externe Stylesheets zu referenzieren.
(1) Verwenden Sie das Tag b723cc79c5f1f706e2c65c13390019bb, um auf ein externes Stylesheet zu verlinken.Verwenden Sie die folgende Anweisung, um auf ein externes Stylesheet zu verlinken:
89d9a0cb9952be359f566a52f94bb89c
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.
< 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!