浅析在Dreamweaver Mx中CSS样式的探索应用

开篇：润墨网以专业的文秘视角，为您筛选了一篇浅析在Dreamweaver Mx中CSS样式的探索应用范文，如需获取更多写作素材，在线客服老师一对一协助。欢迎您的阅读与分享！

【摘 要】：随着网络科技的迅速发展，越来越多的人在网络上展现自己的空间。文章探讨在Macromedia dreamweaver mx 中使用层叠样式表(css)，在站点的多个页面中以一致的方式应用样式元素。CSS样式非常灵活，其样式应用并不局限于文本对象。对于文本、图像、表格、层等都可以定义定位样式和格式化样式。

【关键词】：CSS；class

中图分类号：TP3 文献标识码：B 文章编号：1997-0668(2008)0210041-03

Dreamweaver Mx 是一种专用的网页制作工具，它具有强大的功能设计，成为很多网页制作者的最爱。其中 CSS样式作为Dreamweaver Mx的一种工具，主要用于控制网页元素风格设计，它是"Cascading Style Sheet"的缩写，译作"级联样式表"。通过设立样式表，可以统一的控制网页中各对象的显示属性。

一、什么是CSS样式

CSS样式是通过名称或HTML标签来标识的，且允许修改样式的属性并立即查看应用该样式的所有文本的反映。HTML文档中的CSS样式可以控制绝大多数传统的文本格式属性(如：字体、大小和对齐方式)。CSS样式也可以指定独特的HTML属性。

CSS样式表存在于文档的head区域中。CSS样式表可以定义以下一些格式：HTML标签属性，以class属性标识的文本范围，满足CSS规范准则的文本。只要符合CSS样式指导方针的样式，Dreamweaver Mx均可识别。

CSS样式只能工作在4.0及以上版本的浏览器中，IE 3.0可以识别一部分CSS样式表。

二、CSS样式与HTML样式

HTML样式是一种文字属性的集合，可以将其应用于某些文字或整段文字上。但它对外观控制的功能比CSS样式更有限，而且加载的时间也更长。1998年初W3C组织公布的HTML 4.0 规范中鼓励使用CSS样式表，提倡停止使用HTML格式标签。但实践中，HTML格式标签却比CSS样式表得到更广泛的浏览器支持，并且更早版本的浏览器至今还在网络中占据不小的比重，所以HTML标签还将在WEB开发者的工具栏中占据一席之地。

CSS样式与HTML样式相比，功能强大的多，在某种意义上，可把HTML样式看作是CSS样式的子集，至少具有以下两个突出的优点：

(1) 提供比HTML样式更多的文字属性控制；CSS样式可以控制所有文字的属性。

(2)可以套用到多个网页，甚至整个网站的网页上。当CSS样式更新或修改时，所有使用该样式表的文档格式也会自动更新。

三、CSS样式在网页文档中的三种存在方式

CSS样式在网页文档中的三种存在方式是：外部文件方式、内部文档方式、直接插入方式。

(1) 外部文件方式

这种方式是将CSS写成一个文件的方式，在HTML文档头通过文件引用进行风格控制，在dreamweaver Mx中创建一个外部文件方式的CSS样式比较简单，文件的扩展名为.CSS。

CSS文件的引用是在HTML的＜head＞＜/head＞标签写下列语句：

＜LinkRel="STYLESHEET"Href="文件名.CSS"Type="text/css"＞。

如果是在Dreamweaver 中用styles功能可直接连接一个CSS外部文件，上述语句会自动生成。应用CSS文件的最大好处就是可以在每个HTML文件中引用这个文件，这使得整个站点的HTML文件在风格上保持一致。另外，需要对整个网站的CSS样式风格进行修改时，只需直接修改CSS文件就可以，而不必每个HTML文件都修改。

(2) 内嵌样式

采用内嵌样式，将CSS样式直接定义在文档头＜head＞＜/head＞之间，而不是形成文件。其范围也仅限于本文件。下面以一例说明其书写格式：

＜style type="text/css"＞

＜!-

.11 {

letter-spacing: 3px;

text- align: left;

word-spacing: 3pt;

white-space: normal;

display: inline;

vertical- align: middle;

}

--＞

＜/style＞

应用CSS内嵌样式的主要用处是，在使用CSS外部文件样式使整个网站风格统一的前提下，可针对具体页面进行具体调整。CSS内嵌样式与CSS外部文件方式并不相互排斥，而是相互结合，比如在CSS外部文件中定义了P标签的字体颜色font-color为blue，而在内部文档中可具体定义p标签的字体颜色font-color为blue，而在内部文档中可再次具体定义p标签字体颜色为red。从这个意义上，可以理解CSS样式译为"层叠样式表"的含义所在。

(3) 直接插入式

直接插入式，只需要在每个HTML标签后书写CSS属性就可以了。这种方式很简单，但很直接。例如用户想规定一个Table标签中的字为红色，字体大小为10pt，则书写如下：

＜Tablestyle="color: red; font-size: 10pt"＞

直接插入式主要用于对具体的标签做具体的调整，其作用的范围只限于本标签。

以下介绍作者在应用过程中总结的一些CSS的做法与应用。

四、CSS样式应用

(1) 设置滤镜特效

在网页可以通过CSS样式给图片添加滤镜特效。如图1所示的几幅图片，分别是经过处理后的各种特效。

在CSS样式定义分类框中选择扩展，在过滤器中选择"invert"，单击确定，建立一个样式表；然后重复以上操作，在过滤器中分别选择"xray"(x照片滤镜)、"Blur(Add=true, Direction=135, Strength=90)"(建立模糊效果)、Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=0, StartY=2, FinishX=100, FinishY=100)(设置透明度)、Wave(Add=true, Freq=6, LightStrength=30, Phase=0, Strength=3)，共建立5个样式表；最后把这5个样式表分别应用于5幅相同图像，而得到如上图1所示的不同的滤镜效果。

(2) 阴影字和发光文字的设置

在CSS样式表分类框中选择扩展，在过滤器中选择shadow,设置color=red,direction=135，在浏览器中运行出现阴影字，如下图2所示。

在CSS样式表分类框中选择扩展，在过滤器中选择glow,设置color=fff00,strength=3，在浏览器中运行出现发光文字，如上图3所示。

(3) 在网页中设置变化的鼠标

本例实现的是当光标移至运动的图片上时，光标自动变为手形，移开图片光标形状自动变为问号形状。

具体做法是选中图片所在的描绘层，然后建立一个CSS样式，在CSS样式定义面板中选择"扩展"，在"光标"处选择"help"单击确定。单击编辑区的空白区域，将光标置于不选择任何区域状态，在选择"新建CSS样式"，选择器类型选中"重定义HTML标签"，在标签框可以输入"body"，在CSS样式定义面板中选择"扩展"，在"光标"处选择"help",最后确定。

(4) 变换链接

CSS样式表可以对文字进行多种变换，将这种变换应用到文字链接中，能得到相当好的动态效果，同时还可以用CSS提供的功能，在鼠标指向链接时，适时地改变鼠标指针。

具体实现过程是首先在页面文档窗口中制作文本的超级链接，可为空链接，超级链接的文本下面有一道下划线，要去掉这道下划线，选择"新建CSS样式"，可以选择"仅对该文档"，选择器类型选中"使用CSS选择器"，选择器选择：a:link，单击确定按钮，在CSS样式表的"分类"框中选择"类型"，在分类部分选中"修饰"的"无",最后"确定"。

要改变鼠标指向链接时的动态效果，在"新建CSS样式"对话框中选择"CSS选择器"，选择器选择"a:hover"，单击确定。在CSS样式表中，在"分类"框中选择"类型"，设置一种鼠标指向链接后文本的颜色，并设置"修饰"为"无"；在"分类"框中选择"背景"，设置一种鼠标指向链接后的背景颜色；在"分类"框中选择"盒子"，设置盒子的宽、高(比如宽为100，高为10)；在"分类"框中选择"边框"，设置样式"全部相同"，在"上(T)"可选择"点划线"；设置宽度 "全部相同"，在"上(T)"可选择"细"；设置颜色"全部相同"，在"上(T)"可选择某种颜色作为边框的颜色；在"分类"框中选择"扩展"，设置某种光标形状。最后单击确定按钮。

以上两种样式可自动应用到超级链接的文本上，不用人为套用。效果如图4所示。

(5) 加入CSS样式

在网页中定义CSS样式可以统一规定HTML标签在颜色、字体大小等方面的属性，有利于使网页上的文字和图片保持一致的风格，在Dreamweaver Mx 2004中可以很方便的定义HTML标签的CSS属性，所有的CSS代码都可以通过很直观的方式生成。以下举例进行说明。

首先在空白页面输入两行文字，第一行格式为"标题1"，第二行格式为"标题2"；然后"新建CSS样式"，定义在"仅对该文档"，类型选择"重定义HTML标签"，标签选择"h1",单击确定，弹出"h1的CSS样式定义表"，在分类框中选择"背景"，设置某种背景颜色，确定。在设计窗口可以看到，类型为"标题1"的第一行背景变成了设置的背景色。这是因为页面中h1的属性被重新定义了，页面中所有＜h1＞的背景色都将得到改变。

光标移到第二行文字，同样的方法在建立CSS样式表，类型选择"创建自定义样式"，名称框中假定命名为"aa"在CSS样式表设置另一种背景色，单击确定；然后在设计窗口底部显示的HTML标签中，在"h2"标签上单击鼠标右键，在弹出的菜单中选择"设置类"aa""，这样第二行文字加上了我们设置的这种背景色。这里要注意这种新的风格只应用到指定的＜h2＞标签上，页面中其他的＜h2＞标签仍然使用默认的风格。

五、结语

文章介绍了CSS样式含义，CSS样式与HTML样式的区别以及CSS样式的三种存在方式，根据作者的经验介绍了CSS样式的应用，以提供给大家参考。

参考文献

[1] 刘小伟, 蒙坪, 新夫, 梁丽明. 网页设计实用教程, 中国铁道出版社, 2005年第二版.

[2] 陈建红. 网页制作使用教程, 北京：高等教育出版社, 2002.1.

[3] 马波. Dreamweaver MX 完美网页设计与制作, 北京：中国青年出版社, 2003.1.