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 阅读(255)
评论(0) 编辑 收藏 所属分类:
脚本语言及页面设计