Rufen Sie verschiedene CSS auf-Front-End-Fragen und Antworten-php.cn

Rufen Sie verschiedene CSS auf

WBOY

Freigeben： 2023-05-21 12:01:07

Original

440 Leute haben es durchsucht

HTML ist als wichtiger Bestandteil der Webentwicklung nicht nur der Inhaltsträger der Seite, sondern auch der Definator von Struktur und Stil. Als Sprache zur Steuerung des Erscheinungsbilds und Stils der Seite kann CSS den Inhalt der Webseite farbenfroher und schöner gestalten.

In der tatsächlichen Entwicklung müssen wir häufig unterschiedliche Stile für unterschiedliche Seiten oder Teile verwenden. Zu diesem Zeitpunkt müssen wir unterschiedliche CSS-Dateien aufrufen. In diesem Artikel erfahren Sie, wie Sie verschiedene CSS-Dateien aufrufen und sie auf der Seite verwenden, um Stile zu diversifizieren.

1. So rufen Sie verschiedene CSS-Dateien auf

Aufruf über den Link-Tag

Sie können externe CSS-Dateien im HTML-Header über den Link-Tag aufrufen. Das Link-Tag muss drei Attribute enthalten: href, rel und type.

Das spezifische Format ist wie folgt:

Unter anderem wird href verwendet, um den Pfad des Aufrufs anzugeben CSS-Datei und rel werden verwendet, um die Beziehung zwischen dem Dokument und dem verknüpften Dokument zu definieren, normalerweise auf Stylesheet eingestellt. Typ gibt den MIME-Typ des verknüpften Dokuments an, normalerweise auf text/css festgelegt.

Zum Beispiel können wir den folgenden Code verwenden, um zwei verschiedene CSS-Dateien im HTML-Header aufzurufen:

<!DOCTYPE html>
<html>
<head>
  <link href="style1.css" rel="stylesheet" type="text/css" />
  <link href="style2.css" rel="stylesheet" type="text/css" />
  <title>调用不同CSS文件示例</title>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

Nach dem Login kopieren

Zu diesem Zeitpunkt können wir unterschiedliche Stile in der Datei style1.css und der Datei style2.css definieren und diese aufrufen verschiedene Seiten zur Diversifizierung der Stile.

Aufruf über @import

Zusätzlich zur Verwendung des Link-Tags können wir auch die Methode @import verwenden, um CSS-Dateien aufzurufen. In einer CSS-Datei können Sie die @import-Anweisung verwenden, um eine andere CSS-Datei aufzurufen, und die Stile in der aufgerufenen Datei werden mit den Stilen in der Hauptdatei zusammengeführt.

Die spezifische Syntax lautet wie folgt:

@import url("Dateipfad");

Zum Beispiel können wir im Haupt-Stylesheet style.css den folgenden Code verwenden, um das Unter-Stylesheet style2 zu laden. css:

@import url("style2.css");

Nach dem Login kopieren

Auf diese Weise wird beim Aufruf von style.css in einer HTML-Seite der Stil von style2.css automatisch zusammengeführt, wodurch eine Stildiversifizierung erreicht wird.

2. Verschiedene CSS-Stile anwenden

Nachdem wir mehrere CSS-Dateien aufgerufen haben, können wir verschiedene Stile auf bestimmte Weise verwenden. Im Folgenden werden zwei häufig verwendete Methoden vorgestellt.

Verwendung des ID-Selektors

In einer HTML-Seite können wir das ID-Attribut für ein Element festlegen, damit wir spezielle CSS-Stile dafür festlegen können.

Zum Beispiel können wir in der Datei style1.css den folgenden CSS-Stil definieren:

#box {
  width: 200px;
  height: 200px;
  background-color: red;
}

Nach dem Login kopieren

In der Datei style2.css können wir den folgenden CSS-Stil definieren:

#box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

Nach dem Login kopieren

Dann können wir in der HTML-Seite dies tun Verwenden Sie den folgenden Code, um diese beiden Stile aufzurufen:

<!DOCTYPE html>
<html>
<head>
  <link href="style1.css" rel="stylesheet" type="text/css" />
  <link href="style2.css" rel="stylesheet" type="text/css" />
  <title>调用不同CSS文件示例</title>
</head>
<body>
  <div id="box">样式设置示例</div>
</body>
</html>

Nach dem Login kopieren

Zu diesem Zeitpunkt, wenn wir die Seite öffnen, werden wir feststellen, dass die Hintergrundfarbe des Box-Elements rot und nicht blau ist. Dies liegt daran, dass in HTML der ID-Selektor eine höhere Priorität hat als der Label-Selektor, sodass das Box-Element den in style1.css definierten Stil verwendet.

Verwenden Sie den Klassenselektor

Ähnlich wie beim ID-Selektor können wir auch den Klassenselektor verwenden, um Stile für Elemente festzulegen. Wenn Sie den Klassenselektor verwenden, müssen Sie beim Definieren des Stils in der CSS-Datei ein „.“-Zeichen vor dem Selektor hinzufügen.

Zum Beispiel können wir in der Datei style1.css den folgenden CSS-Stil definieren:

.red-box {
  width: 200px;
  height: 200px;
  background-color: red;
}

Nach dem Login kopieren

In der Datei style2.css können wir den folgenden CSS-Stil definieren:

.blue-box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

Nach dem Login kopieren

Dann können wir in der HTML-Seite dies tun Verwenden Sie den folgenden Code, um diese beiden Stile aufzurufen:

<!DOCTYPE html>
<html>
<head>
  <link href="style1.css" rel="stylesheet" type="text/css" />
  <link href="style2.css" rel="stylesheet" type="text/css" />
  <title>调用不同CSS文件示例</title>
</head>
<body>
  <div class="red-box">样式设置示例</div>
  <div class="blue-box">样式设置示例</div>
</body>
</html>

Nach dem Login kopieren

Zu diesem Zeitpunkt, wenn wir die Seite öffnen, werden wir feststellen, dass die Hintergrundfarbe des ersten Boxelements rot und die Hintergrundfarbe des zweiten Boxelements blau ist. Dies liegt daran, dass in HTML der Klassenselektor eine niedrigere Priorität als der ID-Selektor, aber eine höhere Priorität als der Label-Selektor hat. Daher verwendet das erste Boxelement den in style1.css definierten Stil, während das zweite Boxelement die in style2 definierten Stile verwendet. CSS.

3. Zusammenfassung

Bei der Webentwicklung kann die Stileinstellung die Seite schöner und leichter erkennbar machen. Durch den Aufruf verschiedener CSS-Dateien können wir unterschiedliche Stile auf verschiedenen Seiten verwenden, um unterschiedliche Effekte zu erzielen. Nach dem Aufruf mehrerer CSS-Dateien können wir ID-Selektoren oder Klassenselektoren verwenden, um unterschiedliche Stile zu verwenden und den Stilanforderungen verschiedener Elemente gerecht zu werden. Daher ist der sinnvolle Aufruf und Einsatz von CSS-Dateien einer der wichtigen Wissenspunkte in der Webentwicklung.

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