インライン<style>
コマンドで HTML 本文の background-color 属性を設定できますが、同一のコマンドが外部スタイルシートに移動された場合は設定できません。具体例を以下に示します。
test1.html では、background-color は HTML で「blue:」に設定されています。ファイル test2.html は、<style>
コマンドがコメント アウトされていることを除いて、test1.html と同じです。ファイル style.css には、background-color の仕様と、<H1>
要素 (ブラウザーが実際にスタイルシートを読み取っていることをテストするため)。
最初のテストでは、青色の背景に対してオレンジ色のテキストが生成されます。2 番目のテストでは、オレンジ色のテキストが生成されますが、背景は白です。Firefox 21、Chrome 19、および IE 9 でこれを試しました。すべて同じ結果になります。
どうしたの?どんな助けでも大歓迎です。
以下に 3 つのサンプル ファイルを示します。
test1.html:
<HTML>
<head> <link type="text/css" rel="stylesheet" href="style.css">
<style type="text/css">
body {background-color: blue}
</style>
</head>
<body> <h1>This is a test.</h1> </body> </html>
test2.html:
<HTML>
<head> <link type="text/css" rel="stylesheet" href="style.css">
<!-- <style type="text/css">
body {background-color: blue}
</style> -->
</head>
<body> <h1>This is a test.</h1> </body> </html>
スタイル.css:
<style type="text/css">
body {background-color: green;}
h1 {color: orange; }
</style>
ありがとうございました!