So verknüpfen Sie CSS-Dateien mit HTML-Dateien-HTML-Tutorial-php.cn

So verknüpfen Sie CSS-Dateien mit HTML-Dateien

下次还敢

Freigeben： 2024-04-11 09:23:22

Original

1107 Leute haben es durchsucht

Das Verknüpfen einer CSS-Datei mit einer HTML-Datei erfordert die folgenden Schritte: Erstellen und speichern Sie die CSS-Datei am entsprechenden Speicherort. Fügen Sie das Tag im Abschnitt <head> hinzu.

So verknüpfen Sie CSS-Dateien mit HTML-Dateien

So verknüpfen Sie CSS-Dateien mit HTML-Dateien

In der Webentwicklung können durch die Verwendung externer CSS-Dateien Stile von HTML-Inhalten getrennt werden, wodurch die Wartbarkeit und Wiederverwendbarkeit verbessert wird. Hier sind die Schritte zum Verknüpfen einer CSS-Datei mit einer HTML-Datei:

1. Erstellen Sie die CSS-Datei.

Erstellen Sie eine neue Textdatei und geben Sie ihr die Erweiterung „.css“ (z. B. mystyle.css). Schreiben Sie in diese Datei die erforderlichen Stilregeln.

2. Speichern Sie die CSS-Datei am entsprechenden Ort.

Speichern Sie die CSS-Datei am entsprechenden Ort im Website-Verzeichnis. Typischerweise werden CSS-Dateien im selben Verzeichnis wie HTML-Dateien abgelegt, sie können aber auch in anderen Verzeichnissen abgelegt werden.

3. Fügen Sie das <link>-Tag in die HTML-Datei ein. <link> 标记

在 HTML 文件的 <head> 部分，添加以下代码：

<code class="html"><link rel="stylesheet" href="mystyle.css"></code>

Nach dem Login kopieren

其中：

rel="stylesheet" 指定这是一个 CSS 样式表。
href="mystyle.css" 指示浏览器加载名为 mystyle.css 的 CSS 文件。

示例

<code class="html"><html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>标题</h1>
  <p>段落</p>
</body>
</html></code>

Nach dem Login kopieren

保存 HTML 文件并将其加载到浏览器中。浏览器将解析 HTML 文件并加载 style.css 文件，应用其中定义的样式。

提示：

确保 CSS 文件的路径正确。
可以链接多个 CSS 文件，只需在 <head> 部分中添加额外的 <link>
Fügen Sie im Abschnitt <head> der HTML-Datei den folgenden Code hinzu:

wobei: 🎜

rel="stylesheet"

href="mystyle.css"

mystyle.css

style.css

<link>

<head>

Das obige ist der detaillierte Inhalt vonSo verknüpfen Sie CSS-Dateien mit HTML-Dateien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!