Heim > Artikel > Web-Frontend > So rufen Sie den CSS-Stil auf

So rufen Sie den CSS-Stil auf

PHPzOriginal: 2023-04-21 11:26:131170Durchsuche

Mit der kontinuierlichen Entwicklung des Internets werden Webdesign und -entwicklung immer wichtiger. CSS (Cascading Style Sheet) ist eine Sprache zur Steuerung des Stils von Webseiten und eine Technologie, die in der Webentwicklung beherrscht werden muss. Einige Anfänger wissen jedoch möglicherweise nicht, wie man CSS-Stile aufruft. In diesem Artikel werden Sie ausführlich in die Aufrufmethode von CSS-Stilen eingeführt.

1. Eingebettetes Stylesheet

Verwenden Sie das Style-Tag in der HTML-Datei, um ein eingebettetes Stylesheet zu definieren. Die im Stylesheet definierten Stile sind nur für die aktuelle Seite gültig, wie zum Beispiel:

<!DOCTYPE html>
<html>
<head>
  <title>内嵌样式表</title>
  <style>
    body {
      background-color: #f0f0f0;
    }
    h1 {
      color: red;
    }
  </style>
</head>
<body>
  <h1>欢迎访问我的网站</h1>
  <p>这里是我的个人主页，欢迎来逛逛。</p>
</body>
</html>

Im obigen Beispiel: Zwei Stile werden intern über das Style-Tag definiert. Ein Stil, der zum Festlegen der Hintergrundfarbe und der Titelschriftfarbe der Webseite verwendet wird. Wenn Sie den Code ausführen, können Sie feststellen, dass sich die Hintergrundfarbe der Seite in Grau und die Schriftfarbe des Titels in Rot ändert.

2. Externes Stylesheet

Verwenden Sie den Link-Tag in der HTML-Datei, um ein externes Stylesheet einzuführen. Dieses Stylesheet wird nicht in die HTML-Datei eingebettet, sondern ist unabhängig in einer CSS-Datei vorhanden und kann von mehreren HTML-Dateien gemeinsam genutzt werden Machen Sie die Struktur der HTML-Datei prägnanter und einfacher zu warten, wie zum Beispiel:

<!DOCTYPE html>
<html>
<head>
  <title>外部样式表</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>欢迎访问我的网站</h1>
  <p>这里是我的个人主页，欢迎来逛逛。</p>
</body>
</html>

Im obigen Beispiel wird eine CSS-Datei mit dem Namen style.css über das Link-Tag eingeführt. In dieser Datei können mehrere Stile definiert werden Dieses Stylesheet kann in mehreren HTML-Dateien verlinkt werden, um eine Wiederverwendung des Stils zu erreichen. Die Art und Weise, Stile in style.css zu definieren, ähnelt dem Inline-Stylesheet, zum Beispiel:

body {
  background-color: #f0f0f0;
}
h1 {
  color: red;
}

In diesem Beispiel wird der Body-Selektor zum Festlegen der Hintergrundfarbe der Webseite und der H1-Selektor zum Festlegen verwendet die Schriftfarbe des Titels. Wenn auf dieses Stylesheet in mehreren HTML-Dateien verwiesen wird, werden diese Stile gemeinsam genutzt.

3. Inline-Stylesheets definieren Stile in HTML-Tags, wie zum Beispiel:

<!DOCTYPE html>
<html>
<head>
  <title>内联样式表</title>
</head>
<body>
  <h1 style="color:red">欢迎访问我的网站</h1>
  <p>这里是我的个人主页，欢迎来逛逛。</p>
</body>
</html>

Im obigen Beispiel wird ein Inline-Stylesheet verwendet , um die Schriftfarbe des Titels auf Rot festzulegen. Im Gegensatz zu Inline-Stylesheets und externen Stylesheets sind Inline-Stylesheets nur für das aktuelle Markup gültig und können nicht wiederverwendet werden. Wenn viele Stile vorhanden sind, erscheint der HTML-Code ungeordnet, was der Wartung nicht förderlich ist.

Zusammenfassung:

Zusammenfassend gibt es drei Möglichkeiten, CSS-Stile in HTML-Dateien aufzurufen: eingebettete Stylesheets, externe Stylesheets und Inline-Stylesheets. Für die Entwicklung komplexer Webanwendungen wird empfohlen, externe Stylesheets zu verwenden. weil dadurch mehrere HTML-Dateien Stile gemeinsam nutzen können, was die Entwicklung und Wartung erleichtert. Aber auch für einfache Anwendungen sind Inline-Stylesheets und Inline-Stylesheets eine gute Wahl. Unterschiedliche Szenarien und Anforderungen erfordern unterschiedliche Technologieoptionen. Die Beherrschung der oben genannten Methoden zum Aufrufen von CSS-Stilen kann die Webentwicklung effizienter und flexibler machen.

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

css html 选择器样式表

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 legen Sie den Bildpfad eines Elements in CSS fest (src-Attribut)Nächster Artikel：So legen Sie den Bildpfad eines Elements in CSS fest (src-Attribut)

In Verbindung stehende Artikel

Mehr sehen