Heim > Artikel > So fügen Sie HTML einen CSS-Stil hinzu

So fügen Sie HTML einen CSS-Stil hinzu

百草Original: 2023-11-01 10:27:321474Durchsuche

Zu den Möglichkeiten, CSS-Stile zu HTML hinzuzufügen, gehören Inline-Stile, interne Stylesheets und externe Stylesheets. Ausführliche Einführung: 1. Inline-Stile werden direkt in HTML-Elemente geschrieben und über das Stilattribut definiert. Diese Methode eignet sich für die Stildefinition eines einzelnen Elements. Sie wird nicht für die weit verbreitete Verwendung in großen Projekten empfohlen, da sie den HTML-Code verwirrend macht . , schwer zu pflegen; 2. Das interne Stylesheet wird im „93f0f5c25f18dab9d176bd4f6de5d30e“-Tag platziert und mit dem „c9ccee2e6ea535a969eb3f532ad9fe89“-Tag definiert Datei usw.

Es gibt verschiedene Möglichkeiten, CSS-Stile in HTML hinzuzufügen, darunter Inline-Stile, interne Stylesheets und externe Stylesheets. Im Folgenden erkläre ich jede Methode im Detail und gebe entsprechenden Beispielcode.

Inline-Stil:

Der Inline-Stil wird direkt in das HTML-Element geschrieben und über das Style-Attribut definiert. Diese Methode eignet sich für die Stildefinition eines einzelnen Elements und wird nicht für den weit verbreiteten Einsatz in großen Projekten empfohlen, da sie den HTML-Code unübersichtlich machen und die Wartung erschweren kann.

Beispielcode:

<p style="color: red;">这是一段红色的文本。</p>

Internes Stylesheet:

Das interne Stylesheet wird im 93f0f5c25f18dab9d176bd4f6de5d30e-Tag platziert und mithilfe des c9ccee2e6ea535a969eb3f532ad9fe89-Tags definiert. Diese Methode eignet sich für die Stildefinition einer einzelnen HTML-Datei. Wenn Sie denselben Stil in mehreren HTML-Dateien verwenden müssen, müssen Sie den Code kopieren, was der Wiederverwendung und Wartung des Codes nicht förderlich ist.

Beispielcode:

<!DOCTYPE html>  
<html>  
<head>  
  <style>  
    p {  
      color: red;  
    }  
  </style>  
</head>  
<body>  
  <p>这是一段红色的文本。</p>  
</body>  
</html>

Externes Stylesheet:

Ein externes Stylesheet ist eine eigenständige CSS-Datei, auf die in der HTML-Datei über das Tag 2cdf5bf648cf2f33323966d7f58a7f3f verwiesen wird. Dies ist die am meisten empfohlene Methode, da sie Stil und Inhalt trennt und so die Wartbarkeit des Codes verbessert. Gleichzeitig können externe Stylesheets in mehreren HTML-Dateien referenziert werden, um eine Wiederverwendung des Codes zu erreichen.

Angenommen, wir haben eine CSS-Datei namens „styles.css“ mit folgendem Inhalt:

p {  
  color: red;  
}

Der Code zum Verweisen auf diese CSS-Datei in der HTML-Datei lautet wie folgt:

<!DOCTYPE html>  
<html>  
<head>  
  <link rel="stylesheet" type="text/css" href="styles.css">  
</head>  
<body>  
  <p>这是一段红色的文本。</p>  
</body>  
</html>

Im obigen Code gibt das href-Attribut den Pfad zu an die CSS-Datei. Wenn sich die CSS-Datei und die HTML-Datei im selben Verzeichnis befinden, können Sie den Dateinamen direkt verwenden. Wenn sie sich nicht im selben Verzeichnis befinden, müssen Sie einen relativen oder einen absoluten Pfad angeben.

Zusätzlich zu den oben genannten drei Methoden können Sie auch die @import-Anweisung verwenden, um auf CSS-Stile zu verweisen. Die @import-Anweisung kann überall in einem HTML-Dokument verwendet werden, wird jedoch normalerweise innerhalb des 93f0f5c25f18dab9d176bd4f6de5d30e-Tags platziert. Bei Verwendung der @import-Anweisung müssen Sie den Pfad der zu importierenden CSS-Datei angeben.

Beispielcode:

<!DOCTYPE html>  
<html>  
<head>  
  <style>  
    @import url(&#39;styles.css&#39;);  
  </style>  
</head>  
<body>  
  <p>这是一段红色的文本。</p>  
</body>  
</html>

Das obige ist der detaillierte Inhalt vonSo fügen Sie HTML einen CSS-Stil hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html href 样式表

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：CSS-Hintergrundcode-SammlungNächster Artikel：CSS-Hintergrundcode-Sammlung

In Verbindung stehende Artikel

Mehr sehen