论文部分内容阅读
【摘 要】：随着网络科技的迅速发展，越来越多的人在网络上展现自己的空间。文章探讨在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样式表分类框中选择扩展，在过滤器中选择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.
【关键词】：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样式表分类框中选择扩展，在过滤器中选择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.