web-dev-qa-db-ja.com

HTMLがCSSファイルをロードしない

これがなぜ機能しないのか、私は完全に困惑しています。 HTMLファイルは、両方が同じディレクトリにあるにもかかわらず、何らかの理由でCSSをロードできないようです。何が問題なのでしょうか？

index.html

<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" href="style.css" media="screen" />
<meta name="viewport" content="width=1100">
</head>
<body>
<div id="main"> Hello </div>
</body>
</html>

style.css

body{
    background-color: #F9F9F9;
    background-image: url(images/bg3.png);
    background-position: center top;
    background-repeat: repeat;
    text-shadow: #FFFFFF 0px 1px 0px;
    font-family: "Georgia", "Times", serif;
    -webkit-font-smoothing: antialiased;
}

a{
    text-decoration: none;
}

#main{
    margin: 50px auto 50px auto;
    width: 1000px;
    min-height: 500px;
    padding: 0px 20px 0px 20px;
}

上記は機能しません。ただし、index.htmlにCSSをインラインで追加しても正常に機能します

<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<style type="text/css" media="screen">
    body {
        background-color: #F9F9F9;
        background-image: url(images/bg3.png);
        background-position: center top;
        background-repeat: repeat;
        text-shadow: #FFFFFF 0px 1px 0px;
        font-family: "Georgia", "Times", serif;
        -webkit-font-smoothing: antialiased;
    }
    a {
        text-decoration: none;
    }
    #main {
        margin: 50px auto 50px auto;
        width: 1000px;
        min-height: 500px;
        padding: 0px 20px 0px 20px;
    }
</style>
<meta name="viewport" content="width=1100">
</head>
<body>
    <div id="main"> Hello </div>
</body>
</html>
htmlcsshtml5stylesheet
16
Asem H.

追加する

type="text/css"

リンクタグに

最新のブラウザではこれはもはや必要ではないかもしれませんが、 HTML4仕様 はこれを必須属性として宣言しました。

タイプ=コンテンツタイプ[CI]

この属性は、要素のコンテンツのスタイルシート言語を指定し、デフォルトのスタイルシート言語をオーバーライドします。スタイルシート言語は、コンテンツタイプ（「text/css」など）として指定されます。 著者はこの属性の値を提供する必要があります。この属性にはデフォルト値はありません。

19
Simon West

同じディレクトリ内の両方のファイルを確認してから、これを試してください

<link href="style.css" rel="stylesheet" type="text/css"/>
6
Ghost Answer

type="text/css"を追加する必要があります。また、href="./style.css"で現在のディレクトリを指定する.を指定することもできます。

5
hayonj

あなたが言ったように、あなたの両方のファイルは同じディレクトリにあります。 1. index.htmlおよび2. style.css

私はあなたのコードをコピーし、ローカルマシンで実行しましたが、問題なく動作します。

私によると、ブラウザはファイルを更新していないので、mac CMD + RのウィンドウでCTRL + F5を押してページ全体を更新/再ロードできます.

それでも問題が解決しない場合は、Firefoxの firebug ツールを使用してテストできます。

IE8とGoogleの場合Chrome F12を押すと、開発者ツールがポップアップ表示され、Htmlとcssを確認できます。

それでも問題がありましたらコメントしてください。

4
w3uiguru

私はこの同じ問題に苦しんでいます（Ubuntu 16.04、Bluefishエディター、FireFox、Google Chrome。

解決策：Chrome「設定>詳細設定>閲覧データの消去」、Firefoxで「メニュー画像を開く」右上のツールバー「設定」>「詳細設定」で、この画像を探しますメニュー：[キャッシュされたWebコンテンツ]ボタン[今すぐクリア]をクリックします。ブラウザは.cssファイルをキャッシュし、変更されていない場合、通常はリロードされません。 .cssファイルに問題がない限り、Peace、Stan

4
Stan Ralph

HTML5で必要なのはrelだけでなく、typeだけです。

<link href="custom.css" rel="stylesheet"></link>

2
sharkySharks

これを試すことができます：

<link href="style.css" rel="stylesheet" type="text/css" media="screen, projection"/>

ブラウザが実際にリクエストを行い、404を返さないことを確認してください。

2
Koen Peters

CssファイルはUTF-8として定義する必要があります。これをcssファイルの最初の行に入れてください。

@charset "UTF-8";
2
jeff-ziligy
<link href="style.css" rel="stylesheet" type="text/css"/>
1
Tejas

まあ、私もまったく同じ質問をしました。そして、私のCSSリンクですべてが大丈夫でした。 なぜhtmlがCSSファイルをロードしなかったのかは、その位置が原因​​でした（私の場合のように）。

さて、カスタムCSSが間違った場所で定義されていたため、ウェブページがそれにアクセスしていませんでした。次に、CSSリンクをテストして別の場所に配置し、うまくいきました。

私はどこに置くべきか読んでいたcustom CSSBootstrap CSSしたので、ロードしていませんでした。それで、私は位置を変えて、それは働きました。

お役に立てれば。

ありがとう！

0
rbashish

同様の問題があり、それを解決するさまざまな方法をテストしました。

最終的に、.cssファイルがあった間にindex.htmファイルが "Unicode"エンコード（ページでペルシア語文字を使用するため）で保存されていたことを理解しました "ANSI"形式で保存されました。

メモ帳で.cssファイルのエンコードを "Unicode"に変更すると、問題は解決しました。

0
Hadi

次の手順を使用して、非常に簡単な.CSSファイルをロードします。

<link rel="stylesheet" href="path_here.css">

注：1-> rel属性に「スタイルシート」を書くことを忘れないでください。 2->正しいパスを使用します（例：D：\ folder1\forlder2\folder3\file.css "）

これで、ディレクトリのどこにいても、.cssファイルを指定したとおりのパスでロードできます。

よろしく！ムハンマド・マジッド。

0
Muhammad Majid

さて、私は今日この問題に直面しました。

<script type="text/javascript" src="testWeb/scripts/inline.31e1fb380eb7cf3d75b1.bundle.js"></script>

ここで、testWebは、htdocディレクトリ内のルートアプリフォルダです。 Windows（xamppを使用）または/ var/www/htmlディレクトリで、何らかの理由でまだわかりません

<script type="text/javascript" src="scripts/inline.31e1fb380eb7cf3d75b1.bundle.js"></script>

htmlインデックスファイルが同じディレクトリのスクリプトフォルダーの横にあるときにロードされません。

0
Poode

また、linkタグのmedia属性に有効な値があることを確認してください。私の場合は、WordPress CMSを使用し、ブール値trueをメディアに渡しました。ので、そのように示した。

<link rel="stylesheet" href="./style.css" media="1">

それがエラーを与えていた理由です。 CSSスタイルの読み込みが依存する3つの主要な属性があります。

  1. linkタグの関係rel属性の値がcssファイルに対して有効でなければならないことを確認してください。つまり、stylesheetです。
  2. linkタグのターゲットhref属性の値が、有効な既存のカスケードスタイルシートファイルを指している必要があることを確認してください。あなたの場合のように、./style.cssです。

    href属性の値には絶対パスと相対パスの両方を使用できることに注意してください。つまり、ファイルstyle.cssがルートに存在する場合、つまり/の場合、href属性の値に/style.cssを使用することも、ファイルが同じ場所に存在する場合もHTMLファイルが存在するディレクトリでは、linkタグのhref属性の値の値として./style.cssを使用できます。
  3. linkタグのmedia属性が次のいずれかであることを確認してください。
    1. すべてのデバイスで、allキーワードをmedia属性の値として使用できます。
    2. PCおよびラップトップの場合のみ、screen属性の値としてmediaを使用できます。
    3. Webページの印刷では、printキーワードをmedia属性の値として使用できます。 Print Screenボタンを押して画面の画像をキャプチャするときにも適用されることに注意してください。
    4. 最後に、スクリーンリーダーの場合、speechキーワードを「メディア属性の値」として使用できます。

これらのルールに従うことにより、linkタグのHTML構造ができます。

0
Azzaz Khan

私は同じ問題に直面していた、

ChromeとFirefoxですが、Internet Explorerではすべてが正常に機能していました。CSSファイルをUTF-8にすると、Chromeで機能することがわかりました。

0
Maximilian Lever

これは「特別な」ケースかもしれませんが、次のコードをいじっていました。

ForceType application/x-httpd-php SetHandler application/x-httpd-php

同様の問題が発生した場合の無拡張ファイル処理の簡単なテストとして。

すべてではありませんが、一部のphpファイルはその後cssファイルをphpとして処理し、cssを正常にロードしましたがcssとして処理しなかったため、f12スタイルエディターをチェックするときにルールが実行されませんでした。

おそらく、ここで他の誰かと同様のことが発生する可能性があり、このヒントが役立つ可能性があります。

0
user10496917

私は同様の問題を抱えていましたが、Style.cssからstyle.cssへの変更を解決しましたこの名前の大文字「S」の変更により、404エラーがスローされていましたこのエラーがスローされていました。クラウドにアップロードした後、これがすべてチェックされていることを確認してください

0
pv abhilash