Heim > Artikel > Web-Frontend > Teilen Sie vier Möglichkeiten zum Importieren von CSS-Stilen in HTML
Teilen Sie vier Möglichkeiten zum Importieren von CSS-Stilen in HTML
- yuliaOriginal
- 2018-09-17 10:46:165281Durchsuche
Beim Layout der Seite werden zwangsläufig CSS und HTML verwendet, da HTML der Hauptinhalt der Seite ist, CSS die Leistung der Seite ist und, um es für Laien auszudrücken, CSS zum Dekorieren von HTML verwendet wird. Wie implementiert man also CSS-Stile in HTML? Zu diesem Zeitpunkt müssen Sie CSS-Dateien in HTML einführen. Heute werde ich mit Ihnen darüber sprechen, wie man CSS in HTML importiert.
Es gibt vier Möglichkeiten, CSS in HTML zu importieren, nämlich Inline-, eingebettete und externe Stile. Externe Stile werden in Importstil und Linkstil unterteilt.
1. Inline , das heißt, fügen Sie den CSS-Stil direkt zum HTML-Tag hinzu und verwenden Sie den Stil, um ihn hinzuzufügen.
Zum Beispiel: Stellen Sie die Schriftart im Div auf 40 Pixel und die Farbe auf Rot ein. Der Code lautet wie folgt:
<div style="font-size: 40px;color: red;">今天星期一</div>
Rendering:
2. Eingebettet , d. h. der CSS-Stil ist in < geschrieben ;style type=" text/css"> und platzieren Sie dann den Stil zwischen
.Zum Beispiel: Schreiben Sie den Stil in
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{font-size: 40px;color: orange;}
</style>
</head>
<body>
<div>今天星期二</div>
</body>
</html>Rendering:
3. Externer Stil (Der externe Stil ist in Importtyp und Link unterteilt Link (Formular)
Der externe Stil besteht darin, den CSS-Stilcode in eine separate externe Datei zu schreiben und ihn dann in den erforderlichen HTML-Code einzuführen. Die Einführungsmethoden für Import und Verknüpfung sind unterschiedlich und werden im Folgenden einzeln vorgestellt.
1. Importieren Sie , d. h. verwenden Sie die @import-URL in .
Zum Beispiel: Verwenden Sie Import, um die Schriftart des Div auf 40 Pixel und die Farbe auf Gelb festzulegen. Der Code lautet wie folgt:
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@import url("css/import.css");
</style>
</head>
<body>
<div>今天星期三</div>
</body>Effektbild:
2. Link-Link-Typ , also in
Das obige ist der detaillierte Inhalt vonTeilen Sie vier Möglichkeiten zum Importieren von CSS-Stilen in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!