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
Über die Kontrolle und Verschönerung von Eingabedateien
Beim Hochladen auf einigen Websites wird nach dem...
Zusammenfassung zum Hinzufügen von Root-Berechtigungen für Benutzer in Linux
1. Fügen Sie einen Benutzer hinzu . Verwenden Sie...
MySQL 8.0.26-Installation und vereinfachtes Tutorial (das umfassendste im Internet)
Inhaltsverzeichnis 1. MySQL herunterladen 1.1 Her...
MySQL in Windows net start mysql Beim Starten des MySQL-Dienstes tritt ein Fehler auf. Lösung für Systemfehler
Inhaltsverzeichnis 1- Fehlerdetails 2-Einzellösun...
Tutorial zu HTML-Tabellen-Tags (20): Zeilenhintergrund-Farbattribut BGCOLOR
Mit dem BGCOLOR-Attribut kann die Hintergrundfarb...
Detaillierte Erläuterung der MERGE-Speicher-Engine von MySQL
Die MERGE-Speicher-Engine behandelt eine Gruppe v...
So kennzeichnen Sie die Quelle und Herkunft von CSS3-Zitaten
Wegen der Epidemie werde ich zu Hause fast schimm...
Tipps zur Verwendung des Befehls „Docker Inspect“
Beschreibung und Einführung Docker Inspect ist ei...
Implementierung der Funktion zum Hinzufügen einer Besuchszählung im GitHub+Jekyll-Blog in einer Minute mit JS
Inhaltsverzeichnis Fügen Sie dem GitHub+Jekyll-Bl...
JS asynchroner Code Unit-Test Magie Promise
Inhaltsverzeichnis Vorwort Verkettung von Verspre...
Detaillierte Beschreibung von Shallow Copy und Deep Copy in js
Inhaltsverzeichnis 1. js-Speicher 2. Abtretung 3....
So zeigen Sie Bildinformationen in Docker an
In diesem Artikel müssen wir lernen, wie man Bild...
Eine kurze Diskussion über vier Lösungen für Vue Single Page SEO
Inhaltsverzeichnis 1.Bereitstellung der serversei...
Eine Untersuchung des JS-Operators im Problem
Die Sache ist: Jeder kennt „Speicherlecks“. Es gi...
Analyse der Unfallursachen durch Unicode-Signatur BOM
Möglicherweise verwenden Sie hier Include-Dateien,...