私は最近、Webプログラミングのロープを学び始めました。本を読んでいるときに、.htmlファイルを.cssファイルにリンクする2つの方法が示されました。
方法1：
<link rel="examplesheet" href="myexamplesheet.css" type="text/css"
media="screen" />
方法2：
<style type="text/css" media="screen">
@import url(examplesheet.css);
</style>
いくつかの質問が指摘しているように、両方とも機能するはずですが、方法2は正常に機能しますが、方法1は私のプログラムでは機能しません。
私のプログラムはとてもシンプルです。次のようになります。
<title> Title Site</title>
<link rel="canvas" href="canvas.css" type="text/css"
media="screen" />
<style type="text/css" media="screen">
@import url(canvas.css);
</style>
<p> We have black text.</p>
<p class="green"> And then we have Green Text.</p>
<p class="warning"> Warning. Warning. Warning.</p>
方法1だけがそこにある場合、テキストは正しく表示されません。Internet Explorerでは、デフォルトのテキストが表示されただけです。しかし、FirefoxとChromeでは、実際には方法1でエラーが表示されました。
XML解析エラー：ドキュメント要素の後のジャンク場所：file：/// C：/Users/Zolani/AppData/Local/Temp/sample.xhtml行番号3、列1：
なぜこれがこれらの2つのブラウザにのみ表示されるのかわかりません。違いを詳述したウェブページは、それをテキストの先頭に置くことについて話しました。「head」タグを使用して試してみましたが、それでも機能しませんでした。
これで、方法2を続行してプログラムを快適に使用できましたが、方法1が正しく機能しない理由を知りたいと思います。何か案は？
注：私はhtmlの代わりにxhtmlを使用しています。