Heim > Artikel > Web-Frontend > So verbinden Sie HTML mit CSS

So verbinden Sie HTML mit CSS

下次还敢Original: 2024-04-11 11:21:42791Durchsuche

HTML stellt über das <link>-Tag eine Verbindung zu CSS her. Das rel-Attribut des Tags ist auf „stylesheet“ gesetzt und das href-Attribut gibt den Pfad zur CSS-Datei an. Die Schritte umfassen: Erstellen einer CSS-Datei, Schreiben von Stilregeln und Verbinden der CSS-Datei mit dem HTML-Dokument. Die spezifische Syntax lautet: .

HTML So verbinden Sie CSS

Das Verbinden von CSS in HTML kann über das <link>-Tag erreicht werden. Das <link>-Tag wird verwendet, um externe Ressourcen, wie z. B. CSS-Stylesheets, in HTML-Dokumente einzuführen. <link> 标签实现。<link> 标签用于在 HTML 文档中引入外部资源，例如 CSS 样式表。

语法：

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

属性说明：

rel: 指定资源的类型，对于 CSS 样式表，值为 "stylesheet"。
href: 指定要引入的 CSS 文件的路径。路径可以是绝对路径（从根目录开始）或相对路径（从当前 HTML 文件开始）。

连接步骤：

创建 CSS 文件：用文本编辑器创建一个新的文件，并使用 .css 作为扩展名（例如：style.css）。
编写 CSS 样式：在 CSS 文件中编写样式规则，定义元素的各种样式属性。
将 CSS 文件链接到 HTML：在 HTML 文档中，在 <head> 标签内插入 <link> 标签，并指定 rel="stylesheet" 和 href 属性。

示例：

<code class="html"><!DOCTYPE html>
<html>
<head>
  <title>HTML 和 CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>标题</h1>
  <p>段落文本</p>
</body>
</html></code>

在上面的示例中：

style.css 是 CSS 文件的名称。
标签将 CSS 文件连接到 HTML 文档。
HTML 文档中的内容将采用 style.css

Syntax: 🎜🎜rrreee🎜🎜Attributbeschreibung: 🎜🎜

🎜rel:🎜 Gibt den Typ der Ressource an. Für CSS-Stylesheets ist der Wert „stylesheet“. 🎜
🎜href:🎜 Geben Sie den Pfad zur zu importierenden CSS-Datei an. Der Pfad kann absolut (ausgehend vom Stammverzeichnis) oder relativ (ausgehend von der aktuellen HTML-Datei) sein. 🎜🎜🎜🎜Verbindungsschritte: 🎜🎜
1. 🎜CSS-Datei erstellen: 🎜Erstellen Sie eine neue Datei mit einem Texteditor und verwenden Sie .css als Erweiterung (zum Beispiel: style.css). 🎜
2. 🎜CSS-Stile schreiben: 🎜Stilregeln in CSS-Dateien schreiben, um verschiedene Stilattribute von Elementen zu definieren. 🎜
3. 🎜Verknüpfen Sie CSS-Dateien mit HTML: 🎜Fügen Sie im HTML-Dokument das <link>-Tag in das <head>-Tag ein und geben Sie an rel="stylesheet"- und href-Attribute. 🎜
🎜🎜Beispiel: 🎜🎜rrreee🎜Im Beispiel oben: 🎜
- style.css ist der Name der CSS-Datei. 🎜
- Tag verbindet CSS-Dateien mit HTML-Dokumenten. 🎜
- Der Inhalt des HTML-Dokuments übernimmt die in style.css definierten Stile. 🎜🎜

Das obige ist der detaillierte Inhalt vonSo verbinden Sie HTML mit CSS. 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：So referenzieren Sie externes CSS in HTMLNächster Artikel：So referenzieren Sie externes CSS in HTML

In Verbindung stehende Artikel

Mehr sehen