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:
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 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. |
>>: Einführung in den Unterschied zwischen Verknüpfungssymbol und Symbolcode
Artikel empfehlen
Eine einfache Methode zum Implementieren der zeitgesteuerten Protokolllöschung unter Linux
Einführung Linux ist ein System, das automatisch ...
Detaillierte Erklärung zur Installation von Redis im Docker und zum Starten als Konfigurationsdatei
Update: Vor Kurzem wurde festgestellt, dass der S...
Eine kurze Diskussion über die entsprechenden Versionen von node node-sass sass-loader
Inhaltsverzeichnis Die Knotenversion stimmt nicht...
Analyse und Lösung der Gründe, warum geplante Crontab-Aufgaben nicht ausgeführt werden
Vorwort Es gibt die folgenden Möglichkeiten, gepl...
Verwenden Sie Nginx, um einen Streaming-Media-Server zu erstellen und die Live-Übertragungsfunktion zu realisieren
Vorne geschrieben In den letzten Jahren ist die L...
So verwenden Sie die Vue-Cache-Funktion
Inhaltsverzeichnis Cache-Funktion in vue2 Transfo...
Bei verschachtelten MySQL-Transaktionen aufgetretene Probleme
MySQL unterstützt verschachtelte Transaktionen, a...
Implementierung von React Routing Guard (Routing-Interception)
React unterscheidet sich von Vue. Es implementier...
So sorgen Sie für eine hohe Konsistenz von CSS-Unterelementen mit übergeordneten Elementen
Absolute Positionierungsmethode: (1) Stellen Sie ...
Detaillierte Erklärung zur Verwendung des Grep-Befehls in Linux
1. Offizielle Einführung grep ist ein häufig verw...
Detaillierte Erläuterung von Kompatibilitätsproblemen und Lösungen zum Festlegen der maximalen und minimalen Breite in der Tabelle
Festlegen der Eigenschaften für Mindest- und Maxi...
CenterOS7 Installations- und Konfigurationsumgebung jdk1.8 Tutorial
1. Deinstallieren Sie zuerst das mit CenterOS gel...
Eine kurze Erläuterung der richtigen Vorgehensweise bei der Wiederherstellung von MySQL-Tabellenbereichen
Inhaltsverzeichnis Vorbemerkungen Reproduktion de...
Gemeinsame Eigenschaften des Framesets (Unterteilung von Frames und Fenstern)
Ein Frame ist ein Webseitenbildschirm, der in mehr...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.23
Dieser Artikel zeichnet den detaillierten Install...