Analyse und Lösung der Gründe, warum HTML-externe Referenz-CSS-Dateien nicht effektiv sind

Analyse und Lösung der Gründe, warum HTML-externe Referenz-CSS-Dateien nicht effektiv sind
Als Frontend-Neuling habe ich einige Tage am Frontend herumgebastelt. . Heute habe ich plötzlich festgestellt, dass es bei etwas, woran ich fest glaubte, tatsächlich Probleme gab. . Ich habe beispielsweise ein CSS-Stylesheet im CSS-Verzeichnis style.css geschrieben. Es enthielt nur einen Satz:
XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. Körper {
  2. Hintergrundfarbe: #ddd;
  3. }
Dann importiere ich dieses externe CSS in meine HTML-Datei:
XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < Link   rel = "Stilvorlage"   Typ = "Text/CSS"   href = "css/style.css" >    

Aktualisieren Sie im Browser. . Wow, kao. Es gab keine Antwort. Es hat nicht funktioniert. . Ich habe den Pfad mehrmals überprüft, um sicherzustellen, dass kein Problem vorlag, und den F12-Debugger von Chrome geöffnet. Nachdem ich sichergestellt hatte, dass der Browser die CSS-Datei geladen hatte, öffnete ich sie und sah:


Es ist verstümmelt. . Irgendetwas stimmt wohl mit dem Kodierungsformat nicht, aber ich weiß nicht, was ich tun soll. . Nach Rücksprache mit einem Frontend-Partner habe ich die aktuelle Kodierung der Webseite überprüft:


Die angezeigte Kodierung ist UTF-16LE. .
Später habe ich es ausprobiert und mit dem Sublime-Editor das lokale CSS-Dateikodierungsformat in dieses UTF-16LE geändert:


Den CSS-Code neu geschrieben. Speichern Sie den Lauf. . Es funktioniert wie erwartet. .
Aber mein HTML ist als UTF-8 angegeben, während das CSS UTF-16 ist, was mich sehr unglücklich macht. . Also habe ich erneut nach einer Lösung gefragt. Es kann gelöst werden, und es ist einfach. .
Ändern Sie das CSS zurück zu UTF-8 und bearbeiten Sie den darin enthaltenen Code. Geben Sie beim Importieren dieses CSS in HTML einfach das Kodierungsformat an:


Fügen Sie dem Link-Tag einfach ein Attribut hinzu: charset="utf-8". . . So einfach ist das. . .

Das ist alles, was ich zu den Gründen zu sagen habe, warum HTML-Dateien mit externen Referenzen auf CSS nicht wirksam werden, und zu den Lösungen. Ich hoffe, es wird Ihnen helfen!

<<:  CSS3 zum Erreichen eines Menü-Hover-Effekts

>>:  Detaillierte Erläuterung der Kommentare zu gespeicherten MySQL-Prozeduren

Artikel empfehlen

Vue implementiert einen Countdown zwischen angegebenen Daten

In diesem Artikelbeispiel wird der spezifische Co...

So melden Sie sich unter Shell schnell ohne Kennwort bei der MySQL-Datenbank an

Hintergrund Wenn wir uns über den MySQL-Client in...

JS ES neue Funktionen Vorlagenzeichenfolge

Inhaltsverzeichnis 1. Was ist eine Vorlagenzeiche...

Detaillierte Erläuterung der geplanten MySQL-Aufgaben (Ereignisereignisse)

1. Kurze Einführung in die Veranstaltung Ein Erei...

Vor- und Nachteile von Vite und Vue CLI

Es gibt im Vue-Ökosystem ein neues Build-Tool nam...

In JavaScript integrierter Zeit- und Datumsformatierungsbeispielcode

1. Grundkenntnisse (Methoden von Datumsobjekten) ...

Zusammenfassung von Beispielen gängiger Methoden von JavaScript-Arrays

Inhaltsverzeichnis Gängige Array-Methoden concat(...

So öffnen Sie den Port in Centos7

Die Standard-Firewall von CentOS7 ist nicht iptab...

JS implementiert die Drag- und Platzhalterfunktionen von Elementen

In diesem Blogbeitrag geht es um eine Schwierigke...

Praktische Methode zum Löschen von Dateien über die Linux-Befehlszeile

rm-Befehl Der Befehl rm wird von den meisten Benu...

Detaillierte Erläuterung des primitiven Datentyps Symbol in JavaScript

Inhaltsverzeichnis Einführung Beschreibung Namens...