简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  Rufen Sie verschiedene CSS auf

Rufen Sie verschiedene CSS auf

WBOY
WBOYOriginal
2023-05-21 12:01:07407Durchsuche

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

  1. 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:

50d3ac49e0522645b04c918b330f3ab9

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>

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.

  1. 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");

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.

  1. 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;
}

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

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

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>

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.

  1. 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;
}

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

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

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>

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!

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：Wie JavaScript verschachtelte Seiten überwachtNächster Artikel：Wie JavaScript verschachtelte Seiten überwacht

In Verbindung stehende Artikel

Mehr sehen