WEB规范中运用CSS的基础教程
日期：2014-04-09 浏览次数：21925 次
CSS过去经常被用来定义字体的属性，而如今可以用它来控制整个文档的规划。然而，为了无效的用CSS来控制规划，需求做一些不同的处理，这种不同是跟用表格规划绝对比的。
为了CSS可以高效的控制规划，结构化、语义化的XHTML是必不可少的。
浏览器的支持在过去几年，浏览器对CSS的支持程度曾经改进了很多。不幸的是，浏览器的开发商好象对实施开放的标准并不感兴味，所以不同浏览器对CSS的支持程度也大相径庭。就算是支持程度最好的浏览器，在软件中仍然有一些bug，使得浏览器以错误的方式运转。
如今对CSS支持比较好的浏览器有Mozilla (还有以Gecko为内核的: Firefox, Camino, Netscape 6+), Opera和Safari (还有以 WebCore为内核的: OmniWeb 4.5 and later)。 Internet Explorer 6/Win并没有如此好的CSS支持程度，但是它将让你为其做出大量的基础任务。Internet Explorer 5/Mac对CSS 1的支持很出色, 但是却不支持CSS 2。 IE 5.* for Windows的支持性也很好, 但是仍然有一些问题值得你去留意。晚期版本的IE以及Netscape 6以前的版本就没有必要提及了。
由于如今大多数人都使用IE/WIN，所以你将不得不让它成为特殊分子。这并不是说，你不能或者不应该使用有更好支持CSS能力的浏览器来提高他们的设计能力。
如今在用的浏览器中，并不是所有的浏览器都有很好的CSS支持能力，使其能够具有解释用CSS规划的优秀图形化站点的能力。侥幸的是，对于大多数网站，只要很小比例的访问者还在使用不能解释CSS的老浏览器。
值得留意的是，这些人并不会被排斥在外的。在90年代，浏览器检验脚本是一个很流行的方法，它通知那些使用“错误”浏览器的使用者一个新的网址，那个网址通知他们去升级浏览器，好重新连接到那个网站。
如今，你可以以一种更好的办法应付不被支持的浏览器。使用逻辑化、语义化的一个最大的好处就是它使文档在没有CSS时，仍然可以使用和访问。表现（就是文档看上去的样子）在一个支持性好的浏览器中也将呈现的不一样，但是它的内容将永远不变，大多数情况，对于访问网站的人来说，内容实际上比表现的方式愈加重要。这就是为什么给那些支持性不好的浏览器发送一个没有款式的页面，要比把他们排斥在外要好的缘由。
有好几种方式去处理这个问题：一种最常见的方法是使用 @import来链接相应的的CSS文件。Netscape 4和老的浏览器不支持@import所以将不会导入CSS文件。还有许多方法来向浏览器隐藏CSS。大多数隐藏CSS的方法是利用了浏览器对CSS解释时的漏洞。这意味着总会存在浏览器通过升级弥补漏洞的危险。所以越少的依赖CSS hacks（CSS漏洞）越好。
很明显的，你可以使用服务器端技术去做一个浏览器检测，然后针对不同的浏览器，发送不同的CSS文件。如果你这么做了，你必需要确保检测脚本是通用的，以避免由于浏览器的升级或者新的浏览器发布导致发送错误的CSS文件。
用不同的方法使用CSS
有以下几种方法使一个HTML文档中的元素使用CSS。
外链式
把所有的CSS规则都写在一个或几个单独的文件中，这种做法有许多优点。HTML文档会变得非常的小，CSS文件被存在浏览器的缓存中，仅仅需求下载一次即可，并且你只需求修正一个文件就可以改变整个网站的款式。一个外链式的CSS文件，见如下:
h1 { font-weight:bold; }
留意:在外链的CSS中没有<style>标签。
你可以使用 <link>标签来把一个CSS链接到HTML文档中:
<link rel="stylesheet" type="text/css" href="styles.css" />
或者在<style>中使用一个@import标签 :
<style type="text/css"> @import url("styles.css"); </style>直接援用
通过使用style属性,你可以直接的在HTML中使用CSS:
<h1 style="font-weight:bold;">Aiyiweb.Com</h1>
这种情况，应尽量的避免，由于他把结构和表现混在一同了。
内嵌式
内嵌式CSS是写在<style>标签中，也是写在文档的<head>中:
<style type="text/css"> h1 { font-weight:bold; } </style>
这种情况也应该尽量避免，最好还是把HTML和CSS用单独的文件存放。
CSS的语法
一条CSS的规则是由一个选择器和一个或多个声明组成。选择器决定了CSS规则可作用于文档中的哪个或哪些元素。一个属性和一个值组成了一个声明，声明要用大括号（{}）括起来，并且每个声明要用分号（；）结束。
一个简单的CSS规则如下:
p { color:#0f0; font-weight:bold; }
这个例子中, p就是选择器,表示这条规则将作用于文档中的所有被<p>包围的内容。这个规则中，有两条声明，它们共同作用，使 <p>中的内容所有字体为绿色并且加粗。
想了解更详细的CSS规则，可以下载一个CSS使用手册。
多余的元素和类
当我们刚开始学CSS时，很容犯一些错误：使用不必要的XHTML元素、多余的类和额外的 <div>。并不是说这些代码是不规范的，而是它与一些准绳（如结构与表现相分离，使用简单的整洁的标记）相矛盾。
下面是一个使用不必要XHTML元素的例子:
<h3><em>Headline</em></h
