Heim >Web-Frontend >HTML-Tutorial >So importieren Sie CSS-Dateien in HTML
So importieren Sie CSS-Dateien in HTML
- 青灯夜游Original
- 2021-06-15 14:09:2512765Durchsuche
Methode: 1. Verwenden Sie das Link-Tag mit der Syntax „“; 2. Verwenden Sie die Regel „@import“ mit die Syntax „@ import url(“CSS-Dateipfad“);“.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
CSS-Dateien werden im Allgemeinen als externe CSS-Stylesheets bezeichnet. Hierbei handelt es sich um Textdateien, die zum Platzieren von CSS-Codes verwendet werden. CSS-Codes bestehen aus Textcodes mit bestimmten regulären Regeln. Wir verwenden Notepad, um die Erweiterung in eine CSS-Datei zu ändern.
CSS-Dateien haben das Suffix .css Wir sehen, dass Dateien mit dem Suffix .css CSS-Dateien sind.
So importieren Sie CSS-Dateien in HTML
Es gibt zwei Möglichkeiten, CSS-Dateien in HTML zu importieren:
Link (Link)
Importieren (@import)
CSS-Stildatei-- style.css-Code:
p{
font-size: 20px;
color: #fff;
background-color: palevioletred;
}1. Linktyp (Link)
Der Linktyp lädt die CSS-Datei, bevor der Hauptteil der Webseitendatei geladen wird, sodass die angezeigte Webseite einen Stileffekt von hat Anfangs wird nicht wie beim Importtyp zuerst die nicht gestaltete Webseite und dann die gestaltete Webseite angezeigt. Dies ist der Vorteil des Linktyps.
Grammatik:
<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>
Rendering:
2. Import (@import)
Import wird geladen, nachdem die gesamte Webseite geladen wurde. CSS Dies führt also zu einem Problem. Wenn die Webseite relativ groß ist, wird eine Zeit lang eine nicht formatierte Seite angezeigt. Nach einem Flash wird der Stil der Webseite angezeigt. Dies ist ein inhärenter Importfehler.
Grammatik:
<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:
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo importieren Sie CSS-Dateien in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!