2.3.2 使用内部样式表


2.3.2   使用内部样式表


内部样式表是指样式表的定义处于HTML文件一个单独的区域,与HTML的具体标签分离开来,从而可以实现对整个页面范围的内容显示进行统一的控制与管理。


与行内样式表只能对所在标签进行样式设置不同,内部样式表处于页面的<head>与</head>标签之间,如代码2.2所示。


代码2.2   应用了内部样式表的HTML页面:html-inner.html





    Win98系统:c:\Windows  c:\Windows\system

Winnt和Win2000系统:c:\Winntc:\Winnt\system32
Winxp系统:c:\Windows  c:\Windows\system32
<html>
<head>
<title>一个简单网页</title>
<style type="text/css">
<!--
Body {font-size:28px;}
-->
</style>
</head>
<body>
你好!HTML!(内部样式表)
</body>
</html>
在IE7浏览器中打开,显示效果和利用行内样式表所生成的效果是一样的(除了表明样式表类别的文字不同之外),效果如图2.11所示。





 
图2.11   内部样式表:
代码2.2的显示效果

代码2.2只是实现了一个简单的内部样式表,它机械地将页面body内的所有文字都修改为28px大小。在本书的后面章节我们会陆续了解更深入的内容,本节的目的就是对内部样式表有个框架上的了解,在阅读源代码的时候能够辨认出来。


注意这样一个细节,在style标签内部,有一个属性type=“text/css”,同时,在开始和结尾分别有<!- -和-- >这样的字符。这样做的目的是为了兼容那些早期的(比如低版本的IE3)、不支持CSS的浏览器也能够显示出网页的内容,而<!--、-->这一对特殊符号则是HTML中很重要的注释符号。


【HTML的注释符号】


在HTML页面中,有时候我们需要在一些代码旁做一些注释,这样做有很多好处。比如:可以通过注释标识某一段代码的分类、描述了什么、显示了什么等。从而方便查找、方便比对,方便了以后对自己代码的理解与修改,也减少了别人在阅读代码时产生的麻烦等。


注释的语法如下。





<!--注释的内容就放在这里,它可以多行,但是两边的开始、结束标签一定不能缺少。-->

【CSS的注释符号】


同样的,CSS文档中的注释也起着很重要的作用,可以对注释下方CSS的含义进行提示,方便日后的维护和修改。


CSS注释的语法如下。




/*注释的内容放在这里,可以多行,注意
两边的开始、结束标签与HTML注释的不同。*/


【浏览器能否关掉CSS呢】


前面讲到了不支持CSS的浏览器,目前来看,这样的老古董已经很少见到了。但是严格地说,内部样式表中style的内部type="text/css"还是要加上的,同时也不要忘记后面的注释符号。


实际上,即便当今的主流浏览器,我们也可以通过一些方法来让它们不能应用网页上的CSS。这种方法需要一些稍微高级的知识,比如我们需要IE不再支持CSS,那么可以单击开始→运行→输入regedit,打开注册表编辑器,按照如下的层次关系打开键,如图2.12所示。




HKEY_CURRENT_USER\Software\Microsoft\internet Explorer\Main







 
(点击查看大图)图2.12   通过修改系统注册表使IE不采用CSS


在该键的下级再新建一个字符串值(如果原来已经存在,则只需要修改即可),名为UseStyleSheets,值为No。关闭注册表编辑器,重新打开IE浏览器,再打开一个网页,比如www.sohu.com,此时发现网页上的样式表不再起作用了,显示效果惨不忍睹,如图2.13所示。


这里介绍的方法需要一些注册表的知识,如果操作不当可能会对系统造成一定的危害,不建议大家实验,把它单列出来只是为了让大家有机会再次了解CSS对于HTML和网站的重要性。


【内部样式表的位置】


内部样式表不一定必须写在HTML文件的<head>和</head>之间。它可以在页面的任何位置,只要样式表本身的语法正确,同时<style>和</style>能够一一对应,对整个页面的样式设置就可以生效。代码2.3将代码2.2中有关样式的部分转移到HTML的末尾,处于</html>标签后面,该文件在IE7中显示效果与图2.11所示的是一致的。







 
图2.13   IE7浏览器取消CSS支持后的网页显示
代码2.3   内部样式表在HTML页面中的位置:html-inner-1.html



<html>
<head>
<title>一个简单网页</title>
</head>
<body>
你好!HTML!(内部样式表)
</body>
</html>
<style type="text/css">
<!--
Body {font-size:28px;}
-->
</style>
不过,为了统一,我们还是遵守不成文的规矩,把内部样式表都放置于<head>和</head>之间。这样做也符合内部样式表诞生时的初衷:它包含了关于页面各元素的样式信息,放在页面的前部能够使自己和别人在阅读代码的开始阶段就对整个页面有一个清晰的把握,一目了然。我们应该养成这种好的习惯,遵守这样的业内规则。


标签:
Warning: Invalid argument supplied for foreach() in C:\zl\webjia\view.php on line 50
友情链接
轻松育儿世界奇观
苏ICP备16066217号-2