关于CSS样式表的使用细则
CSS就是Cascading Style Sheets,中文翻译为“层叠样式表”,简称样式表,它是一种制作网页的新技术。
网页设计最初是用HTML标记来定义页面文档及格式,例如标题<h1>、段落<p>、表格<table>、链接<a>等,但这些标记不能满足更多的文档样式需求,为了解决这个问题,在1997年W3C(The World Wide Web Consortium)颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1, 自CSS1的版本之后,又在1998年5月发布了CSS2版本,样式表得到了更多的充实。W3C把DHTML(Dynamic HTML)分为三个部分来实现:脚本语言(包括JavaScript、Vbscript等)、支持动态效果的浏览器(包括Internet Explorer、Netscape Navigator等)和CSS样式表。
注意:CSS需要IE4(Internet Explorer 4.0)和NC4(Netscape 4.0)以上的浏览器支持,有些效果需要更高版本的浏览器支持。
三.怎样使用CSS
如果你使用的是Dreamweaver MX 2004以上的版本,在定义使用细则文字字体、颜色、大小等属性的时候,查看一下代码你会发现有这样的一部分在head区域:
植入样式表:
这就是我们在上一页中用的方法,所有 的样式表信息都列于使用细则HTML文件的顶部, 同<BODY>分列,例:
<HTML> <STYLE TYPE="text/css"> <!-- H1 { color: green; font-family: impact } P { background: yellow; font-family: courier } --> </STYLE> <HEAD> <TITLE>My First Stylesheet</TITLE> </HEAD> <BODY> <H1>Stylesheets: The Tool of the Web Design Gods</H1> <P>Amaze your friends! Squash your enemies!</P> </BODY> </HTML>
植入样式表规则后,浏览器在整个HTML页 面中都执行该规则。如果你想对网页一次 性加入样式表,就可材用该方法。
你可能注意到代码中有两处很奇怪: TYPE="text/css"属性和注释标签。 TYPE="text/css" 设定采用MIME类型,这 样以来,不支持CSS的浏览器可以忽略样 式表。
注释标签(<!-- and -->)更为重要。有些 老的浏览器(如MAC机用的IE 2.0)即使 在设定了TYPE="text/css" 属性时也不能 忽略样式表继续执行下面的命令,而且还 会显示样式表的代码。而使用注释标签则 可以避免发生这种情况。 链接到样式表上
<style type="text/css">
<!--
.STYLE2 {
font-size: 16pt;
font-family: "Courier New", Courier, monospace;
font-weight: bold;
color: #FF3300;
}
-->
</style>
那么恭喜你,你已经使用了CSS设计网页。
你可以制作出体积更小下载更快的网 页 还有更好的消息:样式表只是简单的文 本,就象HTML那样。它不需要图象,不 需要执行程序,不需要插件,不需要流 式。它就象HTML指令那样快。 有了CSS之后,以前必须求助于GIF的事 情现在通过CSS就可以实现。还有,正如 我先前提到的,使用串接样式表可以减 少表格标签及其它加大使用细则HTML体积的代码, 减少图象用量从而减少文件尺寸。 你可以更快更容易地维护及更新大量的 网页。 没有样式表时,如果我想更新整个站点 中所有主体文本的字体,我必须一页一 页地修改每张网页。即便站点用数据库 提供服务,我仍然需要更新所有的模板, 而且更新每一模板中每一个实例实例的 <FONT FACE>。 样式表的主旨就是将格式和结构分离。 利于样式表,我可以将站点上所有的网 页都指向单一的一个CSS文件,我只要 修改CSS文件中某一行,那么整个站点 都会随之发生变动。
标记加注法(in-line):
如果只有一个HTML标记需要设定样式,则可在该标记内,加上属性
style=" "
以个别修订样式。
