Der zur Einführung von CSS-Stilen verwendete Tag ist „“. Das Link-Tag wird verwendet, um die Beziehung zwischen dem Dokument und externen Ressourcen zu definieren. Die häufigste Verwendung besteht darin, auf ein externes CSS-Stylesheet zu verlinken. Die Syntax lautet „“. . Beim Laden der Seite werden gleichzeitig die durch das Link-Tag eingeführten CSS-Stile geladen.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Der zur Einführung von CSS-Stilen verwendete Tag ist „“.
Externe CSS-Stylesheets müssen in Webdokumente importiert werden, bevor sie vom Browser erkannt und analysiert werden können. Externe Stylesheet-Dateien können auf zwei Arten in HTML-Dokumente importiert werden.
Verwenden Sie zum Importieren das Tag .
Verwenden Sie das Schlüsselwort @import, um
Im folgenden Artikel wird ausführlich auf das Tag eingegangen.
Tag definiert die Beziehung zwischen dem Dokument und externen Ressourcen. Die häufigste Verwendung besteht darin, Stylesheets zu verknüpfen.
Hinweis:
In HTML hat das -Tag kein schließendes Tag.
In XHTML muss das -Tag ordnungsgemäß geschlossen werden.
Verwenden Sie das Link-Tag, um die Syntax des CSS-Stils einzuführen.
<link href="外部样式表文件路径" rel="stylesheet" type="text/css" />
Erklärung jedes Attributs:
href-Attribut legt die Adresse der externen Stylesheet-Datei fest, die eine relative oder eine absolute Adresse sein kann Adresse. Das Attribut
rel definiert das zugehörige Dokument, also hier das zugehörige Stylesheet.
type-Attribut definiert den Typ der importierten Datei. Wie das Style-Element gibt text/css eine CSS-Textdatei an.
Hinweis:
Im Allgemeinen sollten bei der Definition des die oben genannten drei Grundattribute definiert werden, darunter href ein unbedingt festzulegendes Attribut.
Sie können auch das Titelattribut im Link-Element hinzufügen, um den Titel des optionalen Stylesheets festzulegen. Das heißt, wenn ein Webdokument mehrere Stylesheets importiert, können Sie die anzuwendende Stylesheet-Datei über den Titelattributwert auswählen .
Das Titelattribut hängt mit dem rel-Attribut zusammen. Zukünftige Webdokumente werden mehrere -Elemente verwenden, um verschiedene externe Dateien zu importieren, z. B. Stylesheet-Dateien, Designdateien usw Persönliche Dateien. Angepasste zusätzliche Zusatzdateien. Nachdem Sie so viele Dateien unterschiedlichen Typs und Namens importiert haben, können Sie das Titelattribut zur Auswahl verwenden. Zu diesem Zeitpunkt wird die Rolle des rel-Attributs deutlich. Es kann den importierten Dateityp angeben, der bei der ersten Anzeige der Webseitendatei angewendet wird. Derzeit kann es nur dem CSS-Stylesheet-Typ zugeordnet werden.
Externe Stile sind die beste Lösung für CSS-Anwendungen. Eine Stylesheet-Datei kann von mehreren Webseiten referenziert werden, und eine Webseitendatei kann mehrere Stylesheets importieren, indem das Link-Element wiederholt verwendet wird, um verschiedene Stylesheet-Dateien zu importieren.
Erweitertes Wissen: Der Unterschied zwischen Link und @import
1. Unterschied in der Zugehörigkeit
@import ist eine von CSS bereitgestellte Syntaxregel, die nur die Funktion hat, Stylesheets zu importieren. Link ist ein von HTML bereitgestelltes Tag , mit dem nicht nur CSS-Dateien geladen werden können, Sie können auch RSS, rel-Verbindungsattribute usw. definieren.
2. Unterschied in der Ladereihenfolge
Beim Laden der Seite wird das durch den Link-Tag eingeführte CSS gleichzeitig geladen; das durch @import eingeführte CSS wird nach dem Laden der Seite geladen.
3. Kompatibilitätsunterschied
@import ist eine Syntax, die nur in CSS2.1 verfügbar ist, daher kann es nur in IE5+ erkannt werden; das Link-Tag ist ein HTML-Element und weist keine Kompatibilitätsprobleme auf.
4. Der Unterschied in der DOM-Steuerbarkeit
Sie können DOM über JS bedienen und Link-Tags einfügen, um den Stil zu ändern. Da die DOM-Methode auf Dokumenten basiert, können Sie @import nicht zum Einfügen von Stilen verwenden.
(Lernvideo-Sharing: CSS-Video-Tutorial, Web-Frontend)
Das obige ist der detaillierte Inhalt vonWelche Tags werden verwendet, um CSS-Stile einzuführen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
