So verbinden Sie CSS-Front-End-Fragen und Antworten-php.cn

So verbinden Sie CSS

王林

Freigeben： 2023-05-21 10:47:36

Original

1564 Leute haben es durchsucht

Im Webdesign wird häufig CSS (Cascading Style Sheets) verwendet. CSS kann Webseiten Funktionen wie Stil, Formatierung und Layout hinzufügen und sie so schöner und leichter lesbar machen. Daher ist es ein wichtiger Schritt beim Erlernen von Webdesign, zu wissen, wie man CSS-Dateien verbindet. Als Nächstes erfahren Sie in diesem Artikel, wie Sie CSS verbinden.

1. Inline-CSS

Inline-CSS ist eine Methode zum direkten Einbetten von CSS-Code in HTML-Dateien. Um Inline-CSS zu verwenden, müssen Sie dem HTML-Head-Tag ein Style-Tag hinzufügen und darin CSS-Code schreiben. Hier ist ein Beispiel:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
}
p {
  color: red;
  font-size: 20px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Nach dem Login kopieren

In diesem Beispiel haben wir das Tag <style> verwendet, um CSS-Code in die HTML-Datei einzubetten. Der CSS-Code definiert die Stile der h1- und p-Tags, indem er den Text des h1-Tags blau und den Text des p-Tags rot macht und die Schriftgröße erhöht. <style>标签将CSS代码嵌入到HTML文件中。CSS代码定义了h1和p标签的样式，使h1标签的文本变为蓝色，p标签的文本变为红色，并增加了字体大小。

尽管内嵌CSS非常方便，但在实践中很少使用。这是因为内嵌CSS会使HTML文件变得混乱，难以维护。当网站规模逐渐扩大时，使用外部CSS文件是更好的方法。

二、外部CSS文件

外部CSS文件是将CSS代码存储在单独的文件中，然后在HTML文件中引用该文件的一种方法。

首先，您需要创建一个CSS文件并将所有CSS代码存储在该文件中。命名您的文件时，请使用.css

Obwohl Inline-CSS sehr praktisch ist, wird es in der Praxis selten verwendet. Dies liegt daran, dass Inline-CSS HTML-Dateien unübersichtlich machen und die Pflege erschweren kann. Wenn Ihre Website größer wird, ist die Verwendung externer CSS-Dateien ein besserer Ansatz.

2. Externe CSS-Dateien

Externe CSS-Dateien sind eine Möglichkeit, CSS-Code in einer separaten Datei zu speichern und dann in der HTML-Datei auf die Datei zu verweisen.

Zuerst müssen Sie eine CSS-Datei erstellen und Ihren gesamten CSS-Code in dieser Datei speichern. Verwenden Sie beim Benennen Ihrer Datei .css als Dateierweiterung. Beim Erstellen von CSS-Dateien sollten Sie darauf achten, dass der Code, den Sie schreiben, gut strukturiert ist. Hier ist ein Beispiel:

/* styles.css */
h1 {
  color: blue;
}
p {
  color: red;
  font-size: 20px;
}

Nach dem Login kopieren

Als nächstes verknüpfen Sie die CSS-Datei mit der HTML-Datei innerhalb der HTML-Datei. Fügen Sie ein Link-Tag innerhalb des Head-Tags hinzu. Das rel-Attribut des Tags sollte ein Stylesheet sein und das href-Attribut sollte auf Ihre CSS-Datei verweisen. Hier ist ein Beispiel:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Nach dem Login kopieren

In diesem Beispiel verwenden wir das Link-Tag, um die HTML-Datei mit der CSS-Datei zu verknüpfen. Im Head-Tag haben wir ein Link-Tag hinzugefügt und das rel-Attribut auf „stylesheet“ und das href-Attribut auf den Dateipfad unserer CSS-Datei gesetzt. Dadurch wird der CSS-Stil auf alle relevanten Elemente in der HTML-Datei angewendet.

3. Inline-CSS

Inline-CSS ist eine Methode zum direkten Anwenden von CSS-Code auf HTML-Elemente. Um Inline-CSS zu verwenden, müssen Sie den CSS-Code in das Style-Attribut des HTML-Elements schreiben. Hier ist ein Beispiel:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;font-size:20px;">This is a paragraph.</p>

</body>
</html>

Nach dem Login kopieren

In diesem Beispiel verwenden wir das Style-Attribut, um Inline-CSS direkt auf die Elemente h1 und p anzuwenden. Wie Inline-CSS wird Inline-CSS seltener verwendet, kann aber zum schnellen Hinzufügen von Stilen verwendet werden.

4. Verwenden Sie @import

@import ist eine weitere Möglichkeit, CSS-Dateien zu verbinden. Es funktioniert durch den Import einer CSS-Datei in eine andere CSS-Datei. Hier ist ein Beispiel:

/* styles.css */
@import url("small-styles.css") screen and (max-width: 600px);

h1 {
  color: blue;
}
p {
  color: red;
}

/* small-styles.css */
p {
  font-size: 20px;
}

Nach dem Login kopieren

In diesem Beispiel erstellen wir eine Haupt-CSS-Datei und eine kleinere CSS-Datei und importieren sie mit @import.

Wenn Browser CSS-Dateien laden, laden sie zuerst die Hauptdatei und dann die kleineren Dateien. Kleine Dateien wenden Stile nur auf Browser an, deren Bildschirme weniger als 600 Pixel breit sind.

Der Vorteil der Verwendung von @import besteht darin, dass es dabei helfen kann, Ihren Code zu organisieren und die Dateigröße zu reduzieren. In der Praxis können moderne Browser jedoch CSS-Dateien verarbeiten, die viele Dateien enthalten, sodass @import nicht erforderlich ist. 🎜🎜Fazit🎜🎜Die Verbindung von CSS ist ein entscheidender Schritt bei der Erstellung einer schönen Website. Bei Inline-CSS kann das Einbetten von CSS-Code direkt in die HTML-Datei den Stil einfacher und klarer machen. Die Verwendung externer CSS-Dateien kann die Pflege von HTML-Dateien erleichtern und Teile des Stilcodes vom HTML-Dokument trennen. Inline-CSS- und @import-Methoden werden zwar selten verwendet, können aber in manchen Situationen dennoch nützlich sein. 🎜🎜So oder so ist das Erlernen der Verknüpfung von CSS die Grundlage des Webdesigns. Wir hoffen, dass Ihnen dieser Artikel dabei geholfen hat, die verschiedenen Möglichkeiten zur CSS-Verbindung besser zu verstehen. 🎜

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