在自学css开始就遇到问题，“链入外部样式表”的习题，代码如下：
A、被链入的CSS文件代码.css
<style type="text/css">
<!--
h1{background:gray;text-align:center;font-family:隶书}
h3{background:blue;text-align:center;font-family:隶书}
p{background:green;text-align:center;font-family:隶书}
-->
</style>
--------------------------------------------------------------------------------
B、html习题页面代码.html
<html>
<head>
<meta charset="UTF-8">
<title>链入外部样式表</title>
<link rel="stylesheet" type="text/css" href="被链入的外部css文件.css">
</head>
<body>
<h1>编写外部CSS文件</h1>
<h3>这是h3演示效果</h3>
<p>在HTML文件应用链入外部样式表方法调用外部CSS。</p>
</body>
</html>
-------------------------------------------------------------------------------
出现问题可多了~我一一道来
1、上面A、B代码不变，直接用IE打开，一切显示正常，我要的效果都有。但用
chrome和firefox打开，第一个元素标签（即h1哪行）没有CSS效果，后面两行（
即h3、p）效果正常。why？？
2、如果在B代码<html>前加入 <!DOCTYPE html>声明，结果页面效果和1一样（
第一行h1失去css效果，后两行正常）。why？？why？？
3、我用的习题答案全部要求在<style> </style>中间加入 <!-- XXXX--> ,解释说怕浏览器不认得css，可我看好多网页源码并没有这个奇怪的<!-- XXXX-->，看别的CSS书籍也没有这要求。于是我试着去掉它，结果神奇了，出现了和1、2一模一样的问题！！！！why？？why？？why？
我完全崩溃了~~~请教高人指点，不胜感谢~~~