CSS2快速参考

自W3C（The World Wide Web Consortium）制定了代号为Cougar的HTML的4.0版本以来，存在在Web页面中的动态效果首次被正式的承认了，W3C把动态超文本（Dynamic HTML）的实现分为了三个部分：脚本、支持动态效果的浏览器和CSS。前两者也许你经常用到，但CSS是什么或许你并不清楚，如果有过制作Web页面的经历，你可能听说过样式单或风格单，如果对此你亦无耳闻，不要紧，只要你想制作出具有更多新特性的Web页，本文将同样适合于你。 

一、什么是CSS？ 

CSS是Cascading Style Sheet的缩写，有些书上把它译为“层叠样式单”或“级联样式单”（下文简称“样式单”），在1997年W3C颁布HTML4标准的同时也公布了有关样式单的第一个标准CSS1。样式单是对以前的HTML（3.2以前的HTML版本）语法的一次重大革新，以前的HTML版本中，各种功能的实现是通过标记元素实现的，这也造成了各个浏览器厂商为了标新立意创建各种只有自家支持的标记，各种标记互相嵌套，就可以达到不同的效果，比如要在一段文字中把一部分文字变成红色，HTML3.2中应该是这样的： 

这里显示红色字

 
而在样式单中，把某些标记（如上例中的“font”标记）属性化，利用样式单，上例可以变成： 
这里显示红色字

 
这就是样式单的全部功能吗？远远不是！前面说过样式单是DHTML的一部分，建立样式单的真正意义在于把对象真正引入了HTML，使得可以使用脚本程序（如javascript、VBScript）调用对象属性，并且可以改变对象属性，达到动态的目的，这在以前的HTML中是无法实现的，如果你使用过如VB等面向对象的编程工具，你会更快的发现，用样式单做DHTML是多么容易。样式单的另一项贡献是简化了HTML中各种繁琐的标记，使得各个标记的属性更具有一般性和通用性，并且样式单扩展了原先的标记功能，能够实现更多的效果，样式单甚至超越了Web页面的本身显示功能，而把样式扩展到多种媒体上，显示了难以抗拒的魅力。 
样式单自从CSS1的版本之后，又在1998年5月发布了CSS2版本，样式单得到了更多的充实。Internet Explorer4和Netscape Navigator4都宣传支持样式单，但从各方面来看IE4的效果都要超过NE4，这是因为IE4和NE4的javascript文档模型（DOM）不同而造成的，从表面看，二者的模型区别不大，但实质上却是大相径庭，IE4的模型能够更加容易的把动态效果引入Web页面，虽然现在IE4的模型只有微软自己支持，但它却已被清楚的写入了W3C的DHTML标准；而NE4的样式单并不能通过脚本调用对象的属性，说的不好听一点，它的样式单只是徒有其表罢了。（Netscape公司自己开发了一种样式单称作JSSS，它利用javascript来定义样式，但是并没有得到W3C的承认。） 

二、进一步了解样式单 

Cascading Style Sheet中的Cascading是“层叠”的意思，也就是说在同一个Web文档中可以有多个样式单存在，这些样式单根据所在的位置，拥有不同的优先级，优先级越高，就会被最后在显示时采用。从样式单插入的形式来看可以分为三种： 

内联式样式单：它利于现有的HTML标记，把特殊的样式加入到那些由标记控制的信息中，比如刚才的例子。 
嵌入式样式单：它和javascript一样可以嵌入到HTML文件的头部中去（和标记之间），使用 容器装载，例如：“ ”，这样会对页面中所有

标记都起作用。 
外部式样式单是一种保存在外部的样式单文件，外部文件以.CSS为扩展名，例如“”。 

在应用时可以根据需要随意运用以上三种方式，但在实际中内联式样式单和嵌入式样式单使用得更多一些。 
三、样式单的语法特征 

样式单有自己独特的书写方法，掌握了它的语法特征，再了解它的各种属性，那么你会发现在Web页面中运用样式单会是多么轻松。例如有一个最简单的HTML文档： 
 
 

Text goes here…

 
 
我们可以用嵌入式样式单规定样式。 
 
 
 

利用Class和ID显示内容。

 
 
 
其中.someclass代表类，#someID代表ID。类和ID也可以和元素标记合用，比如： 
p.bigFont {……} 
则表示必须在某个为bigFont类的P标记（）才执行样式单，同样的也适合于ID。 
为了简化声明某些重复属性的标记，可以用“,”把不同的选择器隔开，表示它们都表示成相同的属性，如： 
H1,H2 {color:red} 
Div, p.mytext {……} 
有时我们还希望能够在特定的范围内使样式单生效： 
p em {color:red} 
元素标记间又空格隔开，表示在

和

间的、用红色表示。另外还可以利用“~”表示一个选择器后面紧跟另一个选择器，并且两边以“/”围住： 
/ Selector1 ~ Selector2/ {……} 
表示如果Selector2紧跟着Selector1则使用该样式单。 

2、属性值的单位 
在样式单中，属性的单位多为长度单位，包括px（象素）、pt（磅）、em（一种排版中的单位，1em＝12pt）、mm（毫米）、cm（厘米）、pc（1pc＝12pt）、in（英寸），这些单位可以使用整数（如px）表示，也可以使用实数（如em）表示，并且元素中对数值还有继承（inherit）的关系比如： 
body {font-size:12pt; 
text-indent:3em; 
} 
H1 {font-size:15pt} 
那么在显示中H1的text-indent属性就不是36pt而是45pt。 
有的属性的单位甚至可以是负值，如margin，可以达到一些特殊的效果，如元素之间的重叠。 
另外还有一些其他的单位如角度，它的单位有deg（度）、grad（梯度）和rad（弧度）；频率的单位，Hz和kHz，这些都是我们非常熟悉的。 

3、注释及空格 
样式单也有注释语句：可以用“/*……*/”作为注释标记，在浏览器中有一个对样式单的分析器，它负责对样式单的检查，分析器将忽略注释标记之间的内容。空格在样式单中是有效的，如果字符之间有超过一个空格存在，它将省略其余空格，而只保留一个，特别是在声明某些字体的时候，空格一定不能省略。 

#61618; 要注意的方面 
首先，样式单是区分大小写的，所以要注意拼写；其次对于CSS2未声明的属性和方法，样式单的分析器会忽略它的存在，如： 
H1 ,H2 {color:green} 
H3 ,H4 H5 {color:red} 
P {color:blue ;font-variant:small-caps} 
其中“”是样式单中没有的标号，第二行整个被分析器略过，第三行中的font-variant不是一个合法属性，也被略过（“color:blue”有效）。 
了解了以上规则，你就已经对样式单入门了，下面我将详细介绍样式单的各种属性及属性值。 

-------------------------------------------------------------------------------- 
CSS2快速参考之二 

关键词：其他 

四、CSS属性： 
1、媒体（Media）类型 

样式单的一个最重要的特点就是它可以作用于多种媒体，比如页面、屏幕、电子合成器等等。特定的属性只能作用于特定的媒体，如“font-size”属性只对可卷动的媒体类型有效（屏幕）。 
声明一个媒体属性可以用@import或@media引入： 
@import url(loudvoice.css) speech; 
@media print { 
/* style sheet for print goes here */ 
} 
也可以在文档标记中引入媒体： 
 
可以看出，@import和@media的区别在于，前者引入外部的样式单用于媒体类型，后者直接引入媒体属性。@import的使用方法是@import加样式单文件的URL地址再加媒体类型，可以多个媒体共用一个样式单，媒体类型之间用“，”分割符分开。@media用法则是把媒体类型放在前面，其他规则和rule-set基本一样。下面列出各种媒体类型： 
SCREEN：指计算机屏幕。 
PRINT：指用于打印机的不透明介质。 
PROJECTION：指用于显示的项目。 
BRAILLE：盲文系统，指有触觉效果的印刷品。 
AU

没有相关教程

Copyright ＠ 2007-2012 敏韬网(敏而好学，文韬武略--MinTao.Net)（学习笔记） Inc All Rights Reserved.
闵涛 E_mail:admin@mintao.net(欢迎提供学习资源)

鄂公网安备 42011102001154号

站长：MinTao ICP备案号：鄂ICP备11006601号-18