Heim  >  Artikel  >  Web-Frontend  >  Drei Möglichkeiten zur Einführung von CSS-Stilen

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

高洛峰
高洛峰Original
2016-12-16 15:41:083126Durchsuche

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:


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 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.

Verwenden Sie den Befehl @import, um externe Stylesheet-Informationen in die Tags c320f746825ae82b4078f2211630e469 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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:So führen Sie CSS in HTML einNächster Artikel:So führen Sie CSS in HTML ein