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
Einfache Implementierung zum Ignorieren von Fremdschlüsseleinschränkungen beim Löschen von MySQL-Tabellen
Das Löschen einer Tabelle kommt nicht sehr häufig...
Detaillierte Erklärung der Verwendung und des Unterschieds zwischen nohup und & in Linux
Beispiel: Wir verwenden den Python-Code loop_hell...
Gängige Master-Slave-Replikationsarchitekturen in MySQL 4
Inhaltsverzeichnis Replikationsarchitektur mit ei...
Vue implementiert eine Countdown-Schaltfläche für den Bestätigungscode
In diesem Artikelbeispiel wird der spezifische Co...
So erstellen Sie ein responsives Säulendiagramm mit dem CSS-Rasterlayout
Ich spiele jetzt schon eine Weile mit Diagrammen ...
Teilen Sie den Installationsdatensatz für MySql8.0.19
Im vorherigen Artikel wurde der Installationsproz...
Einführung und Beispiele für versteckte Felder in HTML
Grundlegende Syntax: <Eingabetyp="versteck...
Lösung zum Vergessen des MySQL-Datenbankkennworts unter MAC
Schnelle Lösung zum Vergessen des MySQL-Datenbank...
Gestaltung von Popup-Fenstern und schwebenden Ebenen im Webdesign
Im Zuge des schrittweisen Übergangs von herkömmli...
Richtige Verwendung der Vue-Funktion Anti-Shake und Throttling
Vorwort 1. Entprellen: Nach dem Auslösen eines Ho...
So verwenden Sie MySQL zur Abdeckung von Index- und Tabellenrückgabe
Zwei Hauptkategorien von Indizes Verwendete Speic...
Zusammenfassung der Anwendung von Übergangskomponenten in Vue-Projekten
Transtion in Vue ist eine Kapselungskomponente f...
Vue realisiert Preiskalendereffekt
In diesem Artikelbeispiel wird der spezifische Co...
WeChat-Applet zur automatischen Videowiedergabe imitiert Beispiel eines GIF-Animationseffekts
Nachfragehintergrund: Fügen Sie dynamische GIF-Bi...
Lösung für das Problem, dass MySQL zwar bei der Installation in WAMP gestartet werden kann, nach dem Neustart jedoch nicht mehr
Nach der ersten Installation von Wamp können alle...