WEB标准中使用CSS的基础教程
2008-02-23 08:28:52来源：互联网 阅读 ()
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;">webjx.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></h3>
如果你想使标题行变成斜体，可以使用CSS来重新定义 <h3>元素:
h3 { font-style:italic; }
下面是一个使用多余的类的例子:
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
