Teilen Sie vier Möglichkeiten zum Importieren von CSS-Stilen in HTML-CSS-Tutorial-php.cn

Teilen Sie vier Möglichkeiten zum Importieren von CSS-Stilen in HTML

yulia

Freigeben： 2018-09-17 10:46:16

Original

5325 Leute haben es durchsucht

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>

Nach dem Login kopieren

Rendering:

Teilen Sie vier Möglichkeiten zum Importieren von CSS-Stilen in HTML

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 .

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>

Nach dem Login kopieren

Effektbild:

Teilen Sie vier Möglichkeiten zum Importieren von CSS-Stilen in HTML

2. Link-Link-Typ , also in hinzu, um externe CSS-Dateien aufzurufen, um Stileffekte zu erzielen.

Zum Beispiel: Verwenden Sie einen externen Stillink, um die Farbe des Div auf Grün und die Schriftart auf 40 Pixel festzulegen. Der Code lautet wie folgt:

<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/index.css"/>  
 </head>
 <body>
  <div>今天星期三</div>
 </body>
</html>

Nach dem Login kopieren

Rendering:

Teilen Sie vier Möglichkeiten zum Importieren von CSS-Stilen in HTML

Zusammenfassung:

1. Die Inline-Methode ist umständlich, die Suche ist umständlich und spiegelt nicht die Vorteile von CSS wider. Daher wird sie nicht empfohlen.
2. Eingebettet wird nicht für große Seiten empfohlen, kann aber für kleine Webseiten mit wenigen Stilen verwendet werden.
3. Es ist auch ein externer Stil Was ist der Unterschied zwischen Importstil und Linkstil? Bei Verwendung des Linktyps wird die CSS-Stildatei geladen, bevor der Hauptinhalt der Seite geladen wird, sodass die Webseite, die der Benutzer sieht, von Anfang an einen Stileffekt hat. Wenn Sie die Importmethode verwenden, wird die CSS-Stildatei geladen, nachdem die gesamte Seite geladen wurde. Daher wird manchmal kein Stil angezeigt und der Effekt nach dem Festlegen des Stils tritt nach einem kurzen Moment auf. Aus Sicht der Benutzererfahrung wird daher empfohlen, den Linkstil zur Einführung von CSS-Stilen zu verwenden.

Im Folgenden werden vier Möglichkeiten zum Importieren von CSS in HTML vorgestellt. Die am häufigsten verwendete Methode ist jedoch die Link-Methode. Hoffe es hilft dir!

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!