Heim > Artikel > Web-Frontend > So führen Sie CSS in HTML ein

So führen Sie CSS in HTML ein

WBOYOriginal: 2023-05-29 19:55:061474Durchsuche

Als Grundlage der Front-End-Entwicklung ergänzen sich die Beziehungen zwischen HTML und CSS. HTML ist für den Aufbau der Seitenstruktur und des Inhalts verantwortlich, während CSS für das Hinzufügen von Farbe und die Verschönerung der Seite auf dieser Grundlage verantwortlich ist. Wie führt man also CSS-Stile in HTML-Dokumente ein? In diesem Artikel erfahren Sie, wie Sie CSS einführen und worauf Sie achten sollten.

Referenzieren Sie externes CSS im HTML-Kopf.

Dies ist die gebräuchlichste und empfohlene Methode, CSS zu referenzieren. Fügen Sie am Beispiel der allgemeinen Seitenstruktur ein Link-Tag in das HTML-Header-Tag ein:

<!DOCTYPE html>
<html>
  <head>
    <title>标题</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
      页面内容
  </body>
</html>

Unter diesen hat das Link-Tag drei Attribute:

rel: Gibt an, dass die Beziehung zwischen dem Stylesheet und dem aktuellen Dokument besteht ein externes Stylesheet: Der Wert ist „stylesheet“;
type: gibt den MIME-Typ der Stylesheet-Datei an, und der Wert ist „text/css“: gibt den Referenzpfad des Stylesheets an Datei.
Hier ist zu beachten, dass der Pfad des href-Attributs auf dem aktuellen HTML-Pfad basieren sollte, nicht auf dem relativen Pfad, in dem sich die CSS-Datei befindet. Unter der Annahme, dass sich die CSS-Datei im selben Verzeichnis wie das aktuelle HTML befindet, sollte der Referenzstil wie folgt geschrieben werden:

<link rel="stylesheet" type="text/css" href="./style.css">

wobei „.“ das aktuelle Verzeichnis darstellt und das Dateinamensuffix „.css“ nicht weggelassen werden darf.

Internes CSS in den HTML-Header einbetten

In HTML-Dokumenten können wir internes CSS über das Style-Tag einbetten. Diese Methode erhöht zwangsläufig die Größe der HTML-Datei, kann jedoch bei einigen einfachen und kleinen Websites die Anforderungs- und Downloadzeit externer Dateien einsparen und die Antwortgeschwindigkeit der Seite beschleunigen. Das Folgende ist ein Beispielcode:

<!DOCTYPE html>
<html>
  <head>
    <title>标题</title>
    <style type="text/css">
      /* CSS样式内容 */
      body {background-color: #F1F1F1;}
      h1 {color: orange;}
    </style>
  </head>
  <body>
      页面内容
  </body>
</html>

Unter diesen hat der Inhalt im Style-Tag das gleiche Format wie die externe CSS-Datei, mit der Ausnahme, dass der Style-Code direkt in das Style-Tag geschrieben wird. Es ist zu beachten, dass internes CSS sinnvolle CSS-Selektoren verwenden sollte, um Stilverschmutzungen (CSS-Stile, die sich gegenseitig beeinflussen) zu vermeiden, um den Umfang der Stile einzuschränken.

Inline-Stile in HTML-Elemente einbetten

Inline-Stile beziehen sich auf das direkte Einbetten von CSS-Stilcode in das Stilattribut von HTML-Elementen. Diese Methode ist äußerst flexibel, eignet sich jedoch nicht für die Wiederverwendung und Wartung von Code. Das Folgende ist ein Beispielcode:

<!DOCTYPE html>
<html>
  <head>
    <title>标题</title>
  </head>
  <body>
    <h1 style="color:orange;">页面标题</h1>
    <p style="font-size:18px;">页面内容</p>
  </body>
</html>

Es ist zu beachten, dass Sie bei der Verwendung von Inline-Stilen sicherstellen sollten, dass der Stilcode die Zugänglichkeit und Benutzerfreundlichkeit der Seite nicht beeinträchtigt. Für einige Stile, die visuellen Effekten ähneln, sollten Sie externe Stile oder interne Stile verwenden.

Referenzen:

W3Schools. CSS – Externe Stylesheets

W3Schools. CSS – Interne Stile.

Das obige ist der detaillierte Inhalt vonSo führen Sie CSS in HTML ein. 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：Escape-HTMLNächster Artikel：Escape-HTML

In Verbindung stehende Artikel

Mehr sehen