HTML外部参照CSSファイルが効果を発揮しない理由の分析と解決

HTML外部参照CSSファイルが効果を発揮しない理由の分析と解決
フロントエンドの初心者として、私は数日間フロントエンドをいじってみました。 。今日、私は自分が固く信じていたものに実は問題があることに突然気づきました。 。たとえば、CSS ディレクトリの下に CSS スタイル ドキュメント style.css を作成しました。そこにはたった一つの文がありました:
XML/HTML コードコンテンツをクリップボードにコピー
  1. 体 {
  2. 背景色: #ddd;
  3. }
次に、この外部 CSS を HTML ファイルにインポートします。
XML/HTML コードコンテンツをクリップボードにコピー
  1. <リンク  rel = "スタイルシート"  タイプ= "テキスト/css"   href = "css/style.css" >    

ブラウザを更新します。 。わぁ、花王。反応がありませんでした。うまくいきませんでした。 。問題がないかパスを何度か確認し、Chrome の F12 デバッガーを開きました。ブラウザが CSS ファイルをロードしたことを確認した後、それを開いてみると、次のようになりました。


文字化けしています。 。エンコード形式に問題があるはずですが、どうすればよいかわかりません。 。フロントエンド パートナーに相談した後、Web ページの現在のエンコーディングを確認しました。


表示されるエンコーディングは UTF-16LE です。 。
後で試してみて、Sublime エディターを使用して、ローカル CSS ファイルのエンコード形式を次の UTF-16LE に変更しました。


CSSコードを書き直しました。実行を保存します。 。期待通りに動作します。 。
しかし、HTML は UTF-8 として指定されているのに、CSS は UTF-16 なので、非常に不満です。 。そこで私は再度解決策を求めました。それは解決可能であり、簡単です。 。
CSS を UTF-8 に戻し、内部のコードを編集します。この CSS を HTML にインポートするときに、エンコード形式を宣言するだけです。


つまり、リンク タグに属性 charset="utf-8" を追加するだけです。 。 。とても簡単です。 。 。

HTML 外部参照 CSS ファイルが有効にならない理由と解決策については以上です。お役に立てれば幸いです。

<<:  丸い角や鋭い角の代わりに文字を使用することに関する研究経験の共有

>>:  メニューのホバー効果を実現するCSS3

推薦する

1つの記事でJavaScript DOM操作の基本を学ぶ

DOM の概念DOM: ドキュメント オブジェクト モデル: ドキュメント オブジェクト モデルは、...

MySQL 8.0.11 圧縮版のインストールチュートリアル

この記事では、MySQL 8.0.11のインストールチュートリアルを参考までに紹介します。具体的な内...

Linux で最も頻繁に使用されるターミナル コマンドのトップ 10 のリストを取得します。

私が最も頻繁に使用するコマンドは次の通りです:選択肢CDギットls ssh須藤数週間前、私はこの R...

フレックスレイアウトによるシームレスなスクロールのサンプルコード

この記事では、シームレスなスクロールを実現するためのフレックスレイアウトのサンプルコードを主に紹介し...

LinuxにVSCodeをダウンロードしてインストールし、プログラミングを使用して現在の時刻を出力する

rpmコマンドがソフトウェアのインストールに使用するパラメータはどれですか: -i rpm コマンド...

CSSリストのスライドにより、下部に隠れるのを防ぎ、長い画面モデルの処理に適応します。

1. モバイル端末がリストスライドを処理するとき、WeChat には下部にページに戻るボタンが組み...

WeChatミニプログラムQRコード生成ツール weapp-qrcode 詳細説明

WeChat ミニプログラム - QR コード ジェネレーターダウンロード: weapp-qrcod...

Mysql クラシック高レベル/コマンドライン操作 (クイック) (推奨)

サーバーとデータベースの構築方法を学ぶ必要があるため、最近は SQL 言語を独学で学び始めました。デ...

MySQL count(1)、count(*)、count(field)の違い

目次1. COUNTの初見2. COUNT(フィールド)、COUNT(定数)、COUNT(*)の違い...

JavaScriptはPromiseを使用して複数の繰り返しリクエストを処理します

1. なぜこの記事を書くのですか?重複リクエストの処理に関する記事をたくさん読んだことがあるでしょう...

Reactは複雑な検索フォームの展開と折りたたみ機能を実装します

時間に余裕を持って、過去を忘れましょう。前のセクションでは、[検索] フォームとクエリおよびリセット...

CentOS 上での MySQL 5.6 のコンパイルとインストール、および複数の MySQL インスタンスのインストールの詳細な説明

--1. mysql用の新しいグループとユーザーを作成する # ユーザー追加 -M -s /sbin...

Java で ffmpeg を呼び出してビデオ形式を flv に変換する方法の詳細な説明

Java で ffmpeg を呼び出してビデオ形式を flv に変換する方法の詳細な説明注:以下のプ...

JSの基本概念の詳細な紹介

目次1. JSの特徴1.1 マルチパラダイム1.2 説明1.3 シングルスレッド1.4 ノンブロッキ...

UbuntuにProtobuf 3をインストールするための詳細なチュートリアル

いつインストールするかprotoc コマンドを使用しても Protoc が見つからない場合は、インス...