Detaillierte Erklärung des Unterschieds zwischen CSS-Link und @import

Wie fügt man CSS in HTML ein?

Es gibt drei Möglichkeiten, CSS in HTML festzulegen:

Im Einklang
Eingebettet
Import-Link
Importieren-@import

1. Inline-Stil. Das heißt, CSS wird im Style-Attribut im HTML-Tag festgelegt. Dabei ist zu beachten, dass die Name-Wert-Paare des CSS-Codes mit einem Doppelpunkt verbunden werden: und unterschiedliche CSS-Styles durch ein Semikolon getrennt werden. Obwohl diese Methode zum Anzeigen und Debuggen praktisch ist, verstößt sie gegen das Prinzip der Trennung von Struktur und Präsentation und wird von uns nicht empfohlen. In Bezug auf die Ladegeschwindigkeit ist dies jedoch die schnellste der drei Methoden. Wenn Sie das nicht glauben, können Sie sich Portalseiten wie Sina, NetEase, QQ, Sohu usw. ansehen. Die meisten Inhaltsseiten haben CSS direkt in die Webseiten geschrieben.

Dies ist Sinas Homepage

2. Eingebettet. Diese Methode ist für uns praktisch zum Anzeigen und Debuggen, aber wenn viele Stile vorhanden sind, ist diese Methode nicht geeignet. Hinweis: Das <style>-Tag muss sich im <head> befinden.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Dokument</title>
        <style type="text/css">
            #meineDiv{
                 Farbe: rot;
                 Hintergrundwiederholung: keine Wiederholung;
                 Schriftgröße: 18px;
            } 
       
        </Stil>
</Kopf>
<body> <div id="myDiv"> Dies ist ein Div.</div>
</body>
</html>

3. Import-Link. Zum Importieren gibt es zwei Möglichkeiten: Eine verwendet das Tag <link> und die andere die Methode @import. Erster Link einführen

Link: Muss im Head-Tag stehen. Mit dieser Methode können externe CSS-Stylesheets in HTML eingefügt werden, was dringend empfohlen wird.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Dokument</title>
        <link rel="stylesheet" styl="text/css" href="style.css">
</Kopf>
<Text>       
         <div id="myDiv">Dies ist ein Div.</div>
</body>
</html>

3. Importieren-@import

@import: Auch im Head-Tag kann diese Methode externe CSS-Stylesheets in HTML einbringen. Beachten Sie, dass zwischen Import und URL ein Leerzeichen steht.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Dokument</title>
        <style type="text/css">
            @import url("style.css");
        </Stil>
</Kopf>
<Text>       
         <div id="myDiv">Dies ist ein Div.</div>
</body>
</html>

Darüber hinaus kann Import auch in CSS-Stylesheets verwendet werden, um andere Stylesheets einzuführen. Wir schreiben direkt in CSS:

@import url("style.css")

Optimales Schreiben von @import
Es gibt im Allgemeinen die folgenden Möglichkeiten, @import zu schreiben:
@import 'style.css' // Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4 erkennen dies nicht
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4 erkennt nicht
@import url(style.css) //Windows NS4, Macintosh NS4 erkennt nicht
@import url('style.css') // Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4 erkennen nicht
@import url("style.css") //Windows NS4, Macintosh NS4 erkennen dies nicht. Aus der obigen Analyse wissen wir, dass @import url(style.css) und @import url("style.css") die beste Wahl für die kompatibelsten Browser sind. Aus Sicht der Byte-Optimierung wird @import url(style.css) am meisten empfohlen.

Der Unterschied zwischen Link und @import:

1.link ist ein XHTML-Tag. Neben dem Laden von CSS kann es auch andere Dinge wie RSS definieren; @import gehört zur CSS-Kategorie und kann nur CSS laden.

2. Wenn der Link auf CSS verweist, wird er gleichzeitig mit der Seite geladen. @import erfordert, dass die Seite vor dem Laden vollständig geladen ist. Daher empfehlen wir im Allgemeinen nicht, die Methode @import zu verwenden.

3.link ist ein XHTML-Tag und weist keine Kompatibilitätsprobleme auf; @import wurde in CSS2.1 vorgeschlagen und wird von Browsern niedrigerer Versionen nicht unterstützt. Aus dieser Sicht empfehlen wir auch nicht, die @import-Methode zu verwenden.

4.link unterstützt die Verwendung von Javascript zur DOM-Steuerung zum Ändern von Stilen, während @import dies nicht unterstützt.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<: Informationen zu Problemen bei der automatischen Bereitstellung von Jenkins + Docker + ASP.NET Core (Fallstricke vermeiden)

>>: Einführung in den Unterschied zwischen Verknüpfungssymbol und Symbolcode

Erläuterung synthetischer React-Ereignisse

Detaillierte Erklärung des Unterschieds zwischen CSS-Link und @import

Erläuterung synthetischer React-Ereignisse

Verwenden Sie CSS, um ein Datei-Upload-Muster zu zeichnen

Detaillierte Erklärung der wunderbaren Verwendung von SUID, SGID und SBIT in Linux

Grafisches Tutorial zum Herunterladen und Installieren von MySQL 8.0 unter Windows 10

Optimierung der Datenbank-SQL-Anweisung

Detaillierte Erläuterung der offiziellen Gesichtsüberprüfung des WeChat Mini-Programms

Der Abstand zwischen mehreren Divs mit Inline-Block unterscheidet sich von der Programmiermethode

MySQL Dual-Machine Hot-Standby-Implementierungslösung [testbar]

Erweiterter Crawler - Verwendung der Scrapy_splash-Komponente für automatisches JS-Rendering

Probleme und Lösungen bei der Installation von Mininet auf Ubuntu 16.04.4LTS

Artikel empfehlen

Implementierung des MySQL Shell import_table-Datenimports

Zusammenfassung der Unterschiede zwischen den Methoden find() und filter() in JavaScript

Die normale Methode der MySQL-Deadlock-Prüfungsverarbeitung

Zusammenfassung der grundlegenden Verwendung von JS-Arrays

Detaillierte Beschreibung allgemeiner Ereignisse und Methoden von HTML-Text

Detaillierte Erklärung des Nginx Reverse-Proxy-Beispiels

Beispiel für Auslassungspunkte bei Überlauf von mehrzeiligem CSS-Text

Implementierung von Zugriffskontrolle und Verbindungsbeschränkung basierend auf Nginx

Detaillierte Schritte zur Installation des CentOS7-Systems auf einer virtuellen VMWare-Maschine

Velocity.js implementiert den Seiten-Scrolling-Umschalteffekt

js realisiert bidirektionale Datenbindung (Accessor-Überwachung)

So ändern Sie die Länge eines Eingabetextfelds entsprechend seinem Inhalt

Rastersysteme im Webdesign

Detaillierte Erläuterung des Installations- und Verpackungsfalls von JavaScript Axios

So zeigen Sie Dateien im Docker-Image an