So führen Sie CSS in HTML ein

WBOY
Freigeben: 2023-05-29 19:55:06
Original
1461 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.

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

   标题  
页面内容
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.
  • 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:
Nach dem Login kopieren

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

Internes CSS in den HTML-Header einbetten
  1. 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:
   标题  
页面内容
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
  1. 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:
   标题 

页面标题

页面内容

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

Quelle:php.cn
Erklärung dieser Website
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
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!