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

Linux Redis-Sentinel-Konfigurationsdetails

herunterladen Download-Adresse: https://redis.io/...

Detaillierte Erklärung des VUE-Reaktionsprinzips

Inhaltsverzeichnis 1. Grundlage des Responsive-Pr...

Zusammenfassung mehrerer Situationen, in denen MySQL-Indizes fehlschlagen

1. Indizes speichern keine Nullwerte Genauer gesa...

Beispiel für die reguläre Umschreibmethode für Nginx Rewrite (Matching)

Die Rewrite-Funktion von Nginx unterstützt regelm...

Gängige Angriffe auf Web-Frontends und Möglichkeiten, sie zu verhindern

Die Sicherheitsprobleme, die bei der Frontend-Ent...

Analyse von SQL-Integritätsbeschränkungsanweisungen in der Datenbank

Integritätsbeschränkungen Integritätsbedingungen ...

Docker-Installationsschritte für Redmine

Laden Sie das Image herunter (optionaler Schritt,...

Verwenden Sie PSSH zur Stapelverwaltung von Linux-Servern

pssh ist eine in Python implementierte Open-Sourc...

Detaillierte Erklärung und Erweiterung von ref und reactive in Vue3

Inhaltsverzeichnis 1. Ref und reaktiv 1. reaktiv ...

Eine kurze Diskussion darüber, ob zu viele MySQL-Datenabfragen OOM verursachen

Inhaltsverzeichnis Auswirkungen eines vollständig...