Im Entwicklungsprozess von Front-End-Websites müssen wir alle CSS-Stile verwenden. Mit CSS-Stilen können Sie das Layout, die Schriftarten, die Farben, den Hintergrund und andere Effekte der Seite effektiver steuern. Wie werden diese Dateien oder Codes im CSS-Stil in HTML importiert? In diesem Kapitel erfahren Sie, wie Sie CSS-Stildateien in HTML einführen. Lassen Sie neben dem Unterschied zwischen Link und @import (Codebeispiel) auch alle verstehen, wie CSS-Stile importiert werden, wobei der Schwerpunkt auf dem Import von CSS-Stildateien liegt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
1. So importieren Sie CSS-Stile in HTML
HTML ist hauptsächlich für die Inhaltsanzeige der Webseite verantwortlich, während die CSS-Datei ist für den Stil des Webseiteninhalts verantwortlich. Die Verwendungsmöglichkeiten von CSS-Stilen in HTML sind: inline, eingebettet, extern,
und externer Stil ist unterteilt in: Link (Link) und importieren (@import) ). [Empfohlenes Lernen: CSS-Video-Tutorial]
Dann möchte ich es Ihnen unten vorstellen:
1. - -Codebeispiel mit CSS
in HTML-Tags:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>行内式</title> </head> <body> <p style="color: red;font-size: 20px;">行内式行内式行内式行内式行内式行内式行内式行内式行内式<p> </body> </html>
Rendering:
Inline referenziert durch CSS Der Stil kann auch als Inline-Stil oder Zeilenstil bezeichnet werden. Der offensichtliche Vorteil besteht darin, dass er sehr praktisch und effizient ist Wenn die Anzahl der Codezeilen eine bestimmte Länge erreicht, ist dies nicht möglich. Inline-CSS wird oft als Test verwendet, um Fehler im Code zu finden.
Vorteile:
Es gibt keine Stylesheet-Datei, was manchmal die Effizienz verbessern kann;
Verwenden Sie das Stilattribut, das den stärksten Stileffekt hat und den gleichen Stileffekt anderer Einführungsmethoden überschreibt.
Nachteile:
Es ist für mehrere Elemente schwierig, Stile gemeinsam zu nutzen, was der Wiederverwendung von Code nicht förderlich ist;
HTML- und CSS-Codes sind gemischt, was die Lesbarkeit für Programmierer und Suchmaschinen erschwert.
2. Eingebettet --- Schreiben Sie CSS-Inhalte über das Style-Tag in das Head-Tag
Codebeispiel:
 "165951646569588Wie führt man den CSS-Stil in HTML ein? Und der Unterschied zwischen Link und @import (Codebeispiel)")
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内嵌式</title>
<style>
p{
background-color: #21B4BB;
color: #fff;
font-size: 20px;
}
</style>
</head>
<body>
<p>内嵌式内嵌式内嵌式内嵌式内嵌式内嵌式内嵌式<p>
</body>
</html>Rendering:
Der von CSS referenzierte Inline-Stil kann auch als interner Stil oder Stil auf Seitenebene bezeichnet werden, und das Ganze wird im Kopf platziert Tag Definieren Sie im Inneren den Stil im Style-Tag. Der Umfang ist auf die Elemente dieser Seite beschränkt. Wenn der von Ihnen geschriebene Code mehrere hundert Zeilen überschreitet, denken Sie darüber nach, wie nervig es ist, die Codeseite jedes Mal nach oben zu ziehen , also ist es sexuell minderwertig.
Vorteile: Wie bei Inline-Stylesheets werden keine zusätzlichen Anforderungen generiert und es wird zunächst die Trennung von Struktur und Stil erreicht, wodurch es besser für einseitige Website-Anwendungen geeignet ist.
Nachteile: Da das interne Stylesheet in der HTML-Datei geschrieben ist, ist die Seite unrein, die Dateigröße ist groß, es ist für Webcrawler nicht förderlich, Informationen zu erhalten, es ist nicht förderlich für die Wartung usw Stile können nicht zwischen Seiten geteilt werden
3. Externer Stil---Einführung externer Stylesheets (CSS-Stildateien) über den Link-Tag
1) Link Stil (Link)
Syntax:
<link rel="stylesheet" type="text/css" href="css的路径" >
Codebeispiel:
HTML-Code:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>链接式</title> <link rel="stylesheet" type="text/css" href="style.css" > </head> <body> <p>链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式<p> </body> </html>
CSS-Stildatei – Stil .css-Code:
 "165951763050474Wie führt man den CSS-Stil in HTML ein? Und der Unterschied zwischen Link und @import (Codebeispiel)")
p{
font-size: 20px;
color: #fff;
background-color: #70DBDB;
}Rendering:
Der Linktyp lädt die CSS-Datei, bevor der Hauptteil der Webseitendatei geladen wird. Die angezeigte Webseite hat also von Anfang an einen Stileffekt. Es wird nicht zuerst die nicht gestaltete Webseite und dann die gestaltete Webseite angezeigt. Dies ist der Vorteil des Linktyps.
2) Import (@import)
Syntax:
 "165951772494750Wie führt man den CSS-Stil in HTML ein? Und der Unterschied zwischen Link und @import (Codebeispiel)")
<style type="text/css" media="screen">
@import url("CSS文件");
</style>Codebeispiel:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导入式</title>
<style type="text/css" media="screen">
@import url("style.css");
</style>
</head>
<body>
<p>导入式导入式导入式导入式导入式导入式导入式导入式导入式<p>
</body>
</html>Rendering:
Der Import lädt die CSS-Datei, nachdem die gesamte Webseite geladen wurde, sodass dies zu einem Problem führt Wenn die Webseite relativ groß ist, wird die Seite ohne Stil für eine Weile angezeigt und dann nach einem kurzen Moment der Stil der Webseite angezeigt. Dies ist ein inhärenter Importfehler.
3) Vor- und Nachteile der externen Verbindung
Vorteile:
Code, der Struktur und Leistung vollständig implementiert Trennung
Einfach wiederzuverwenden und zu warten
Da es in separate Dateien aufgeteilt ist, wird die Größe der HTML-Datei erheblich reduziert, was die Die Seitenstruktur ist für Programmierer und Webcrawler leichter zu lesen
Sie ist suchmaschinenfreundlich und ermöglicht es Suchmaschinen, die Seite höher zu bewerten, was sich positiv auf das Suchmaschinenranking der Seite auswirkt
Das externe Stylesheet wird nach dem ersten Besuch des Benutzers auf dem Computer zwischengespeichert und muss beim nächsten Besuch nicht geladen werden
Nachteile:
Wenn es viele Stile gibt, wird die CSS-Datei sehr groß und schwer zu finden. Darüber hinaus bedeutet eine weitere CSS-Datei eine weitere HTTP-Anfrage, was bei einer stark besuchten Website den Druck auf den Server erhöht
2. Verknüpfen und importieren Sie die Unterschied zwischen der Formel (@import)
Link ist ein XHTML-Tag. Zusätzlich zum Laden von CSS kann es auch andere Transaktionen wie RSS definieren, während @. import gehört zur CSS-Kategorie; wenn
Link auf CSS verweist, wird es gleichzeitig geladen, wenn die Seite geladen wird; vollständig geladen werden.
link ist ein XHTML-Tag und weist keine Kompatibilitätsprobleme auf, während @import in CSS2.1 vorgeschlagen wurde und von Browsern niedrigerer Versionen nicht unterstützt wird.
ink unterstützt die Verwendung von Javascript zur Steuerung des DOM zum Ändern des Stils; @import unterstützt dies nicht.
@import kann andere Stylesheets in die CSS-Datei einführen; der Link unterstützt dies nicht.
(Lernvideo-Sharing: Erste Schritte mit dem Web-Frontend)
Das obige ist der detaillierte Inhalt vonWie führt man den CSS-Stil in HTML ein? Und der Unterschied zwischen Link und @import (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
