CSSとHTMLはリンクされていません

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>JavaScript Basics</title> 
     <link rel="stylesheet" href="style.css"> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="header"> 
       <h1>JavaScript Basics</h1> 
      </div> 
    </body> 
</html> 





h1{ 
    color: green; 
}

ここにはHTMLとCSSがあります。私はMacでATOMテキストエディタを使用しています。 HTMLをプレビューすると、JavaScriptの基本がデフォルトの黒色で表示され、CSSでは緑色で表示されません。CSSとHTMLはリンクされていません

出典

2017-03-13 Jacob Martinez

あなたのCSSは、HTMLファイルとして** **同じフォルダ内に 'style.css'と呼ばれるファイルであることを確実にしましたか？ –

はいとはい両方とも同じフォルダにあります。 –

それでは、キャッシングの問題があるようです。私はこれについての答えを書くでしょう:) –

これを試してみてください！

`<link href='style.css' rel='stylesheet' type='text/css'>

出典

2017-03-14 01:14:06 Nica

ニカさんに感謝しました！ –

小さなもの;） – Nica

問題はキャッシュの問題です。 CSSはキャッシングではちょっと変わってしまうかもしれませんし、古典的な組み合わせのCTRL + F5は画像には使えますが、CSSではうまくいきません。 CSSでキャッシュを処理するより良い解決法は、リフレッシュシンボルをクリックしながらSHIFTを押さえることです。

明らかに、CSS参照のファイルパスにバックスラッシュを含めることも、バージョン番号を追加することもできます（<link rel="stylesheet" type="text/css" href="style.css?v2 />など）。

このバージョン番号は本質的に何も意味しませんが、CSSのアップデートを示すのに便利であり、重要なことはブラウザによって別のファイルとみなされます（強制的にCSSを再ロードすることです）。

PHPのようなバックエンド言語にアクセスできる場合は、ページがPHPで読み込まれるたびに自動的にCSSをリフレッシュするか、CSSファイルへのリンク内にタイムスタンプを追加するか、以下のようなもの：あなたが開発を終えた後、あなたはおそらく訪問者は、本番環境でのタイムスタンプを削除することでキャッシュできるようにしたいので

<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />

は、CSSは「コストがかかる」ことができることに留意してください:)

をお役に立てれば！ :)

出典

2017-03-13 23:01:17

これは、もう一度感謝します！ –

この回答を聞いてうれしいことは、あなたの問題を解決しました。投票ボタンの下にある灰色のチェックをクリックすることで、解決策を正しいものとしてマークすることを忘れないでください。これは、「未回答の質問」キューからそれを削除し、質問者と質問回答者の両方に評判を与えます。もちろん、それは、物事をスムーズに流れさせるのに役立ちますが、私の答え（または他の答え）を正確に記す義務はありません:) –

もう一度ありがとう!!! –

CSSとHTMLはリンクされていません

答えて

関連する問題