首页 > 代码库 > 在自学css开始就遇到问题,“链入外部样式表”在多浏览器显示问题

在自学css开始就遇到问题,“链入外部样式表”在多浏览器显示问题

在自学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="http://www.mamicode.com/被链入的外部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?

我完全崩溃了~~~请教高人指点,不胜感谢~~~

在自学css开始就遇到问题,“链入外部样式表”在多浏览器显示问题