HTML与XHTML权威指南之八：级联样式表
样式是一个规则，告诉浏览器如何表现特定的HTML标签中的内容。样式与标签结合的方式有三种：内联样式表，文档级样式表，外部样式表。
内联样式表：最简单的方式，只需在标签中包含一个style属性。如，<h2 style="color:blue;font-style:italic">Look!</h2>
文档级样式表:将样式表放在<head>内的<style>标签和</style>结束标签之间，就会影响文档中所有相同标签的内容；但含有内联style属性的标签除外。
如，
<head>
<style type="text/css">
h1(color:blue;font-style:italic)
</style>
</head>
<body>
<h1>this is a example.</h1>
<h1>this is another example.</h1>
</body>
type属性：级联样式表的类型为text/css；JavaScript样式表为text/javascript。
media属性：让浏览器了解表现文档的最佳方式。默认值为screen(计算机显示器),还有tv(电视),handheld(PDA)等。如，<style type="text/css" media="screen,handheld">，表示在计算机显示屏和PDA设备上都要使用CSS显示文档。
外部样式表：分离样式表和文档的内容。这样同一个样式表就可以应用于多个文档中。有两种方法引入外部样式表：链接和引入。
链接方式：在<head>标签中使用<link>标签。如，
<head>
<link rel=stylesheet type="text/css" href="http://www.kunming.com/styles/gen.css">
</head>
引入方式：在<style>标签中使用一个特殊命令at。如，
<head>
<style type="text/css">
<!--
@import url(http://www.kunming.com/styles/gen.css);
@import "http://www.kunming.com/styles/gen.css";
body {background:url(backgrounds/marble.gif)}
-->
</style>
</head>
样式类
1 常规类：定义段落样式。如，
<style type="text/css">
<!--
p.abstract{font-style:italic;margin-left:0.5cm;margin-right:0.5cm}
p.equation{font-family:Symbol;text-align:center}
h1,p.centered{text-align:center;margin-left:0.5cm;margin-right:0.5cm}
-->
</style>
以上定义了三种段落样式，然后在应用时：
<p class=abstract>first style.</p>
<p class=equation>a-b+1</p>
<p class=centered>another style</p>
一般类：定义类时，不与某个特殊标签关联起来，而有选择的把该类应用到整个文档的多个标签中。
如，.italic {font-style:italic}。 创建了一个italic的类，应用时只要把名称包括在class属性里面就可以。如，<p class-italic>或<h3 class=italic>。
ID类：几乎所有html标签都支持id属性。创建类时，需要在类名前使用"#"而不是"."。如，
<style>
<!--
#yellow {color:yellow}
h2#blue {color:blue}
-->
</style>
在文档中，使用同样的id属性来应用样式。如，<h1 id=blue>。由于HTML标准规定，每一个标签的id属性值必须是唯一的。所以创建带有id属性的样式表的方法不推荐使用。
伪类：为特定的标签状态定义显示样式。方法与常规类相似，但区别有：1 连接到标签名时使用的是冒号而不是句号。2 有预先定义好的名称，不能随便给其取名。
超链接伪类：:link(未访问),active(正被访问),a:visited(访问过的)。如，
a.link(color:blue)
a.active(color:red; font-weight:bold)
a.visited(color:green)
交互左右伪类：与用户动作有关。如，a:hover{color:yellow}表示当鼠标指向它时会边成黄色。a:focus允许在元素变成专注对象时改变其样式。
混合类：把伪类名追加到选择符的类名后，就可以混合使用伪类和常规类。
样式属性
属性值：关键字，长度值，百分比值，url，颜色，角度，时间和频度。
属性继承：标签中的属性及其值都是从父标签那里继承而来。如<body>标签设置了属性后，实际会把该属性应用到文档主体部分的所有标签上。
posted on 2007-12-18 20:34
matthew 阅读(257)
评论(0) 编辑 收藏 所属分类:
脚本语言及页面设计