Dreamweaver中如何使用CSS样式表
摘 要：CSS最早被提议在1994年，最早被浏览器支持在1996年，CSS一直被力捧为传统的以HTML为基础的web代码的继承者。CSS使用样式表来控制整个站点字体和布局的能力，使它看起来非常有效率、易于设计和有远见，它本身所独有的强大优势决定了我们现在就应该学习和开始使用CSS。
关键词：网页设计 CSS样式表 设置方法 问题
当今社会，网络可以说是无所不在、无所不包的一个不再是新鲜事物，而又每天都带给我们新感觉的神奇所在。作为计算机专业的学生，学习网站建设，也就成为了必不可少的一门必修课。
而随着时代的发展，网站建设越来越接近于一门艺术而不仅仅是一项技术。网页的艺术设计，日益被网站建设者所注重。网页艺术设计是伴随着计算机互联网络的产生而形成的视听设计新课题，是网页设计者以所处时代所能获取的技术和艺术经验为基础，依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动，必然要成为设计艺术的重要
组成部分，并随着网络技术的发展而发展。表面上看，它不过是关于网页版式编排的技巧与方法，而实际上，它不仅是一种技能，更是艺术与技术的高度统一。
任何设计都有一定的内容和形式。内容是构成设计的一切内在要素的总和，是设计存在的基础，被称为“设计的灵魂”；形式是构成内容诸要素的内部结构或内容的外部表现方式。设计的内容就是指它的主题、形象、题材等要素的总和，形式就是它的结构、风格或设计语言等表现方式。内容决定形式，形式反作用于内容。一个优秀的设计必定是形式对内容的完美表现。正如黑格尔所说：“工艺的美就不在于要求实用品的外部造型、彩、纹样去摹拟事物，再现现实，而在于使其外部形式传达和表现出一定的情绪、气氛、格调、风尚、趣味，使物质经由象征变成相似于精神生活的有关环境。”
一方面，网页设计所追求的形式美，必须适合主题的需要，这是网页设计的前提。只讲花哨的表现形式以及过于强调“独特的设计风格”而脱离内容，或者只求内容而缺乏艺术的表现，网页设计都会变的空洞而无力。设计者只有将二者有机地统一起来，深入领会主题的精髓，再融合自己的思想感情，到一个完美的表现形式，才能体现出网页设计独具的分量和特有的价值。另一方面，要确保网页上的每一个元素都有存在的必要性，不要为了炫
耀而使用冗余的技术。那样得到的效果可能会适得其反。只有通过认真设计和充分的考虑来实现全面的功能并体现美感才能实现形式与内容的统一。
据有关资料所做的保守估计，目前在WWW上网页数据传输平均以每秒1.5k的速度到达客户端。假设某个网页为了丰富其艺术性而追赶时髦地大量使用图像或其它多媒体元素等，虽然达到了其静态形式美的效果，却造成多达几十K甚至更大的网页数据，使浏览者必须等待很长时间才能看到“庐山真面目”，这样的网页就不是一个优秀的网页，因为它不符合网页传播信息的突出特性之一——快捷性，使网页内容不能很快地到达访问者，影响了访问效果和质量，损害了访问者的情趣和积极性，这种技术要素影响了传达信息的效果，因而不是形式与内容的完美统一。
网页具有多屏、分页、嵌套等特性，设计者可以对其进行形式上的适当变化以达到多变性处理效果，丰富整个网页的形式美。这就要求设计者在注意单个页面形式与内容统一的同时，更不能忽视同一主题下多个分页面组成的整体网页的形式与整体内容的统一。
在以往的网页设计中，对网页文字、图片等元素的修饰与美化，一般使用HTML标签来实现，代码非常烦琐。很难想象，如果在一个页面里需要频繁地更替字体的颜大小，最终
生成的HTML代码的长度一定臃肿不堪。说实话，CSS就是为了简化这样的工作诞生的，当然其功能绝非这么简单。
一、什么是CSS
CSS就是一种叫做样式表（stylesheet）的技术。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
二、怎样使用CSS
Dreamweaver MX 2004以上的版本，在定义文字字体、颜、大小等属性的时候，查看一下代码会发现有这样的一部分在head区域：
<style type="text/css">
<!--
.STYLE2 {
font-size: 16pt;
font-family: "Courier New", Courier, monospace;
font-weight: bold;
color: #FF3300;
}
-->
</style>
这个其实就是使用了CSS设计网页，除了这种调用CSS的方法外，还有其他的方法：
（1）标记加注法(in-line)：如果只有一个HTML标记需要设定样式，则可在该标记内，加上属性以个别修订样式
（2）页面内嵌法：
<style type="text/css">
</style>
（3）外部调用法
<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css"
media="all" />
<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css"
media="all" />
三、几个常用的CSS设置
1、给一部分文字加背景
给文字加上不同颜，在DW3中只要在属性面板上选取文字的颜就行了，非常方便，但要给部分文字加不同的背景却没有相应的功能，我们可以先做一个定义背景的CSS（
如：bgstyle），在DW3中点几下鼠就完成了。如一个定义淡黄背景的CSS是这样的：
<style type="text/css">
<!--
.bgstyle{background:#FFFFCC}
-->
</style>
在要用时选取那段文字，再在CSS面板上点一下“bgstyle”就行了。
2、给部分文字加背景图像：与加背景操作类似
3、使页面的背景在文字“滚动”时背景图案静止不动
要使背景图案不随文字“滚动”的CSS是这样的：
<style type="text/css">
<!--
BODY { background: purple url(/bg.jpg);
background-repeat:repeat-y;
background-attachment:fixed
}
-->
</style>
4、定义字间距
在DW3中CSS的属性定义对话框（网页设计html代码大全怎么改颜style Definition for .style1)的“Block”上的“letter spaceing”属性定义的就是字间距，它指的是每一个字符之间的额外间距，经长度为单位，正负值均可，当取负值时产生字符挤在一起的效果。下面代码是一个定义字间距CSS例子：
<style type="text/css">
<!--
.style1 { letter-spacing: 3px}
-->
</style>
5、给文字加上划线、下划线、删除线和闪烁
在DW3中CSS的属性定义对话框(style Definition for .style1)的“Type”上的“decoration”属性定义的就是这些内容，要注意的是闪烁属性有些版本的浏览器不支持，少用为好。下面是一个定义上述效果的CSS例子：
<style type="text/css">
<!--
.
style1 { text-decoration: underline overline line-through blink}
-->
</style>
其中： “underline”是定义下划线；“overline ”是定义上划线；“ line-through”定义的是删除线；“blink“定义的是文字闪烁。
6、使网页具有“首行缩进”功能
由于DW3输入空格不方便，利用“首行缩进”将弥补这个不足。在DW3中CSS的属性定义对话框（style Definition for .style1)的“Block”上的“text-indent”属性定义的就是“首行缩进”，所谓“首行”是每段内容的第一行，也就是直接按回车键就形成了一个新的段落。缩进最好以“em”（字符）为单位，设置好的CSS如下所示：
<style type="text/css">
<!--
.style1 { text-indent: 2em}
-->
</style>
在DW3中CSS的属性定义对话框（style Definition for .style1）的“Block”上的“text-indent”右面的缩进单位选择框中“ems”指的就是“em”。
7、给某部分内容加边框
用CSS可以给某部分内容加边框，在DW3中CSS的属性定义对话框（style Definition for .style1)的“Border”定义的就是边框线，“top”“bottom”“left”“right”四边可分别定义线的粗细和颜，这些定义好后不要忘记在下面的“style”中定义线型，否则将看不边框线，因为默认的线型是“none”。下面是一个定义了上边框为：蓝细线；左边框为：绿中粗线的CSS例子：
<style type="text/css">
<!--
.style1 { border: solid; border-width: thin 0px 0px medium; border-color:
#0000FF black black #00FF00}
-->
使用CSS进行格式设置的例子无法在此一一例举，但可以举一反三来完成实际应用过程中需要的设置。
三、CSS使用过程中的问题
1、要保证目前的人们常用的浏览器不会出现浏览器的兼容问题。
2、一定要规范自己的css样式书写的格式和顺序问题。比如常用的我们用CSS来修饰超级链接，使其具有交互表现。一般正常的顺序应该是a:link、a:visited、a:hover、a:active。很多人在定义这个格式时书写顺序总是很随意，但如果不严格按照这个顺序来书写的话，网页浏览时或多或少都将出现问题。
3、不要用一些只有分布浏览器支持的样式。
CSS最早被提议在1994年，最早被浏览器支持在1996年，CSS一直被力捧为传统的以HTML为基础的web代码的继承者。CSS使用样式表来控制整个站点字体和布局的能力，使它看起来非常有效率、易于设计和有远见，它本身所独有的强大优势决定了我们现在就应该学习和开始使用CSS。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论