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

推薦する

Linux でファイルの作成時間を取得する方法と実践的なチュートリアル

背景ファイルの作成時刻を取得する必要がある場合があります。例えば: 「xtrabackup スキーマ...

Docker Alpine イメージのタイムゾーン問題に対する完璧な解決策

最近、Docker を使用して Java アプリケーションをデプロイしていたときに、タイムゾーンが間...

Reactの3つの主要属性におけるpropsの使用の詳細な説明

目次クラスコンポーネント機能コンポーネントプロパティは読み取り専用ですコンポーネント間通信前回は状態...

Centos7 に yum を使用して MySQL をインストールし、リモート接続を実現する方法

Centos7はyumを使用してMySQLをインストールし、リモート接続を実現する方法です。MySQ...

CentOS での mysql5.7 の詳細なインストールと設定のチュートリアル

インストールユーザーにインストール権限があることを確認してくださいルートスイッチなしsuルート(su...

Windows での MySQL データベースのマスター/スレーブ構成チュートリアル

WindowsでMySQLデータベースのマスターとスレーブを構成する詳細なプロセスは次のとおりです。...

js を使用してシンプルなスイッチ ライト コードを実装する

体の部位: <button>ライトのオン/オフを切り替える</button>...

Vue3 でモバイル ログインおよび登録モジュールをエレガントに実装する方法

目次序文入力ボックスコンポーネントレイアウトvモデルデータ検証ルール設計形状サブコンポーネントは検証...

ServerManager の起動時にデータベースに接続できないエラーを解決する方法

Servermanager 起動時の接続データベース エラーmgrstart.batを実行しますエラ...

Linux の操作とメンテナンスの基本 httpd 静的 Web ページ チュートリアル

目次1. ウェアハウスを使用してhttpd lrzsz解凍ファイルを作成する2. ソースコードファイ...

MySql における無効な Null セグメント判定と IFNULL() 失敗の解決策

MySql Nullフィールド判定とIFNULL失敗処理ps: (プロセスを表示したくない場合は、S...

mysql における mydumper と mysqldump の比較

いくつかのテーブルまたは単一のデータベースのみをバックアップする場合は、innobackup よりも...

Docker に ElasticSearch をインストールする方法を 1 つの記事で解説

目次序文1. Dockerをインストールする2. ElasticSearchをインストールする3. ...

Mysqlデータベースの文字化けに対処する方法

MySQL では、データベースの文字化けは一般的に文字セットを設定することで修正できますが、文字化け...

Postman 自動インターフェーステストの実践

目次背景説明GETリクエストの作成事前リクエストスクリプトで署名を作成するスクリプトは環境変数に書き...