|
(X)HTML与CSS的关系就是“内容”与“形式”的关系，由(X)HTML确定网页的内容，而通过CSS来决定页面的表现形式。 一、CSS标准简介 和HTML类似，CSS也是由W3C组织负责制定和发布的。1996年12月，发布了CSS 1.O规范；1998年5月，发布了CSS 2.0规范。目前有两个新版本正在处于工作状态。即CSS 2.1版和CSS 3.0版。 图1所示的是2011年3月24日CSS 3.0发布的待批准的推荐版，读者可以到http://www.w3.org/TR/下载  图1 W3C组织发布的CSS 3.0规范工作稿 然而W3C并没有任何强制力要求软件厂商的产品必须符合规范，因此目前流行的浏览器都没有完全符合CSS的规范，这也就给设计师设计网页带来了一些难题。 但是随着技术的发展，各种浏览嚣都会逐渐在这方面做更多的努力，相信情况会越来越好。目前，最主流的3种浏览器是IE 7.0，IE 8.0和Firefox．它们在中国的使用率总和越过了99%,．而以这3种浏览器为目标．已经完全可以做出显示非常一致的CSS布局页面。 在了解了XHTML与HTML之间的关系以后，为了便于讲解，本教程在后面的讲解中都不再使用XHTML这个名词，而统一使用HTML，其含义为(X)HTML。 二、在HTML中引入CSS的方法 HTML与CSS是两个作用不同的语言，它们同时对一个网页产生作用，因此必须通过一些方法，将CSS与HTML挂接在一起，才能正常工作。 在HTMI中，引入CSS的方法主要有行内式、内嵌式，导入式和链接式4种。 1.行内式 行内式即在标记的style属性中设定CSS样式，这种方式本质上没有体现出CSS的优势，因此不推荐使用。 2.嵌入式 嵌入式则将对页面中各种元素的设置集中写在<head>和</head>之阃。对于单一的两页。 这种方式很方便。但是对于一个包含很多页面的网站，如果每个页面都以内嵌方式设置各自的样式，就失去了CSS带来的巨大优点，因此一个网站通常都是编写一个独立的CSS样式表文件，使用以下两种方式中的一种，引入HTML文档中。 3.导入式与链接式 导入式和链接式的目的都是将一个独立的CSS文件引入HTML文件，二者的区别不大。这里给出一个比较深入的介绍，因为很多读者对此都有疑问。 事实上．二者最大的区别在于链接式使用HTML的标记引入外部CSS文件，而使用导入式则是使用CSS的规则引入外部CSS文件。因此它们的语法也不同。 如果使用链接式，需要使用如下语句引入外部CSS文件。
如果使用导人式，则需要使用如下语句。
此外，采用这两种方式后的显示效果也略有区别。使用链接方式时，会在装载贞面主体部分之前装载CSS文件，这样显示出来的网页从一开始就是带有样式效果的，而使用导入式时，会在整个页面装载完成后再装载CSS文件，对于有的浏览器来说，在一些情况下，如果网页文件的体积比较大，则会出现先显示无样式的页丽，闪烁一下之后再出现设置样式后的效果。从浏览者的感受来说，这是使用导入式的一个缺陷。 对于一些比较大的网站，为了便于维护，可能会希望把所有的CSS样式分类别放到几个CSS文件中，这样如果使用链接式引入，就需要几个语句分别导入CSS文件。如果要调整CSS文件的分类，就需要同时调整HTML文件。这对于维护工作来说，是一个缺陷。如果使用导入式，则可以只引进一个总的CSS文件，在这个文件中再导人其他独立的CSS文件；而链接则不具备这个特性。 因此这里给大家的建议是，如果仅需要引入一个CSS文件，则使用链接方式；如果需要引入多个CSS文件，则首先用链接方式引入一个“目录”CSS文件，这个“目录”CSS文件中再使用导人式引入其他CSS文件。 但是如果希望通过JavaScript来动态决定引入哪个css文件，则必须使用链接方式才能实现。 这里给出一个完整的例子，演示各种导入方式的具体写法。为了在本教程后面的章节中便于讲解，大多数情况使用内嵌式来完成，因为所举的例子通常就是一个独立的页面。 假设有如下页面代码。
代码中使用的是行内式，也就是直接在h1标记的style属性中设置CSS样式。这里将文字颜色设置为白色，背景颜色设置为蓝色，浏览器中的效果如图2所示。  图2 使用行内样式设置CSS 这种方式仅对这一个h1标题产生效果，因此如果希望页面中的所有h1标记都使用这种样式，就可以将代码改造为内嵌式。方法是把样式从行内移动到head部分，具体的代码如下。
在head部分，这里的h1就称为“选择器”，即选中了阿页中的某些特定的元素，后面的样式规则和前面的行内规则的写法相同。 注意：每—条规则都要以分号结束．最后一条则不必以分号结束。 这样，页面中所有的h1标题都会按照这种效果显示，如图3所示。  图3 使用内嵌方式设置CSS 如果希望把CSS的规则都写到一个外部独立的文件中，然后引入HTML．应再单独写一个文件，文件名的后缀为.css．内容如下：
然后将HTML文档中的<style></style>部分改为：
注意：这里需要指定正确的css文件路径。 这样显示效果与上面的例子完全相同。如果要使用链接式引入这个CSS文件，可将上面的<style></style>部分删除，然后在head部分加入如下语句：
显示效果也是完全相同的。本节代码读者请参考本教程提供下载案例中“第1章”中的示例1.htm至示例4.htm。 |
| 编辑：网页学习网 |
| 本文地址:http://www.lodidance.com/css/jc/653.html |
