Heim > Artikel > Web-Frontend > So betten Sie CSS und Bilder in HTML ein
So betten Sie CSS und Bilder in HTML ein
- coldplay.xixiOriginal
- 2021-03-03 16:07:374191Durchsuche
Methoden zum Einbetten von CSS und Bildern in HTML: 1. Verwenden Sie das Stilelement von HTML, um den CSS-Stil im Dokument zu definieren. 2. Jedes HTML-Element enthält ein Stilattribut, das den Stil direkt definieren kann CSS-Dateien definieren die Darstellung des Dokuments.
Die Betriebsumgebung dieses Tutorials: Windows7-System, HTML5-Version, DELL G3-Computer.
So betten Sie CSS und Bilder in HTML ein:
1. Eingebettet
Verwenden Sie das Stilelement von HTML, um den CSS-Stil im Dokument zu definieren.
Der Code lautet wie folgt:
<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.
Der Code lautet wie folgt:
<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 Anweisungsanweisung zur Stylesheet-Verarbeitung.
Schreiben Sie eine Anweisung zur Anweisungsverarbeitung zum Stylesheet am Anfang des HTML-Dokuments.
Der Code lautet wie folgt:
<?xml-stylesheet type="text/css" href="mystyle.css" ?> <html> 指令语句 </html>
Allerdings werden nur HTML-Dokumente im XML-Syntaxformat geschrieben unterstützen die Verwendung dieser Anleitung, die meisten Browser sind nur gültig, wenn sie im XHTML- oder XML-Format gespeichert werden, 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.
Der Code lautet wie folgt:
<head>
<style type="text/css">
<!--下面两行代码效果一样
@import "mystyle.css";
@import url("mystyle.css");
-->
</style>
</head>Jede @import-Regel muss vor allen Regeln stehen. 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
Der Code lautet wie folgt:
<head> <link rel="stylesheet" href="css的url" type="text/css" > </head>
Dies ist auch die am häufigsten verwendete Methode.
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.
Der Code lautet wie folgt:
link:<mystyle.css>;rel=stylesheet; //等同于<link rel="stylesheet" href="css的url" type="text/css" >
Mehrere Links können im HTTP-Header 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).
Verwandte Lernempfehlungen: HTML-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo betten Sie CSS und Bilder in HTML ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!