css

首页 > 代码库 > css

2024-08-04 09:45:52 222人阅读

http://www.cnblogs.com/cqumsegao/archive/2006/06/02/415531.html

CSS教程(一)认识CSS

　　Dreamweaver4是现今最好的网站编辑工具之一，用它来给制作网页的CSS样式表会更简单、更方便。本教程教你如何利用Dreamweaver4在页面中加入CSS，你不用死记硬背的记代码标记，也不用去看很厚的CSS手册，你就可以轻松自如的在网页中运用CSS。不过首先你要对CSS有一定的了解。因此，本教程的前面4章为CSS理论知识，主要是对CSS的全面介绍，希望读者看后对CSS的语法、结构、应用有一个全面的了解；后面4章为DW实战，主要是教你如何利用Dreamweaver4灵活运用CSS在网页中。阅读此文前，你需要对HTML有一定的了解，并会使用Dreamweaver。

一、　　认识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精确的控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、四周加入边框等。使用CSS能够简化网页的格式代码，加快下载显示的速度，外部链接样式可以同时定义多个页面，大大减少了重复劳动的工作量。

注意：CSS需要IE4(Internet Explorer 4.0)和NC4(Netscape 4.0)以上的浏览器支持，有些效果需要更高版本的浏览器支持。

CSS教程(二)语法

1.　　基本语法

CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。
基本格式如下：
selector {property: value}
（选择符 {属性：值}）
选择符是可以是多种形式，一般是你要定义样式的HTML标记，例如BODY、P、TABLE……，你可以通过此方法定义它的属性和值，属性和值要用冒号隔开：
body {color: black}
选择符body是指页面主体部分，color是控制文字颜色的属性，black是颜色的值，此例的效果是使页面中的文字为黑色。

如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合：
p {font-family: "sans serif"}
（定义段落字体为sans serif）

如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开：
p {text-align: center; color: red}
（段落居中排列；并且段落中的文字为红色）

为了使你定义的样式表方便阅读，你可以采用分行的书写格式：
p
{
text-align: center;
color: black;
font-family: arial
}
（段落排列居中，段落中文字为黑色，字体是arial）

2.　　选择符组

你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义：
h1, h2, h3, h4, h5, h6 { color: green }
（这个组里包括所有的标题元素，每个标题元素的文字都为绿色）
p, table{ font-size: 9pt }
（段落和表格里的文字尺寸为9号字）
效果完全等效于：
p { font-size: 9pt }
table { font-size: 9pt }

3.　　类选择符

用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。假如你想要两个不同的段落，一个段落向右对齐，一个段落居中，你可以先定义两个类：
p.right {text-align: right}
p.center {text-align: center}
然后用不在不同的段落里，只要在HTML标记里加入你定义的class参数：
<p class="right">
这个段落向右对齐的
</p>
<p class="center">
这个段落是居中排列的
</p>
注意：类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简要命名。

类选择符还有一种用法，在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式：
.center {text-align: center}
（定义.center的类选择符为文字居中排列）
这样的类可以被应用到任何元素上。下面我们使h1元素（标题1）和p元素（段落）都归为“center”类，这使两个元素的样式都跟随“.center”这个类选择符：
<h1 class="center">
这个标题是居中排列的
</h1>
<p class="center">
这个段落也是居中排列的
</p>
注意：这种省略HTML标记的类选择符是我们经后最常用的CSS方法，使用这种方法，我们可以很方便的在任意元素上套用预先定义好的类样式。

4.　　ID选择符

在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。
ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。将上例中类用ID替代：
<p id="intro">
这个段落向右对齐
</p>
定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同，定义ID选择符的属性也有两种方法。下面这个例子，ID属性将匹配所有id="intro"的元素：
#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;

font-weight:bold;
color:#0000ff;
background-color:transparent
}
注意：ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。

5.　　包含选择符

可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义，例如：
table a
{
font-size: 12px
}
在表格内的链接改变了样式，文字大小为12象素，而表格外的链接的文字仍为默认大小。

6.　　样式表的层叠性

层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。例如在DIV标记中嵌套P标记：
div { color: red; font-size:9pt}
……
<div>
<p>
这个段落的文字为红色9号字
</p>
</div>
（P元素里的内容会继承DIV定义的属性）
注意：有些情况下内部选择符不继承周围选择符的值，但理论上这些都是特殊的。例如，上边界属性值是不会继承的，直觉上，一个段落不会同文档BODY一样的上边界值。

另外，当样式表继承遇到冲突时，总是以最后定义的样式为准。如果上例中定义了P的颜色：
div { color: red; font-size:9pt}
p {color: blue}
……
<div>
<p>
这个段落的文字为蓝色9号字
</p>
</div>
我们可以看到段落里的文字大小为9号字是继承div属性的，而color属性则依照最后定义的。

不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。ID选择符，类选择符和HTML标记选择符，因为ID选择符是最后加上元素上的，所以优先级最高，其次是类选择符。如果想超越这三者之间的关系，可以用!important提升样式表的优先权，例如：
p { color: #FF0000!important }
.blue { color: #0000FF}
#id1 { color: #FFFF00}
我们同时对页面中的一个段落加上这三种样式，它最后会依照被!important申明的HTML标记选择符样式为红色文字。如果去掉!important，则依照优先权最高的ID选择符为黄色文字。

7.　　注释

你可以在CSS中插入注释来说明你代码的意思，注释有利于你或别人以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS注释以"/*" 开头，以"*/" 结尾，如下：
/* 定义段落样式表 */
p
{
text-align: center; /* 文本居中排列 */
color: black; /* 文字为黑色 */
font-family: arial /* 字体为arial */

CSS教程(三)伪类——动态链接

伪类可以看做是一种特殊的类选择符，是能被支持CSS的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。

1.　　语法

伪类的语法是在原有的语法里加上一个伪类（pseudo-class）：
selector:pseudo-class {property: value}
（选择符:伪类 {属性: 值}）
伪类和类不同，是CSS已经定义好的，不能象类选择符一样随意用别的名字，根据上面的语法可以解释为对象（选择符）在某个特殊状态下（伪类）的样式。

类选择符及其他选择符也同样可以和伪类混用：
selector.class:pseudo-class {property: value}
（选择符.类:伪类 {属性: 值}）

2.　　锚的伪类

我们最常用的是4种a（锚）元素的伪类，它表示动态链接在4种不同的状态：link、visited、active、hover（未访问的链接、已访问的链接、激活链接和鼠标停留在链接上）。我们把它们分别定义不同的效果：
a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */
（上面这个例子中，这个链接未访问时的颜色是红色并无下划线，访问后是绿色并无下划线，激活链接时为蓝色并有下划线，鼠标在链接上时为紫色并有下划线）
注意：有时这个链接访问前鼠标指向链接时有效果，而链接访问后鼠标再次指向链接时却无效果了。这是因为你把a:hover放在了a:visited的前面，这样的话由于后面的优先级高，当访问链接后就忽略了a:hover的效果。所以根据叠层顺序，我们在定义这些链接样式时，一定要按照a:link， a:visited， a:hover， a:actived的顺序书写。

3.　　伪类和类选择符

将伪类和类组合起来用，就可以在同一个页面中做几组不同的链接效果了，例如，我们定义一组链接为红色，访问后为蓝色；另一组为绿色，访问后为黄色：
a.red:link {color: #FF0000}
a.red:visited {color: #0000FF}
a.blue:link {color: #00FF00}
a.blue:visited {color: #FF00FF}
现在应用在不同的链接上：
<a class="red" href="http://www.mamicode.com/...">这是第一组链接</a>
<a class="blue" href="http://www.mamicode.com/...">这是第二组链接</a>

4.　　其他伪类

此外CSS2还定义了首字和首行（first-letter和first-line）的伪类，可以对元素的首字或首行设定不同的样式。
下面看这个例子，我们在段落标记里定义文本首字尺寸为默认大小的3倍：
<style type=”text/css”>
p:first-letter {font-size: 300%}
</style>
……
<p>
这是一个段落，这个段落的首字被放大了。
</p>

我们再定义一个首行样式的例子：
<style type=”text/css”>
div:first-line {color: red}
</style>
……
<div>
<p>
这是段落的第一行
这是段落的第二行
这是段落的第三行
</p>
</div>
（上例中段落的第一行为红色，第二、三行为默认颜色）

注意：首字和首行的伪类需要IE5.5以上的版本支持。

CSS教程(四)如何在网页中插入CSS

前两章我们了解了CSS的语法，但要想在浏览器中显示出效果，就要让浏览器识别并调用。当浏览器读取样式表时，要依照文本格式来读，这里介绍四种在页面中插入样式表的方法：链入外部样式表、内部样式表、导入外表样式表和内嵌样式。

　　链入外部样式表

链入外部样式表是把样式表保存为一个样式表文件，然后在页面中?lt;link>标记链接到这个样式表文件，这个<link>标记必须放到页面的<head>区内，如下：
<head>
……
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/mystyle.css">
……
</head>
上面这个例子表示浏览器从mystyle.css文件中以文档格式读出定义的样式表。rel=”stylesheet”是指在页面中使用这个外部的样式表。type=”text/css”是指文件的类型是样式表文本。href=http://www.mamicode.com/”mystyle.css”是文件所在的位置。

一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件时，所有页面的样式都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览时也减少了重复下载代码。

样式表文件可以用任何文本编辑器（例如：记事本）打开并编辑，一般样式表文件扩展名为.css。内容是定义的样式表，不包含HTML标记，mystyle.css这个文件的内容如下：
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
（定义水平线的颜色为土黄；段落左边的空白边距为20象素；页面的背景图片为images目录下的back40.gif文件）

　　内部样式表

内部样式表是把样式表放到页面?lt;head>区里，这些定义的样式就应用到页面中了，样式表是用<style>标记插入的，从下例中可以看出<style>标记的用法：
<head>
……
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
……
</head>

注意：有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加HTML注释的方式（）隐藏内容而不让它显示：
<head>
……
<style type="text/css">

</style>
……
</head>

　　导入外部样式表

导入外部样式表是指在内部样式表的<style>里导入一个外部样式表，导入时用@import，看下面这个实例：
<head>
……
<style type=”text/css”>

</style>
……
</head>
例中@import “mystyle.css”表示导入mystyle.css样式表，注意使用时外部样式表的路径。方法和链入样式表的方法很相似，但导入外部样式表输入方式更有优势。实质上它相当于存在内部样式表中的。
注意：导入外部样式表必须在样式表的开始部分，在其他内部样式表上面。

　　内嵌样式

内嵌样式是混合在HTML标记里使用的，用这种方法，可以很简单的对某个元素单独定义样式。内嵌样式的使用是直接将在HTML标记里加入style参数。而style参数的内容就是CSS的属性和值，如下例：
<p style="color: sienna; margin-left: 20px">
这是一个段落
</p>
（这个段落颜色为土黄，左边距为20象素）
在style参数后面的引号里的内容相当于在样式表大括号里的内容。
注意：style参数可以应用于任意BODY内的元素（包括BODY本事），除了BASEFONT、PARAM和SCRIPT。

　　多重样式表的叠加

上一章里我们已经提到样式表的层叠顺序，这里我们讨论插入样式表的这几种方法的叠加，如果在同一个选择器上使用几个不同的样式表时，这个属性值将会叠加几个样式表，遇到冲突的地方会以最后定义的为准。例如，我们首先链入一个外部样式表，其中定义了h3选择符的color 、text-alig和font-size属性：
h3
{
color: red;
text-align: left;
font-size: 8pt
}
（标题3的文字颜色为红色；向左对齐；文字尺寸为8号字）
然后在内部样式表里也定义了h3选择符的text-align和font-size属性：
h3
{
text-align: right;
font-size: 20pt
}
（标题3文字向右对齐；尺寸为20号字）
那么这个页面叠加后的样式就是：
color: red;
text-align: right;
font-size: 20pt
（文字颜色为红色；向右对齐；尺寸为20号字）
字体颜色从外部样式表里保留下来，而对齐方式和字体尺寸都有定义时，按照后定义的优先而依照内部样式表。
注意：依照后定义的优先，所以优先级最高的是内嵌样式，内部样式表高于导入外部样式表，链入的外部样式表和内部样式表之间是最后定义的优先级高。

CSS教程(五)用DW4创建CSS

1. CSS Styles面板

通过前面几章的学习，相信大家对CSS有了一定的了解，这一章我们来讲解如何利用Dreamweaver4来创建CSS。首先运行Dreamweaver4，启动后，选择菜单下的Windows->CSS Styles（或按Shitf+F11），系统弹出CSS Styles管理面板，如下图所示：

在CSS Styles面板里显示了所有自定义的CSS样式（也就是上面提到的以点开头的类选择符，Dreamweaver4把这样以点开头的类选择符作为自定义样式来使用），可以利用Apply按钮这些CSS样式随意应用在页面中的文本或文档区域。

注意：应用按钮前面有一个复选框，选中的时候按钮成灰色不可用，表示自动应用，只要鼠标单击自定的CSS样式就会自动应用到页面中当前元素；如果复选框没有选中，Apply按钮为可用，应用时需要点Apply按钮。当对象应用了自定义样式时，也就相当于在当前HTML标记后加上class=”...”。另外在样式前有一个“S”型的符号，表示内部定义样式；如果是符号，表示这个样式链接到外部样式表文件。

注意：CSS Styles面板只显示自定义（class）CSS 样式；重定义的HTML标记和其他CSS选择符样式不会出现在CSS Styles面板上，这是因为它们可以自动应用于那些HTML标记控制的区域。（重定义HTML标记是指选择符为单个HTML标记的CSS样式，之所以叫重定义是因为重新定义了并改变原来HTML标记的样式。）

在右下角有4个小按钮，这是最常用的几个命令：

Attach Style Sheet：（链接到样式表）点击后会弹出一个选择样式表对话框，选中以前创建好的外部样式表，点确定就链接加入了这个外部样式表。加入外部样式表时注意尽量使用相对路径。 New Style：（新建样式）一般我们通过这个按钮来创建CSS样式表。

Edit Style sheet：（编辑样式表）点击后会弹出编辑样式表对话框，显示了所有已存在的内部和外部样式表，可以在这个对话框里新建、编辑、删除样式。

Delete：（删除样式）先选中要删除的自定义CSS样式，然后点此按钮，样式就被删除了。

点上面的小三角或点击鼠标右键会弹出一个菜单，菜单的功能依次为：

Edit：（编辑）编辑你当前选中的自定义CSS样式，点击后就进入了编辑此项CSS类样式的定义样式对话框。

Duplicate：（复制）将当前选中的自定义CSS样式类复制。

Delete：（删除）删除当前选中的自定义CSS样式，和按钮的效果相同。

Apply：（应用）是指将选中的CSS类应用在页面中当前元素。同Apply按钮。

New Style：（新建样式）等同于按钮。

Edit Style sheet：（编辑样式表）等同于按钮。

Attach Style Sheet：（链接到外部样式表）等同于按钮。

Export Style Sheet：（导出样式表）将此页面中的内部样式表导出为一个外部样式表文件。注意：Dreamweaver4导出样式表除了用这个方法外，还可以用主菜单下的File->Export->Export CSS Styles导出。

2. 创建样式表的类型在创建样式表之前我们首先介绍一下Dreamweaver4的三种样式表类型，点击CSS Styles面板中的按钮（或CSS Styles面板菜单New Style），弹出新建样式对话框，如下图：

在Define里可以选择是外部样式表，还是内部样式表：

l 选择New Style Sheet File（新建样式表文件），系统会先让你保存这个样式表文件，然后定义这个样式表文件。整个页面的样式就会跟随你建立的这个样式表文件，然后你可以把这个外部样式表文件链接到别的页面去，这样就可以使一个样式表文件控制多个页面了。

l 如果你选择This Document Only（只存在这个文档），你就建立了一个内部样式表，Dreamweaver4会自动把你建立的样式表内容放到<head>区的<style>标记里。

在Type里有三种样式表类型可供选择：

l Make Custon Style (class) ：（创建自定义样式）自定义一个样式，可以作为class属性应用于页面中。

l Redefine HTML Tag：（重定义HTML标记）对指定的 HTML 标记的默认格式进行重新定义。

l Use CSS Selector：（使用CSS选择符）对特定的标签组合，或者包含有指定ID属性的所有标签进行格式定义。

在定义CSS前，我们先要考虑清楚，定义的这个样式将用在哪里？要完成哪些效果？是定义在一个页面里还是控制多个页面的风格？然后根据需求来定义合适的样式表。

3. 创建自定义样式

在页面中，我们有时想让一些重要的文字或内容醒目，我们就需要把这些重要的文字或内容单独定义一个样式，来区别一般文字，我们可以通过创建自定义样式单独对重要内容定义CSS来完成。假设，我们要求把重要文字和内容的颜色定义成红色、并加粗来达到醒目的目的。

单击新建样式，弹出新建对话框，在新建样式对话框里，样式表类型选Make Custon Style (class)，这里我们建立内部样式表，选This Document Only，然后在上面的Name下拉框里输入你定义的样式名称，我们输入“.emphases”按OK，如下图：

注意：自定义样式的名称可以自己随意设定，一般根据其样式效果命名。在名称前必须有点号，如果漏写，系统也会自动帮你补上。

弹出样式定义对话框，在Category（类别）里选Type，然后设置颜色为红色，Weight为bold，按OK，如图：

然后在CSS Styles面板里多了一个名为emphases的自定义样式，这样一个新的样式我们就定义好了：

我们来看一下原代码部分，我们可以看到在<head>区多了下列样式表代码：

<!--

.emphases { font-weight: bold; color: #FF0000}

-->

</style>

定义好了样式，现在我们就可以把这个自定义样式套用在需要的地方，在网页中选中文字，然后单击样式面板中的emphases样式。看看，是不是你要的效果。

注意：如果我们选中的内容是一个表格或一个段落，那么整个表格或段落内的文字被定义了emphases样式，从原代码里我们可以看出是在<TABLE>或<P>标记后面加了class=”emphases”参数，如：

……

或

……

当我们把样式加在选中的几个文字上时，文字本身没有HTML标记所包围，就会自动加上<span>标记，例如：

……<span class=”emphases”>重点</span>……

注意：span标记本身没有任何意义，它专门为样式表指定选取范围，为样式表指定区域的还有div。

4. 创建重定义样式表

重定义样式表是对某个HTML标记重新定义格式。例如，我们想重新格式化页面的段落，每个段落前空两格，并设定段落文字的大小和行距。

单击新建样式，弹出新建对话框，在新建样式对话框里，样式表类型选择Redefine HTML Tag，我们仍然建立内部样式表，选This Document Only。当样式表类型选择Redefine HTML Tag时，上面下拉框的名字Name变成了Tag，表示输入的内容是HTML标记，点击下拉按钮，我们可以看到所有HTML标记都在Tag下拉框里，这里我们选段落标记P：

OK后，进入样式定义对话框，在Type里，我们设定字体大小为12象素，行距为文字尺寸的150%，如下图：

在Block部分里，我们设定文本缩进，因为文字尺寸为12象素，所以两个字的空格就是24象素：

按OK后，这个重定义样式就完成了。这时页面里每个段落的文字大小都是12象素，行距是150%，但是在Dreamweaver编辑器里我们看不到缩进的效果，不要紧，只要将文件保存，然后用浏览器打开就可以看到效果了。此时CSS样式表的原代码是：

<!--

.emphases { font-weight: bold; color: #FF0000}

p { font-size: 12px; line-height: 150%; text-indent: 24px}

-->

</style>

5. 创建动态链接样式表

下面我们来创建一组链接在不同状态下的样式。单击新建样式，弹出新建对话框，在新建样式对话框里，样式表类型选Use CSS Selector，我们仍然建立内部样式表，选This Document Only。当样式表类型选择Use CSS Selector时，上面下拉框的名字变成了Selector，表示输入内容为CSS选择符，单击下拉按钮，可以看到动态链接的4种状态：

l a:active 选中超级链接状态

l a:hover 光标移上超级链接状态

l a:link 超级链接的正常状态，没有任何动作的时候

l a:visited 访问过的超级链接状态

接下来我们对这几种状态分别设定，首先，选择a:link，OK后弹出样式定义对话框，我们设定无下划线，颜色为橙色，如下图：

我们用同样的方法设定a:visited，设定无下划线，黄色，如下图：

接下来设定a:hover，有下划线和上划线，颜色为橙色，并在Background设定背景为黄色：

这里我们不对a:active进行设置，根据层叠规则a:active的样式会自动依照a:hover。这样所有动态链接的效果我们就设置好了，注意设置时的顺序。在浏览器中就我们就可以看到：此页面上未访问的链接无下划线，橙色；访问后的链接无下划线，黄色；鼠标指向链接时有上、下划线，橙色，并背景为黄色。样式表原代码为：

<!--

.emphases { font-weight: bold; color: #FF0000}

p { font-size: 12px; line-height: 150%; text-indent: 24px}

a:link { color: #FF9900; text-decoration: none}

a:visited { color: #FFFF00; text-decoration: none}

a:hover { color: #FF9900; text-decoration: underline overline; font-size: 12px; line-height: 18px;">-->

</style>

这样定义动态链接时，整个页面的链接效果都会改变，如果我想在一个页面中定义两组以上的链接效果，该怎么做呢？在第四章里我们不是说过的类和伪类的混用可以在同一个页面中做不同的链接效果吗。点击新建样式，在选择符下拉框里，我们输入a.link2:link（当然可以先选择a:link，然后更改），如下图：

这样我们就新建立了一个.link2类，我们为a.link2:link设定样式，红色，有下划线：

根据上面的方法我们继续定义a.link2:visited和a.link2:hover，我们定义a.link2:visited为红色有下划线，a.link2:hover为红色无下划线，背景为白色。在CSS Styles面板里多了一个名称为link2的自定义样式。然后将此样式应用在某个动态链接上。保存后，用浏览器打开，我们可以看到两个完全不同的链接样式。全部CSS代码如下：

<!--

.emphases { font-weight: bold; color: #FF0000}

p { font-size: 12px; line-height: 150%; text-indent: 24px}

a:link { color: #FF9900; text-decoration: none}

a:visited { color: #FFFF00; text-decoration: none}

a:hover { color: #FF9900; text-decoration: underline overline; font-size: 12px; line-height: 18px;">a.link2:link { color: #FF0000; text-decoration: underline}

a.link2:visited { color: #FF0000; text-decoration: underline}

a.link2:hover { color: #FF0000; text-decoration: none; font-size: 12px; line-height: 18px;">-->

</style>

6. 其他样式表的定义

我们还可以在Use CSS Selector里输入其他CSS选择符：

ID选择符，以“#”号开头定义一个样式，例如：“#id-style”，然后建立一个ID为id-style的ID样式，ID样式表必须手动在HTML标记后加id=”id-style”属性。

含HTML标记的类选择符，例如：“p.red”，表示定义段落为red类的样式，此样式只对有class=”red”属性的段落有效果。

包含选择符，是指前一个HTML标记里包含着后一个HTML标记，例如：“div p”，表示定义在DIV里包含段落的样式。

7. 编辑、修改、删除样式表

点CSS Styles面板中的按钮会打开编辑样式表对话框，如下图：

按钮功能介绍：

Link：链接外部样式表，这里可以选择链入外部样式表和导入外部样式表两种方式。

New：新建样式。

Edit：选中一个样式然后点Edit就可以进行编辑。

Duplicate：复制一个样式，选中一个样式后点Duplicate按钮，弹出对话框，为复制的样式起一个新的名称，OK。

Remover：移除一个样式或一个外部样式表，选中要删除的样式点Remove按钮，此样式就被删除了。

在Style definition（样式定义）栏里可以看到此样式的内容。

8. 外部样式表

建立外部样式表和建立内部样式表差不多，只是在新建的时候选择(New Style Sheet File)，并保存为一个扩展名为.css的样式表文件。

现在，我们把刚才实例中的样式表导出，然后再链接到其他页面。点击CSS Style面板菜单中的Export Style Sheet，系统弹出导出样式表对话框，我们将样式表文件保存为mystyle.css。用记事本打开mystyle.css文件可以看到如下样式表代码：

.emphases { font-weight: bold; color: #FF0000}

p { font-size: 12px; line-height: 150%; text-indent: 24px}

a:link { color: #FF9900; text-decoration: none}

a:visited { color: #FFFF00; text-decoration: none}

a:hover { color: #FF9900; text-decoration: underline overline; font-size: 12px; line-height: 18px;">a.link2:link { color: #FF0000; text-decoration: underline}

a.link2:visited { color: #FF0000; text-decoration: underline}

a.link2:hover { color: #FF0000; text-decoration: none; font-size: 12px; line-height: 18px;">然后转到其他页面中，点CSS Style面板中的链入外部样式表按钮，链入刚才导出的样式表文件mystyle.css，此时这个样式表已经应用到新的页面中了。在新页面的<head>区添加了下列代码：

此外，还可以导入外部样式表，导入方法如下：

点击编辑样式表按钮，打开编辑样式表对话框，点击LINK按钮，这时弹出”Link External Style Sheet”对话框，输入外部样式表的路径，选择Import（导入），确定。

可以看到在<head>区的代码为：

<!--

@import "mystyle.css";

-->

</style>

CSS教程(六) DW4中CSS属性详解

在Dreamweaver4的CSS样式里包含了W3C规范定义的所有CSS1的属性，Dreamweaver4把这些属性分为Type（类型）、Background（背景）、Block（块）、Box（盒子）、Border（边框）、 List（列表）、Positioning（定位）、Extensions（扩展）八个部分，如下图，下面我们分别详细讲解。

1. Type（类型）

Type面板主要是对文字的字体，大小，颜色，效果等基本样式进行设置。设置时，我们只对要改变的属性进行设置，没有必要改变的属性就空着。

注意：属性名带*号的是指样式效果不能在编辑文档时显示，要用浏览器打开才能看到效果。

Font：设置字体系列。什么叫字体系列呢？是指对文字设定几个字体，当遇到第一个字体不能显示的文字时会自动用系列中的第二个字体或后面的字体显示。相对应的CSS属性是”font-family”。

注意：Dreamweaver4已经内置设定了6个系列的英文字体，一般英文字体我们用“Verdana, Arial, Helvetica, sans-serif”这个系列比较好看。如果不用这些字体系列，你就需要自己编辑字体系列，你可以通过下拉框最下面的“Edit Font List”来创建新的字体系列，也可以直接手动在下拉框里写字体名，字体之间用逗号隔开。中文网页默认字体是宋体，一般就空着不要选取任何字体。

Size：定义文字的大小。你可以通过选取数字和度量单位来选择具体的字体大小，或者你也可以选择一个相对的字体大小。最好使用Pixels作为单位，这样不会在浏览器中文本变形。一般小字体用比较标准的12px。相对应的CSS属性是”font-size”。

注意：CSS中长度的单位分绝对长度单位和相对长度单位，一般我们常用的绝对长度单位有： px：（象素）根据显示器的分辨率来确定长度。

pt：（字号）根据windows系统定义的字号大小来确定长度。

mm、cn、in：（毫米、厘米、英寸）根据显示的实际尺寸来确定长度。此类单位不随显示器的分辨率改变而改变。

相对长度单位有：

em：当前文本的尺寸。例如：{ font-size:2em}是指文字大小为原来的2倍。

ex：当前字母“x”的高度，一般为字体尺寸的一半。

%：是以当前文本的百分比定义尺寸。例如：{ font-size:300%}是指文字大小为原来的3倍。

small、large：表示比当前小一个级别或大一个级别的尺寸。 Style：定义字体样式为Normal、Italic、或者Oblique。Italic和Oblique是斜体字体。默认设置为 Normal。相对应的CSS属性是”font-style”。

注意：Italic和Oblique都是斜体字体。而它们不同的是，Italic是斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该用Oblique。

Line Height：设置文本所在行的行高。默认为Normal，你也可以自己键入一个精确的数值并选取一个计量单位。比较直观的写法用百分比，例如140%是指行高等于文字大小的1.4倍。相对应的CSS属性是”line-height”。

Decoration：在文本中添加underline（下划线）、overline（上划线）、line-through（中划线）、blink（闪烁效果）。这些效果可以同时存在，将效果前的复选框选定即可。相对应的CSS属性是”text-decoration”。

注意：链接的默认设置是Underline，我们可以通过选none去除下划线。Blink（闪烁效果）只在NC浏览器里可以看到。

Weight：给字体指定粗体字的磅值。Normal等同于400；Bold等同于700。设粗体字一般用bold。相对应的CSS属性是”font-weight”。

Variant：允许你选取字体的变种，选small-caps（小型大写字母）时，此样式区域内所有字母大写。相对应的CSS属性是”font-variant”。

Case：将选区中每个单词的第一个字母转为大写，或者令单词全部大写或全部小写。参数：capitalize（单词首字母大写）、uppercase（转换成大写）、lowercase（转换成小写）、none（不转换）。相对应的CSS属性是” text-transform”。

Color：定义文字颜色。相对应的CSS属性是” color”。

注意：CSS中颜色的值有三种表示方法：

l #RRGGBB格式，是由红绿蓝三种颜色的值组合，每种颜色的值为“00 – FF”的两位十六进制正整数。例如：#FF0000表示红色，#FFFF00表示黄色。

l rgb(R,G,B)格式，RGB为三色的值，取0~255，例如：rgb(255,0,0)表示红色，rgb(255,255,0)表示黄色。

l 用颜色名称。CSS可以使用已经定义好的颜色名称。例如：red表示红色，yellow表示黄色。

2. Background（背景）

Background面板主要是对元素的背景进行设置，包括背景颜色、背景图象、背景图象的控制。一般是对BODY（页面）、TABLE（表格）、DIV（区域）的设置。

Background Color：设置元素的背景色。相对应的CSS属性是”background-color”。

Background Image：设置元素的背景图像。相对应的CSS属性是”background-image”。

Repeat：确定背景图像是否以及如何重复。No Repeat：在元素的开头显示一遍图像。Repeat：在元素的背景部分水平和垂直方向平铺图像。Repeat-x and Repeat-y：分别在水平和垂直方向重复显示，默认为Repeat。相对应的CSS属性是”background-repeat”。

注意：如果定义的元素的BODY，可以控制页面背景是否重复。

Attachment：固定背景图像或者跟随内容滚动。参数fixed表示固定背景，scroll表示跟随内容滚动的背景。相对应的CSS属性是”background-attachment”。

注意：如果定义的元素的BODY，可以使页面背景固定。

Horizontal：指定背景图像的水平位置。可以指定为left（左边），center（居中），right（右边）；也可以指定数值，如20px是指背景距离左边20象素。相对应的CSS属性是” background-position”。

Vertical：指定背景图像的垂直位置。可以指定为top（顶部），center（居中），bottom（底部）；也可以指定数值。相对应的CSS属性是” background-position”。

注意：水平位置和垂直位置使用的是同一个CSS属性，在设置时要注意。

3. Block（区块）

Block面板主要是设置对象文本的文字间距、对齐方式、上标、下标、排列方式、首行缩进等。

Word Spacing：设置单词之间的间距。可以设置负值。相对应的CSS属性是” word-spacing”。

注意：一般情况下IE不支持此属性，仅在MAC平台上的IE4+可用。

Letter Spacing：设置字符之间的间距。可以指定负值。因为中文也是字符，这个参数可以设置文字间的间距。相对应的CSS属性是” letter-spacing”。

Vertical Align：指定元素的垂直对齐方式。可以指定sub（下标）、super（上标）、top（与顶端对齐）、middle（居中）、bottom（与底端对齐）……。相对应的CSS属性是” vertical-align”。

Text Align：设置文本的排列方式。Left（左对齐）、right（右对齐）、center（居中）、justify（两端对齐）。相对应的CSS属性是”text-align”。

Text Indent：设置文本第一行的缩进值。负值用于将文本第一行向外拉。要在每段前空两格，可设置为2em，因为em是当前字体尺寸，2em就是两个字的大小。相对应的CSS属性是”text-indent”。

Whitespace：设置如何处理元素内的空白符。有三个选项可选：Normal 会将空白符全部压缩；Pre 则会如同处理 pre 标签内的文本一样处理这些空白符（也就是说，所有的空白符，包括空格，标签，回车，等都会得以保留）；Nowrap 指定文本只有遇到 br 标签时才换行。相对应的CSS属性是”white-space”。
4. Box（盒子）

Box面板主要设置对象的边界、间距、高度、宽度、和漂浮方式等。

Width：定义元素的宽。相对应的CSS属性是”width”。

Height：定义元素的高。相对应的CSS属性是”height”。

注意：宽和高定义的对象多为图片，表格，层等。

Float：定义元素的漂浮方式。left 表示对象浮在左边、right表示对象浮在右边、none 表示对象不浮动。相对应的CSS属性是”float”。

Clear：不允许元素的漂浮。left表示不允许左边有浮动对象、right表示不允许右边有浮动对象、none表示允许两边都可以有浮动对象、both不允许有浮动对象。相对应的CSS属性是”clear”。

Padding：定义元素内容与其边框的空距（如果元素没有边框就是指页边的空白）。可以分别设置top（上补白）、right（右补白）、bottom（下补白）、left（左补白）的值。相对应的CSS属性分别是”padding; padding-top; padding-right; padding-bottom; padding-left”。

Margin：定义元素的边框与其他元素之间的距离（如果没有边框就是指内容之间的距离）。可以分别设置top（上边界）、right（右边界）、bottom（下边界）、left（左边界）的值。相对应的CSS属性分别是”margin; margin-top; margin-right; margin-bottom; margin-left”。

下面是补白、边框、边界之间的关系图：

5. Border（边框）

Border面板可以设置对象边框的宽度、颜色及样式。

Width：设置元素边的宽度。可以分别设定Top（上边宽）、Right（右边宽）、Bottom（下边宽）、Left（左边宽）的值。相对应的CSS属性分别是”border; border-top; border-right; border-bottom; border-left”。

Color：设置边框的颜色。你可以分别对每条边设置颜色。相对应的CSS属性分别是”border-color; border-top-color; border-right-color; border-bottom-color; border-left-color”。

注意：我们可以通过设置不同的颜色做出亮边和暗边的效果，这样元素看起来是立体的。

Style：设置边框样式。可以设置为none（无边框）、dotted（点线）、dashed（虚线）、solid（实线）、double（双线）、groove（凹槽）、ridge（凸槽）、inset（凹边）、outset（凸边）等边框样式。相对应的CSS属性是”border-style”。

注意：dotted（点线）、dashed（虚线）必须要IE5.5以上或者MAC平台支持，否则效果为实线。

6. List（列表）

List面板可以设置列表项样式、列表项图片、和位置。

Type：设置列表项所使用的预设标记。可以设置的样式有：disc（实心圆）、circle（空心圆）、square（方块）、decimal（阿拉伯数字）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）、lower-alpha（小写英文字母）、upper-alpha（大写英文字母）、none（无项目符号）。相对应的CSS属性是”list-style-type”。

Bullet Image：设置列表项的图像。值为图象的URL地址或路径。相对应的CSS属性是”list-style-image”。

Position：设置列表项在文本内还是在文本外。Inside：列表项目标记放置在文本以内，Outside：列表项目标记放置在文本以外。相对应的CSS属性是”list-style-position”。

7. Positioning（定位）

Positioning面板就相当于对象放在一个层里来定位，它相当于HTML的DIV标记。你可以把定义看作为一个CSS定义的层。

Type：设定对象的定位方式。有三种方式：Absolute（绝对定位）、Relative（相对定位）、Static（无特殊定位）。相对应的CSS属性是”position”。

Visibility：设定对象定位层的最初显示状态。有三种状态：Inherit（继承父层的显示属性）、Visible（对象可视）、Hidden隐藏对象。相对应的CSS属性是”visibility”。

Z-Index：设置对象的层叠顺序。编号较大的层会显示在编号较小的层上边。变量值可以是正值也可以是负值。相对应的CSS属性是”z-index”。

Overflow：设置如果层的内容超出了层的大小时如何处理。有四种处理方式：visible，增加层的大小，从而将层的所有内容显示出来；hidden，保持层的大小不变，将超出层的内容剪裁掉；Scroll，总是显示滚动条；Auto，只有在内容超出层的边界时才显示滚动条。相对应的CSS属性是”overflow”。

Placement：设置对象定位层的位置和大小。可以分别设置left（左边定位）、top（顶部定位）、width（宽）、height（高）。相对应的CSS属性分别是”left; top; width; height”。

Clip：定义定位层的可视区域。区域外的部分为不可视区，为透明的。可以理解为在定位层上放一个矩形遮罩的效果。相对应的CSS属性是”clip”。

注意：此参数只要在绝对定位时有效。

注意：当Type里设定了绝对定位后，会为对象加上一个绝对定位的层。这个CSS创建的层同一般的层一样有属性面板，也显示在层管理面板中。你可以通过设置这个定位层的属性面板修改上述参数，不过在此属性面板里改动的值会作为内嵌样式加在对象标记后面，下图是定位层的属性面板：

8. Extensions（扩展）

Pagebreak：在打印的时候强迫在样式控制的对象前后换页。

Before：设置对象前出现的页分割符。设置为always时，始终在对象之前插入页分割符。相对应的CSS属性是”page-break-before”。

After：设置对象后出现的页分割符。设置为always时，始终在对象之后插入页分割符。相对应的CSS属性是”‘>。

注意：以上IE5仅支持always值和空白值（null）。

Cursor：当鼠标滑过样式控制的对象时改变鼠标形状。可以设置为hand（手型）、crosshair（“十”型）、text （“I”型）、wait（等待）、default（默认）、help（帮助）、e-resize（东箭头）、ne-resize（东北箭头）、n-resize（北箭头）、nw-resize（西北箭头）、w-resize（西箭头）、sw-resize（西南箭头）、s-resize（南箭头）、se-resize（东南箭头）和auto（自动）。

Filter：在样式中加上滤镜特效。由于此属性内容比较多，我们将到下一章单独对滤镜介绍。

二、滤镜

CSS提供了一些内置的多媒体滤镜特效，使用这种技术可以把可视化的滤镜和转换效果添加到一个标准的HTML元素上，例如图片、文本容器、以及其他一些对象。Dreamweaver4提供了16种滤镜可供选择，如下图：

下面，我们就来看看在Dreamweaver4里如何方便的使用这些CSS滤镜。

建立一个自定义样式“.filter”，在Filter下拉框里选Alpha滤镜，我们将“Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)”的Opacity参数设为50，后面的参数都删掉，如下图：

按OK后就建立了一个“.filter”的自定义样式，我们把这个样式应用到图片上，图片就是半透明的了。如果把这个样式应用到表格上，表格也变成了半透明状态了。注意所有滤镜效果都要在浏览器里才能看到。下面是原码：

<!--

.filter { filter: Alpha(Opacity=50)}

-->

</style>

注意：这个例子我们没有用到后面的几项参数，只用到Opacity参数，所以将其他参数删掉。

下面我们来讲解每个滤镜的效果和参数：

1. Alpha：设置透明度

Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)

Opacity：透明度级别，范围是0-100，0代表完全透明，100代表完全不透明。

FinishOpacity：设置渐变的透明效果时，用来指定结束时的透明度，范围也是0 到 100。

Style：设置渐变透明的样式，值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。

StartX和StartY：代表渐变透明效果的开始X和Y坐标。

FinishX和FinishY：代表渐变透明效果结束X和Y 的坐标。

2. BlendTrans：图像之间的淡入和淡出的效果

BlendTrans(Duration=?)

Duration：淡入或淡出的时间。

注意：这个滤镜必须配合JS建立图片序列，才能做出图片间效果。

3. Blru：建立模糊效果

Blur(Add=?, Direction=?, Strength=?)

Add：是否单方向模糊，此参数是一个布尔值，true（非0）或false（0）。

Direction：设置模糊的方向，其中0度代表垂直向上，然后每45度为一个单位。

Strength：代表模糊的象素值。

4. Chroma：把指定的颜色设置为透明

Chroma(Color=?)

Color：是指要设置为透明的颜色。

5. DropShadow：建立阴影效果

DropShadow(Color=?, OffX=?, OffY=?, Positive=?)

Color：指定阴影的颜色。

OffX：指定阴影相对于元素在水平方向偏移量，整数。

OffY：指定阴影相对于元素在垂直方向偏移量，整数。

Positive：是一个布尔值，值为true（非0）时，表示为建立外阴影；为false(0)，表示为建立内阴影。

6. FlipH：将元素水平反转

7. FlipV：将元素垂直反转

8. Glow：建立外发光效效果

Glow(Color=?, Strength=?)

Color：是指定发光的颜色。

Strength：光的强度，可以是1到255之间的任何整数，数字越大，发光的范围就越大。

9. Gray：去掉图像的色彩，显示为黑白图象

10. Invert：反转图象的颜色，产生类似底片的效果

11. Light：放置光源的效果，可以用来模拟光源在物体上的投影效果

注意：此效果需要用JS设置光的位置和强度。

12. Mask：建立透明遮罩

Mask(Color=?)

Color：设置底色，让对象遮住底色的部分透明。

13. RevealTrans：建立切换效果

RevealTrans(Duration=?, Transition=?)

Duration：是切换时间，以秒为单位。

Transtition：是切换方式，可设置为从0到23。

注意：如果做页面间的切换效果，可以在<head>区加上一行代码：<Meta http-equiv=Page-enter content=revealTrans(Transition=?,Duration=?) >。如果用在页面里的元素必须配合JS使用。

14. Shadow：建立另一种阴影效果

Shadow(Color=?, Direction=?)

Color：是指阴影的颜色。

Direction：是设置投影的方向，0度代表垂直向上，然后每45度为一个单位。

15. Wave：波纹效果

Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)

Add：表示是否显示原对象，0表示不显示，非0表示要显示原对象。

Freq：设置波动的个数。

LightStrength：设置波浪效果的光照强度，从0到100。0表示最弱，100表示最强。

Phase：波浪的起始相角。从0到100的百分数值。（例如：25相当于90度，而50相当于180度。）

Strength：设置波浪摇摆的幅度。

16. Xray：显现图片的轮廓，X光片效果

注意：在使用CSS滤镜时，必须使用在有区域的元素，比如表格，图片等。而文本，段落这样没有区域的元素不能使用CSS滤镜，对这样的元素我们可以设置元素的Height和Width样式或坐标来实现。

看下面这个例子，我们对一行文字做阴影效果（dropshadow），新建自定义样式.shadow，在filter下拉框里选择“DropShadow(Color=?, OffX=?, OffY=?, Positive=?)”，我们设置为“DropShadow(Color=999999, OffX=2, OffY=2, Positive=1)”。然后把定义好的样式应用在页面中，我们发现在表格里的文字有了阴影，而段落里的文字却没有阴影。点CSS Styles面板里的编辑样式表按钮，给样式加上Hight属性：

为了不影响原来对象的高度，我们设置的高度不能超过字体本身的高度。OK后，在浏览器中可以看到段落里的文字也有阴影了。

CSS教程(七) 滤镜

下面，我们就来看看在Dreamweaver4里如何方便的使用这些CSS滤镜。

<!--

.filter { filter: Alpha(Opacity=50)}

-->

</style>

注意：这个例子我们没有用到后面的几项参数，只用到Opacity参数，所以将其他参数删掉。

下面我们来讲解每个滤镜的效果和参数：

1. Alpha：设置透明度

Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)

Opacity：透明度级别，范围是0-100，0代表完全透明，100代表完全不透明。

FinishOpacity：设置渐变的透明效果时，用来指定结束时的透明度，范围也是0 到 100。

Style：设置渐变透明的样式，值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。

StartX和StartY：代表渐变透明效果的开始X和Y坐标。

FinishX和FinishY：代表渐变透明效果结束X和Y 的坐标。

2. BlendTrans：图像之间的淡入和淡出的效果

BlendTrans(Duration=?)

Duration：淡入或淡出的时间。

注意：这个滤镜必须配合JS建立图片序列，才能做出图片间效果。

3. Blru：建立模糊效果

Blur(Add=?, Direction=?, Strength=?)

Add：是否单方向模糊，此参数是一个布尔值，true（非0）或false（0）。

Direction：设置模糊的方向，其中0度代表垂直向上，然后每45度为一个单位。

Strength：代表模糊的象素值。

4. Chroma：把指定的颜色设置为透明

Chroma(Color=?)

Color：是指要设置为透明的颜色。

5. DropShadow：建立阴影效果

DropShadow(Color=?, OffX=?, OffY=?, Positive=?)

Color：指定阴影的颜色。

OffX：指定阴影相对于元素在水平方向偏移量，整数。

OffY：指定阴影相对于元素在垂直方向偏移量，整数。

Positive：是一个布尔值，值为true（非0）时，表示为建立外阴影；为false(0)，表示为建立内阴影。

6. FlipH：将元素水平反转

7. FlipV：将元素垂直反转

8. Glow：建立外发光效效果

Glow(Color=?, Strength=?)

Color：是指定发光的颜色。 Strength：光的强度，可以是1到255之间的任何整数，数字越大，发光的范围就越大。

9. Gray：去掉图像的色彩，显示为黑白图象

10. Invert：反转图象的颜色，产生类似底片的效果

11. Light：放置光源的效果，可以用来模拟光源在物体上的投影效果

注意：此效果需要用JS设置光的位置和强度。

12. Mask：建立透明遮罩

Mask(Color=?)

Color：设置底色，让对象遮住底色的部分透明。

13. RevealTrans：建立切换效果

RevealTrans(Duration=?, Transition=?)

Duration：是切换时间，以秒为单位。

Transtition：是切换方式，可设置为从0到23。

14. Shadow：建立另一种阴影效果

Shadow(Color=?, Direction=?)

Color：是指阴影的颜色。

Direction：是设置投影的方向，0度代表垂直向上，然后每45度为一个单位。

15. Wave：波纹效果

Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)

Add：表示是否显示原对象，0表示不显示，非0表示要显示原对象。

Freq：设置波动的个数。

LightStrength：设置波浪效果的光照强度，从0到100。0表示最弱，100表示最强。

Phase：波浪的起始相角。从0到100的百分数值。（例如：25相当于90度，而50相当于180度。）

Strength：设置波浪摇摆的幅度。

16. Xray：显现图片的轮廓，X光片效果

为了不影响原来对象的高度，我们设置的高度不能超过字体本身的高度。OK后，在浏览器中可以看到段落里的文字也有阴影了。

CSS教程(八) 简单介绍CSS结合JS的运用

　　八、简单介绍CSS结合JS的运用（针对事件动作）

利用CSS配合Javascript的可以做很多更酷的动态页面效果，在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先，我们要搞清楚事件和动作的概念。在客户端脚本中，JavaScript 通过对事件进行响应来获得与用户的交互。例如，当用户单击一个按钮或者在某段文字上移动鼠标时，就触发了一个单击事件或鼠标移动事件，通过对这些事件的响应，可以完成特定的功能（例如，单击按钮弹出对话框，鼠标移动到文本上后文本变色等）。下面介绍几种常见的事件（还用更多事件，请查阅相关资料）：

onClick：鼠标单击事件。（是指鼠标按下，然后松开时产生。）

onDblClick：鼠标双击事件。（是指鼠标快速按下，松开，并再次按下时产生。）

onMouseDown：鼠标按下事件。（鼠标按下时即产生。）

onMouseUp：鼠标释放事件。（是指鼠标从按下的状态到弹起。）

onMouseMove：鼠标移动事件。（是指在特定元素上移动鼠标。） onm ouseOver：鼠标经过事件。（是指，当指针从外界往元素上移动时产生。）

onMouseOut：鼠标离开事件。（是指鼠标从特定元素上离开时产生。）

onLoad：载入事件。（当图象或页面结束载入时产生。）

onUnload：卸载事件。（当访问者离开页面时产生。）

onScroll：滚动条滚动事件。（当访问者使用卷轴上移或下移时产生。）

有了事件以后，我们就为事件加上动作。这里只说改变当前元素自定义样式的动作，我们可以用这个方法先设定好两个自定义的CSS样式，对象原先调用第一种样式，当产生鼠标事件时让对象应用到第二种CSS样式，而产生的鼠标效果，看下面这个例子。

在网页中插入一个图象，自定义一个“.out”样式，用gray滤镜使图片变成黑白的：

将这个自定义样式应用到图片上，在浏览器中预览到图片变成了黑白，我们再定义一个样式“.over”，这个样式没有任何内容，是空样式，样式表代码如下：

<!--

.over {}

.out {filter: Gray}

-->

</style>

然后在图片标记（IMG）里加上“onMouseOver="this.className=‘over‘" onm ouseOut="this.className=‘out‘"”，意思为当鼠标经过时，图片为over样式，即彩色正常图象；当鼠标离开时，图片为out样式，即黑白图象。oMouseOver和onMouseOut是鼠标事件，this.className=”…”表示当前对象的class名为…，注意大小写不要写错，JS对大小写非常敏感。

这样这个效果就完成了，保存后在浏览器里打开，图象是黑白的，当鼠标移上去时，图象变成彩色，鼠标离开时，图象又变回黑白。只要发挥你的想象，通过this.className方法还可以做出很多好看的鼠标效果。

到这里，所有教程的内容就都讲完了，希望大家在学习中能灵活运用属性及方法，深刻理解规律和概念。如对本文有疑问和意见，欢迎到www.5dmedia.com/bbs论坛讨论发言。

（全文完）

css

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > css

css

看完仍有疑问？有类似问题直接问程序猿