Heim >Web-Frontend >HTML-Tutorial >Drei gängige Methoden zum Einbetten von CSS in HTML-Dokumente
Drei gängige Methoden zum Einbetten von CSS in HTML-Dokumente
- 高洛峰Original
- 2017-02-23 13:33:562407Durchsuche
Die folgenden drei Möglichkeiten werden üblicherweise verwendet, um CSS in HTML zu definieren: Einbetten, Verknüpfen, Inline
1. Eingebettet
HTML verwenden Das Stilelement definiert CSS-Stile im Dokument.
<head>
<style type="text/css">
h1{color:red}
p{color:blue}
</style>
<head>
2. Inline
Jedes HTML-Element enthält ein Stilattribut, das den Stil direkt definieren kann. Dieser Stil kann nur auf den Inhalt dieses Elements angewendet werden und hat keine Auswirkung auf ein anderes Element mit demselben Namen.
<p style="color:#FFF;font-weight:bold;">内联样式</p>
3. Externe Referenz
Externe Referenz bedeutet, dass das HTML-Dokument selbst keine CSS-Stile enthält, sondern dynamisch auf externe CSS-Dateien verweist, um die Präsentation des Dokuments zu definieren.
1. Verwenden Sie die Anweisung zur Verarbeitung von Stylesheets.
Schreiben Sie eine Anweisung zur Verarbeitung von Stylesheet-Anweisungen am Anfang des HTML-Dokuments.
<?xml-stylesheet type="text/css" href="mystyle.css" ?> <html> 指令语句 </html>
Verwenden Sie jedoch nur die XML-Syntax Die Direktive wird nur für HTML-Dokumente unterstützt, die im xhtml- oder xml-Format geschrieben sind. Die meisten Browser sind nur gültig, wenn sie im xhtml- oder xml-Format gespeichert sind, und JS kann diese Art von CSS nicht verarbeiten, daher wird die Verwendung nicht empfohlen.
2. Verwenden Sie den @import-Befehl
Verwenden Sie den @import-Befehl zwischen Stilelementen, um externe CSS-Dateien zu importieren
<head>
<style type="text/css">
<!--下面两行代码效果一样
@import "mystyle.css";
@import url("mystyle.css");
-->
</style>
</head>
Jede @import-Regel muss in allen Regeln vorkommen Vor. Der Parameter ist die URL-Adresse einer CSS-Datei. Sie können die @import-Direktive auch in einer CSS-Datei verwenden, um eine andere CSS-Datei zu importieren.
3. Verwenden Sie das Link-Element
<head> <link rel="stylesheet" href="css的url" type="text/css" > </head>
4. Verwenden Sie den HTTP-Nachrichtenheader, um auf das Stylesheet zu verlinken.
Sie können das Linkfeld des HTTP-Nachrichtenheaders verwenden, um auf ein externes Stylesheet zu verlinken.
link:<mystyle.css>;rel=stylesheet; //等同于<link rel="stylesheet" href="css的url" type="text/css" >
Im HTTP-Header können mehrere Links verwendet werden, um mehrere Stylesheets zu verknüpfen, und der Link im HTTP-Header hat Vorrang vor dem Link im HTML-Dokument (im Head-Element).
Weitere verwandte Artikel zu den drei gängigen Methoden zum Einbetten von CSS in HTML-Dokumente finden Sie auf der chinesischen PHP-Website!