So führen Sie CSS in HTML ein-Front-End-Fragen und Antworten-php.cn

So führen Sie CSS in HTML ein

WBOY

Freigeben： 2023-05-29 19:55:06

Original

1509 Leute haben es durchsucht

So führen Sie CSS in HTML ein

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>

Nach dem Login kopieren

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.

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

Nach dem Login kopieren

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

Internes CSS in den HTML-Header einbetten

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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!