In W3C
Web Standards Way
Job is Good

在Dreamweaver中使用CSS样式表 part 1

原作者:狐狸糊涂

这文章是为初学者而作, Dreamweaver使得操作CSS这项工作 变的简单 即使喜欢图形 不喜欢文字 程序代码的人也可以学会, 但越多学习 就会发现越深奥, 其实CSS不就是这样 它入门容易, 但你要控制它 明白它, 却不是那么容易 特别在各种状况 各种浏览器, 你会发现各种奇怪现象 各种臭虫, 而国外也发展出各种治虫方法, 想要学会控制CSS 你要付上代价: 投资大量时间 若能阅读国外网站文章是最好,但投资是值得的, 当你继续阅读以后的文章 就会得到证实。

一、使用Dreamweaver操作CSS样式表 的途径 可以有 以下方法:

1, 从下拉菜单 Window / CSS Styles 打开 样式面板



启动CSS样式表对话框(中英对照 only here)


2、 在页面空白处 点击鼠标右键 启动样式表对话框

下面我们来详细介绍 样式的定义:

启动新建样式表后 会打开如图所示的对话框

首先看一下Define(定义在)选项

1、 New Style Sheet File:此选项将会把你设定的样式最终保存在一个外部样式表文件中,这个样式表文件可以被其他文件共同使用,也就是说你可以使 站点内 的所有文件 可以使用同一个样式表文件。

2、 This Document Only 只有此文件:此选项将会把你设定的 样式仅仅放在当前文件的 内部样式表文件,这些样式只能在此文件中使用。This Document Only常是专家的作法, 先放在<head>方便修改, 网页完成后 再汇出至外部 作成连结, CSS汇出至外部方法


另一个选项是Type:在这里选择将要创建的样式的类型 包括:

1、 Make Custom Style(定制自己的样式类别):选择此类型后,需要在上方的Name中填入一个样式名字,需要注意的是,此类名称必须以 “ . ” 开头。这种方式定义的样式 在一HTML文件中可重复使用。如图我们创建一个 .myStyle的样式

此类称为 Class 与此相对称为 Id 在一HTML文件中只能使用一次, 如: 商标, 上一页, 下一页 属于 绝对位置position: absolute, 不过你若故意要使用多次 浏览器不会因你 气炸。


因为上面我们选择的是 定义一个 外部样式表文件,所以 点击 OK 后 打开保存文件的对话框:

选择你的目录和文件名,保存后进入样式设置对话框

这里我们定义了一个字型为 宋体,字体大小为12pt,行高为20pt,色彩为深绿色,并带有 下化线的样式。

字体大小em比pt,px好, 点击进入有更详尽的解说



2、 Redefine HTML Tag(重新定义HTML标识):选择此选项后从上方的Name下拉框里选择需要重新定义的HTML标识。这个选项将使得文件中具有 统一标签的所有内容 使用相同的外观。例如 图片 超连结会出现恼人的蓝色外框, 解决方法是在代码中加入,<img src="......gif" border="0" /> 或定义CSS :

按照上图步骤 1 2 3 4 click OK就可以看到下图

点选 边框, 宽度设为 0 px

在分割状态就可以看到代码border: 0px 則此文件中所有图片都无外框


3、进阶 Use CSS Selector使用CSS选择器(下图 点击 步骤 1)

点击 步骤 2

就会看到 3   这个选项的功能 是可以设定 <a>链接的样式



此文件的设定
a:link {
color: #663300;咖啡色
text-decoration: none;/* inheritance so just set once */
}
a:visited {
color: #663333;深咖啡色
}
a:hover {
color: #FFCC66;淡咖啡色
}
a:active {
color: #A5978D;灰色
}

在Selector下拉列表中内定了四个选项:

  1. a:link ——定义了链接文字的样式。
  2. a:visited ——浏览者已经访问过的链接样式。
  3. a:hover ——定义了鼠标悬浮在链接文字上时的样式。
  4. a:active ——定义链接被激活时的样式,即鼠标已经点击了链接,但页面还没有跳转时。

请按照次序 1 2 3 4 否则 你会有麻烦