网上科普有关“在Dreamweaver中编写CSS需要掌握的技巧 ”话题很是火热 ，小编也是针对在Dreamweaver中编写CSS需要掌握的技巧寻找了一些与之相关的一些信息进行分析
，如果能碰巧解决你现在面临的问题，希望能够帮助到您。

由于“可视化
”和操作简便 ，在DreamWeaver中编写CSS的朋友很多，今天我们介绍一些在Dreamweaver中编写CSS的“最佳习惯”
，希望对大家有所帮助 。

CSS正在改变网站设计的进程
。为迎合不断增长的倾向于CSS的设计人员的需求，Macromedia DW MX引进了一些新的及改善过的CSS相关的特性。有了这些新的特性 ，你可以为未来的更新作好计划
，开发与W3C标准更加兼容的站点 。本文讨论在DW MX中使用CSS以及突出某一特定CSS特性时的一些建议。

一般地讲，样式表(style sheet)就是控制网页内容外观的格式化的规则的集合
。可以以三种不同的方式在你的页面中使用CSS：

代码式(Inline)：写入到代码中的一次性的样式。

内嵌式(Embedded)：可控制一个页面中所有元素的样式表

外联式(External)：可控制许多页面中的元素的样式表

事实上 ，许多站点都根据需要把这三种方式结合起来使用 。

在使用CSS时一个需要重点考虑的事实是不同的浏览器以及同一浏览器的不同版本以不同的方式来解析CSS
。除了网络浏览器的差异之外
，你还要意识到还有很多其他的浏览器，比如听力浏览器 ，基于电视的浏览器以及Palm pilot和TTY(teletypewriter
，远程打字机)一类的手持设备。

最佳习惯是指什么?

大多数技术都有自己约定俗成的标准 。CSS也不例外
。虽然并非网络上存在的所有CSS都很规范，但按照现有标准来使用CSS却还是不无裨益的。一般来说 ，开发人员应尽可能将内容与报告分离开来 。这样做的好处在于：

1、增加站点的寿命

不规范的样式表可能在当时觉得很方便
，但新版本的浏览器出来以后，很可能就会出现兼容性问题
。到时逐页修改站点就是一项非常费时的工作同时也使使用CSS失去了意义。

2 、让你的站点对所有的用户以及浏览器都适用

有些地方的政府已经立法要求网站必须让残障人士也同样可以浏览 。为残障认识设计的浏览设备 ，比如听力浏览器，对CSS规范性要求极其严格
。

3
、让站点更新和维护更加轻松

使用方式得当的话
，CSS可让你在一个页面中的调整快速应用到所有页面中去。

你首先要做的选择是使用哪一种样式表 。当涉及到最佳习惯时，对不同样式表的分析如下：

Inline CSS：简单地说 ，你应该尽量避免使用。除了一些其他的缺点之外
，使用Inline CSS意味着你并没有利用到CSS的真正优点，即你并没有将内容与格式分离开
。DW MX使用Inline CSS主要是为了定位页面元素(这些元素在DW MX的用户界面中称为“层(layer) ”) ，或者为了使用某个DHTML特效
，它需要使用Inline 样式的javascript来改变一个对象的属性。

Embedded CSS：它也不是最理想的，因为它只能对当前页面施加影响 。在更新的过程中 ，如果某一个页面丢失
，将会使站点的风格不一致;另外，当用户浏览你的站点时 ，每一页都要下载一次样式表信息
。

External CSS：这是你的第一选择。External CSS可以让所有连接到它的页面保持一致的外观风格;提纲挈领
，更改一次，轻松更新所有相关页面;让你的页面体积更小 ，浏览速度更快 。其他的一些最佳习惯将在下文分析具体的CSS特性时提及
。

在DW MX中创建CSS样式表

在DW MX中创建CSS样式表时(Text 》CSS Style 》New style sheet)，在弹出的对话框中
，你有两个选择：新样式表文档(New Style Sheet File) 和只用于当前页(This Document Only)。选中“New Style Sheet File ”你就开始了创建External CSS的过程 。这个选项要求你在真正的创建过程之前先命名样式表并为它选定一个保存位置;另外一个选项，This Document Only ，则会直接把相关代码写入到页面的部分
。

你也可以在“新样式(New style)
”对话框中选择一个现存的样式表来编辑或添加新的定义。

应该连接到External CSS还是导入?

创建外部样式表以后
，你需要把它附加在每个页面上(或是模板) 。要这样做，可以在CSS面板上淡季“附加样式表(Attach Style Sheet)”按纽 ，此时会弹出连接外部样式表 (Link External Style Sheet)对话框
，在上面可以浏览到你的目标样式表的名字，找到以后 ，你可以选择连接(link) 或者导入(import )此外部样式表
。

连接是最常用的方式
，选择“link ”即可把样式表连接到页面。它会在你的页面中加入下面的标记：

所有支持CSS的浏览器都支持连接选项 。如果你想一些比较旧的浏览器(比如Netscape 4.x)也能“看到
”这个样式表的话，就要采用下面的方法。

如果你选择“导入”选项 ，所用的标记为：

NetSscape4会完全忽略导入的CSS
，而按照连接的CSS来解释页面
。这样我们就可以放心使用CSS中的新功能，不必担心浏览器的兼容性问题了。

CSS属性检查器

在DW MX的属性检查器中可以轻易切换到CSS模式 。缺省情况下 ，属性检查器会显示原始的HTML模式下字体标签
。点击字体下拉菜单旁边的小“A ”，你就可以看到目前可用的CSS样式表
，而不是字体标签列表。

同时，你也可以轻松切回到HTML模式 。

现成的CSS样式表

DW MX中一个令人激动的CSS特性就是它包含了已制作好的CSS样式表
。CSS的新用户可以先体验一下。选择File

New ，在弹出的新文档对话框中选择选中CSS style sheets
，在右边的方框中会出现所有可用的CSS列表 。为了实践我们所说的最佳习惯，选择一个标记为“Accessible
”的
。

将文档保存在站点文件夹内 ，然后就可以用上述的方法来把CSS附加在你的文档中了。

设计时间样式表(Design Time style sheets)

DW MX的这一特性可以让你在设计视图下工作时将样式表应用到页面
，让你对站点的外观有一个更直观的认识 。设计时间样式表将不会出现在站点内
。从我们的最佳习惯的观点来讲，这一特性是非常有用的。如果你使用同时导入和连接两种方式(如上所述) ，附加设计时间样式表可以让你使用其中的任何一个来开发站点 。当你想看在另一个样式表下页面外观如何时
，你可以轻松更改为另一个样式表。

对于要将CSS应用于服务器端(比如ASP, PHP, or ColdFusion)或是要在客户端通过javascript来存取的开发者来说，设计时间样式表同样有用
。服务器端样式表也是处理客户端浏览器对CSS支持不好的又一种方式。但在以前版本的DW中 ，这种方式却不能让你在设计阶段查看CSS的实际效果 。设计时间样式表让你实时查看样式表效果
，所以你可在DW MX中以可视界面工作
。另外一个好处就是当你上传站点文件时，你不必再检查整个站点寻找冗余的样式表了。

验证

无论你是自己创建样式表还是编辑现有的样式表 ，验证可以确保你不会误用不标准的标签或错误的代码 。DW MX本身不包含CSS验证程序，你可以使用W3C站点提供的验证服务
。在DW MX内你可以验证HTML 或DHTML标签( File

Check Page

Validate Markup (for HTML) 或 File

Check Page

Validate as XML for XHTML.)。在开发基于CSS的站点时
，DW MX提供了很多辅助工具 。有了MW MX的帮助，再加上对CSS良好的理解 ，你就可以开发出能经受时间考验的站点了
。

CSS是Cascading style Sheets的简称
，中文译作“层叠样式表单”，我把它叫作“层叠样式表 ” ，我感到这样顺口一

点
，没别的意思。实际上它是一组样式 。你可能对CSS这个名词比较陌生，实际上无论你用Internet Explorer还是

Netscape Navigator在网上冲浪 ，几乎随时都在与CSS打交道
，在网上没有使用过CSS的网页可能不好找
。不管你用什么工

具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼 ，为什么同样内容的网页
，有的人做出来有

几十KB，而高手做出来只有十几KB ，CSS在其中的作用是不言而喻的 。我把我在使用CSS中的一些小经验以及一些网友来信

提问的问题整理出来，供诸位参考。

1、CSS在网页制作中一般有三种方式的用法
，那么具体在使用时该采用哪种用法？

当有多个网页要用到的CSS，采用外连CSS文件的方式 ，这样网页的代码大大减少
，修改起来非常方便；只在单个网页

中使用的CSS，采用文档头部方式；只有在一个网页一 、两个地方才用到的CSS ，采用行内插入方式
。

2、CSS的三种用法在一个网页中要以混用吗？

三种用法可以混用
，且不会造成混乱。这就是它为什么称之为“层叠样式表
”的原因，浏览器在显示网页时是这样处

理的：先检查有没有行内插入式CSS ，有就执行了
，针对本句的其它CSS就不去管它了；其次检查头部方式的CSS，有就执行

了；在前两者都没有的情况下再检查外连文件方式的CSS 。因此可看出 ，三种CSS的执行优先级是：行内插入式
、头部方

式、外连文件方式
。

3 、在Dreamweaver3中如何使外部文件式CSS？

在Dreamweaver3中使用外连文件式CSS并没有特殊要求
，同样是用记事本创建一个*.css文件，在网页的<head>与

</head>之间加上一句这样的代码：<link rel="stylesheet" href="在这里填上你的CSS文件地址（相对路径+文件

名）" type="text/css"> 就行了。

4
、如何用Dreamweaver3快速创建CSS外连式文件？

对于一个初接触CSS的网页设计人员来讲 ，要用记事之类的编辑器，去创建一个CSS外连式文件是相当困难的 。由于

Dreamweaver3对CSS支持的很好
，用它来帮助就轻松多了
。具体可以这样操作：

1）先在纸上写好在网站的网页中可能要用到的格名称，然后在Dreamweaver3的编辑窗中调出CSS面板 ，一个一个地定

义
，并在一个空白页上适当地写一点相关内容，边定义边试用 ，效果不满意
，立即修改；

2）全部定义好后，再用记事本创建一个空的CSS外连式文件 ，把在<head>与</head>之间的那段定义好的CSS复制

到CSS文件中去
，就大功告成了。整个过程就是点鼠标，方便吧？

5、在Dreamweaver3中采用行内插入式CSS要手动写代码吗？

不用！先用CSS面板定义好要用的CSS ，然后
，在要插入CSS的标记插入：，再把你刚才定义的CSS从<head>

后面拖到这个双引号中来 ，把花括号以外的部分删去就行了 。

6 、在方档头部方式和外连文件方式的CSS中都有“<!--”和“--> ”，好象没什么用
，不要可以吗？

这一对东东的作用是为了不引起低版本浏览器的错误
。如果某个执行此页面的浏览器不支持CSS，它将忽略其中的内

容。虽然现在使用不支持CSS浏览器的人已很少了 ，由于互联网上几乎什么可能都会发生
，所以还是留着为妙 。

7
、如何给一部分文字加背景色？

给文字加上不同颜色，在DW3中只要在属性面板上选取文字的颜色就行了 ，非常方便
，但要给部分文字加不同的背景色

却没有相应的功能，我们可以先做一个定义背景色的CSS（如：bgstyle） ，在DW3中点几下鼠就完成了
。如一个定义淡**

背景的CSS是这样的：

<style type="text/css">

<!--

.bgstyle { background: #FFFFCC}

-->

</style>

在要用时选取那段文字
，再在CSS面板上点一下“bgstyle
”就行了。

8、如何给部分文字加背景图像？

与加背景色操作类似，中是在背景在选择加载图象就是了 ，一个定义好的加背景图象的CSS例子的代码是这样的：

<style type="text/css">

<!--

.imgbgstyle { background-image: url(/logo.gif)}

-->

</style>

在要用时选取那段文字
，再在CSS面板上点一下“imgbgstyle”就行了 。

9 、如何使页面的背景在文字“滚动 ”时背景图案静止不动？

要使背景图案不随文字“滚动”的CSS是这样的：

<style type="text/css">

<!--

BODY { background: purple url(/bg.jpg);

background-repeat:repeat-y;

background-attachment:fixed

}

-->

</style>

10
、如何定义字间距？

在DW3中CSS的属性定义对话框（style Definition for .style1)的“Block
”上的“letter spaceing”属性定义的就

是字间距，它指的是每一个字符之间的额外间距 ，经长度为单位，正负值均可
，当取负值时产生字符挤在一起的效果。下

面代码是一个定义好的字间距CSS例子：

<style type="text/css">

<!--

.style1 { letter-spacing: 3px}

-->

</style>

11、如何给文字加上划线 、下划线
、删除线和闪烁？

在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”

定义的是文字闪烁。

12、如何使网页具有“首行缩进 ”功能？

由于DW3输入空格不方便
，利用“首行缩进
”将弥补这个不足 。在DW3中CSS的属性定义对话框（style Definition

for .style1)的“Block”上的“text-indent ”属性定义的就是“首行缩进
”，所谓“首行”是指每段内容的第一行 ，也

就是直接按回车键就形成了一个新的段落
。缩进最好以“em ”（字符）为单位
，比如：汉字编排要求每段开始缩进两个汉

字，设置好的CSS如下所示：

<style type="text/css">

<!--

.style1 { text-indent: 2em}

-->

</style>

在DW3要注意：在DW3中CSS的属性定义对话框（style Definition for .style1)的“Block”上的“text-indent
”右

面的缩进单位选择框中“ems”指的就是“em ”。

13 、在用表格进行排版时 ，能使某一方向上的内容离开表格线一点吗？

可以！在DW3中CSS的属性定义对话框（style Definition for .style1)的“Box
”上的“margin”定义的就是内容离

开边缘的距离
，分别可定义四个方向：“top ”“bottom
”“left”“right ” 。下面就是定义在左边离开“10px
”的CSS例

子代码：

<style type="text/css">

<!--

.style1 { margin: 0px 0px 0px 10px}

-->

</style>

14、能给某部分内容加边框吗？

用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}

-->

关于“在Dreamweaver中编写CSS需要掌握的技巧”这个话题的介绍，今天小编就给大家分享完了
，如果对你有所帮助请保持对本站的关注！