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

So verbinden Sie CSS und HTML

WBOYOriginal: 2023-05-29 18:30:385425Durchsuche

HTML und CSS sind zwei grundlegende Fähigkeiten für die Webentwicklung. HTML wird zum Aufbau der Struktur von Webseiten verwendet, während CSS dazu verwendet wird, das Erscheinungsbild von Webseiten zu verschönern. Unabhängig davon, ob Sie ein erfahrener Webentwickler oder ein Anfänger sind, müssen Sie wissen, wie Sie diese beiden Fähigkeiten kombinieren können, um wirklich großartige Webseiten zu erstellen.

1. Verwenden Sie internes CSS

Im Head-Tag einer HTML-Seite können Sie CSS-Stile über das Tag c9ccee2e6ea535a969eb3f532ad9fe89 einbetten. Sie können alle benötigten CSS-Stile im c9ccee2e6ea535a969eb3f532ad9fe89-Tag definieren, sodass die HTML-Seite beim Laden die CSS-Stile auf das Dokument anwendet. Zum Beispiel das folgende Beispiel: c9ccee2e6ea535a969eb3f532ad9fe89标签来嵌入CSS样式。你可以在c9ccee2e6ea535a969eb3f532ad9fe89标签中定义你所有需要的CSS样式，这样HTML页面在加载时就会将CSS样式应用到文档中。例如下面的示例：

<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
    <style>
        body {
            background-color: blue;
        }
        h1 {
            color: white;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是我的第一个网页</p>
</body>
</html>

在上面的代码中，我们通过在c9ccee2e6ea535a969eb3f532ad9fe89标签中嵌入CSS样式，将页面背景颜色设置为蓝色，将标题颜色设置为白色并居中对齐。

二、使用外部CSS文件

如果你在多个HTML页面中要使用相同的CSS样式，那么使用内部CSS会显得非常冗余，这时候我们可以使用外部CSS文件。我们新建一个以.css为后缀的文件，例如style.css，并在HTML页面的头部标签内通过2cdf5bf648cf2f33323966d7f58a7f3f标签将CSS样式文件链接到页面上。例如：

<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是我的第一个网页</p>
</body>
</html>

在样式文件style.css中，我们可以定义所有需要用到的CSS样式。

body {
    background-color: blue;
}
h1 {
    color: white;
    text-align: center;
}

三、使用行内CSS

除了内部CSS和外部CSS文件，我们还可以使用行内CSS。行内CSS是指在HTML标签内使用style属性来定义CSS样式。例如：

<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
</head>
<body>
    <h1 style="color: white; text-align: center;">欢迎来到我的网页</h1>
    <p style="background-color: blue;">这是我的第一个网页</p>
</body>
</html>

在上面的代码中，我们在4a249f0d628e2318394fd9b75b4636b1标签和e388a4556c0f65e1904146cc1a846beerrreee

Im obigen Code setzen wir die Hintergrundfarbe der Seite auf Blau, indem wir den CSS-Stil in das Tag c9ccee2e6ea535a969eb3f532ad9fe89 einbetten Die Titelfarbe ist auf Weiß und zentriert eingestellt.

2. Externe CSS-Dateien verwenden

Wenn Sie denselben CSS-Stil auf mehreren HTML-Seiten verwenden möchten, ist die Verwendung von internem CSS derzeit sehr überflüssig Es können CSS-Dateien verwendet werden. Wir erstellen eine neue Datei mit dem Suffix .css, z. B. style.css, und verknüpfen die CSS-Stildatei über das Tag 2cdf5bf648cf2f33323966d7f58a7f3f im Head-Tag der HTML-Seite mit der Seite. Zum Beispiel: #🎜🎜#rrreee#🎜🎜#In der Stildatei style.css können wir alle CSS-Stile definieren, die verwendet werden müssen. #🎜🎜#rrreee#🎜🎜#3. Verwenden Sie Inline-CSS#🎜🎜##🎜🎜#Zusätzlich zu internem CSS und externen CSS-Dateien können wir auch Inline-CSS verwenden. Inline-CSS bezieht sich auf die Verwendung des style-Attributs innerhalb von HTML-Tags, um CSS-Stile zu definieren. Zum Beispiel: #🎜🎜#rrreee#🎜🎜#Im obigen Code haben wir das style-Attribut im Tag 4a249f0d628e2318394fd9b75b4636b1 und im Tag e388a4556c0f65e1904146cc1a846bee verwendet. Dabei werden jeweils die Farbe und Ausrichtung der Überschriften sowie die Hintergrundfarbe der Absätze festgelegt. #🎜🎜##🎜🎜#Zusammenfassung#🎜🎜##🎜🎜#Ob es sich um internes CSS, externe CSS-Datei oder Inline-CSS handelt, ihr letztendlicher Zweck besteht darin, das Erscheinungsbild der Webseite zu verschönern. In der tatsächlichen Entwicklung können wir je nach tatsächlicher Situation unterschiedliche Möglichkeiten zum Verknüpfen von CSS und HTML wählen. Wenn mehr CSS-Stile definiert werden müssen, können wir externe CSS-Dateien verwenden. Wenn weniger Stile definiert werden müssen, können wir internes CSS oder Inline-CSS verwenden. #🎜🎜#

Das obige ist der detaillierte Inhalt vonSo verbinden Sie CSS und HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：HTML-ProzessNächster Artikel：HTML-Prozess

In Verbindung stehende Artikel

Mehr sehen