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

浅析在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=STYLESHEETHref=文件名.CSSType=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-colo