用DW4创建CSS

时间：2007-03-22 来源：softiger

五、用DW4创建CSS

1. CSS Styles面板

通过前面几章的学习，相信大家对CSS有了一定的了解，这一章我们来全面讲解如何利用Dreamweaver4来创建及操作CSS。首先运行Dreamweaver4，启动后，选择菜单下的Windows->CSS Styles（或按Shitf+F11），系统弹出CSS Styles管理面板，如下图所示：

在CSS Styles面板里显示了所有自定义的CSS样式（也就是上面提到的以点开头的类选择符，Dreamweaver4把这样以点开头的类选择符作为自定义样式来使用），可以利用Apply按钮这些CSS样式随意应用在页面中的文本或文档区域。
注意：应用按钮前面有一个复选框，选中的时候按钮成灰色不可用，表示自动应用，只要鼠标单击自定的CSS样式就会自动应用到页面中当前元素；如果复选框没有选中，Apply按钮为可用，应用时需要点Apply按钮。当对象应用了自定义样式时，也就相当于在当前HTML标记后加上class=”...”。另外在样式前有一个“S”型的符号，表示内部定义样式；如果是符号，表示这个样式链接到外部样式表文件。

注意：CSS Styles面板只显示自定义（class）CSS 样式；重定义的HTML标记和其他CSS选择符样式不会出现在CSS Styles面板上，这是因为它们可以自动应用于那些HTML标记控制的区域。（重定义HTML标记是指选择符为单个HTML标记的CSS样式，之所以叫重定义是因为重新定义了并改变原来HTML标记的样式。）

在右下角有4个小按钮，这是最常用的几个命令：
Attach Style Sheet：（链接到样式表）点击后会弹出一个选择样式表对话框，选中以前创建好的外部样式表，点确定就链接加入了这个外部样式表。加入外部样式表时注意尽量使用相对路径。
New Style：（新建样式）一般我们通过这个按钮来创建CSS样式表。
Edit Style sheet：（编辑样式表）点击后会弹出编辑样式表对话框，显示了所有已存在的内部和外部样式表，可以在这个对话框里新建、编辑、删除样式。
Delete：（删除样式）先选中要删除的自定义CSS样式，然后点此按钮，样式就被删除了。

点上面的小三角或点击鼠标右键会弹出一个菜单，菜单的功能依次为：
Edit：（编辑）编辑你当前选中的自定义CSS样式，点击后就进入了编辑此项CSS类样式的定义样式对话框。
Duplicate：（复制）将当前选中的自定义CSS样式类复制。
Delete：（删除）删除当前选中的自定义CSS样式，和按钮的效果相同。
Apply：（应用）是指将选中的CSS类应用在页面中当前元素。同Apply按钮。
New Style：（新建样式）等同于按钮。
Edit Style sheet：（编辑样式表）等同于按钮。
Attach Style Sheet：（链接到外部样式表）等同于按钮。
Export Style Sheet：（导出样式表）将此页面中的内部样式表导出为一个外部样式表文件。注意：Dreamweaver4导出样式表除了用这个方法外，还可以用主菜单下的File->Export->Export CSS Styles导出。

2. 创建样式表的类型

在创建样式表之前我们首先介绍一下Dreamweaver4的三种样式表类型，点击CSS Styles面板中的按钮（或CSS Styles面板菜单New Style），弹出新建样式对话框，如下图：

在Define里可以选择是外部样式表，还是内部样式表：
l 选择New Style Sheet File（新建样式表文件），系统会先让你保存这个样式表文件，然后定义这个样式表文件。整个页面的样式就会跟随你建立的这个样式表文件，然后你可以把这个外部样式表文件链接到别的页面去，这样就可以使一个样式表文件控制多个页面了。
l 如果你选择This Document Only（只存在这个文档），你就建立了一个内部样式表，Dreamweaver4会自动把你建立的样式表内容放到<head>区的<style>标记里。

在Type里有三种样式表类型可供选择：
l Make Custon Style (class) ：（创建自定义样式）自定义一个样式，可以作为class属性应用于页面中。
l Redefine HTML Tag：（重定义HTML标记）对指定的 HTML 标记的默认格式进行重新定义。
l Use CSS Selector：（使用CSS选择符）对特定的标签组合，或者包含有指定ID属性的所有标签进行格式定义。

在定义CSS前，我们先要考虑清楚，定义的这个样式将用在哪里？要完成哪些效果？是定义在一个页面里还是控制多个页面的风格？然后根据需求来定义合适的样式表。

3. 创建自定义样式

在页面中，我们有时想让一些重要的文字或内容醒目，我们就需要把这些重要的文字或内容单独定义一个样式，来区别一般文字，我们可以通过创建自定义样式单独对重要内容定义CSS来完成。假设，我们要求把重要文字和内容的颜色定义成红色、并加粗来达到醒目的目的。

单击新建样式，弹出新建对话框，在新建样式对话框里，样式表类型选Make Custon Style (class)，这里我们建立内部样式表，选This Document Only，然后在上面的Name下拉框里输入你定义的样式名称，我们输入“.emphases”按OK，如下图：

注意：自定义样式的名称可以自己随意设定，一般根据其样式效果命名。在名称前必须有点号，如果漏写，系统也会自动帮你补上。

弹出样式定义对话框，在Category（类别）里选Type，然后设置颜色为红色，Weight为bold，按OK，如图：

然后在CSS Styles面板里多了一个名为emphases的自定义样式，这样一个新的样式我们就定义好了：

我们来看一下原代码部分，我们可以看到在<head>区多了下列样式表代码：
<style type="text/css">

</style>

定义好了样式，现在我们就可以把这个自定义样式套用在需要的地方，在网页中选中文字，然后单击样式面板中的emphases样式。看看，是不是你要的效果。
注意：如果我们选中的内容是一个表格或一个段落，那么整个表格或段落内的文字被定义了emphases样式，从原代码里我们可以看出是在<TABLE>或<P>标记后面加了class=”emphases”参数，如：
<TABLE class=”emphases”>
……
或
<P class=”emphases”>
……
当我们把样式加在选中的几个文字上时，文字本身没有HTML标记所包围，就会自动加上<span>标记，例如：
……<span class=”emphases”>重点</span>……
注意：span标记本身没有任何意义，它专门为样式表指定选取范围，为样式表指定区域的还有div。

4. 创建重定义样式表

重定义样式表是对某个HTML标记重新定义格式。例如，我们想重新格式化页面的段落，每个段落前空两格，并设定段落文字的大小和行距。

单击新建样式，弹出新建对话框，在新建样式对话框里，样式表类型选择Redefine HTML Tag，我们仍然建立内部样式表，选This Document Only。当样式表类型选择Redefine HTML Tag时，上面下拉框的名字Name变成了Tag，表示输入的内容是HTML标记，点击下拉按钮，我们可以看到所有HTML标记都在Tag下拉框里，这里我们选段落标记P：

按OK后，进入样式定义对话框，在Type里，我们设定字体大小为12象素，行距为文字尺寸的150%，如下图：

在Block部分里，我们设定文本缩进，因为文字尺寸为12象素，所以两个字的空格就是24象素：

按OK后，这个重定义样式就完成了。这时页面里每个段落的文字大小都是12象素，行距是150%，但是在Dreamweaver编辑器里我们看不到缩进的效果，不要紧，只要将文件保存，然后用浏览器打开就可以看到效果了。此时CSS样式表的原代码是：
<style type="text/css">

</style>

5. 创建动态链接样式表

下面我们来创建一组链接在不同状态下的样式。单击新建样式，弹出新建对话框，在新建样式对话框里，样式表类型选Use CSS Selector，我们仍然建立内部样式表，选This Document Only。当样式表类型选择Use CSS Selector时，上面下拉框的名字变成了Selector，表示输入内容为CSS选择符，单击下拉按钮，可以看到动态链接的4种状态：

a:active 选中超级链接状态
a:hover 光标移上超级链接状态
a:link 超级链接的正常状态，没有任何动作的时候
a:visited 访问过的超级链接状态
接下来我们对这几种状态分别设定，首先，选择a:link，OK后弹出样式定义对话框，我们设定无下划线，颜色为橙色，如下图：

我们用同样的方法设定a:visited，设定无下划线，黄色，如下图：

接下来设定a:hover，有下划线和上划线，颜色为橙色，并在Background设定背景为黄色：

这里我们不对a:active进行设置，根据层叠规则a:active的样式会自动依照a:hover。这样所有动态链接的效果我们就设置好了，注意设置时的顺序。在浏览器中就我们就可以看到：此页面上未访问的链接无下划线，橙色；访问后的链接无下划线，黄色；鼠标指向链接时有上、下划线，橙色，并背景为黄色。样式表原代码为：
<style type="text/css">

</style>

这样定义动态链接时，整个页面的链接效果都会改变，如果我想在一个页面中定义两组以上的链接效果，该怎么做呢？在第四章里我们不是说过的类和伪类的混用可以在同一个页面中做不同的链接效果吗。点击新建样式，在选择符下拉框里，我们输入a.link2:link（当然可以先选择a:link，然后更改），如下图：

这样我们就新建立了一个.link2类，我们为a.link2:link设定样式，红色，有下划线：

根据上面的方法我们继续定义a.link2:visited和a.link2:hover，我们定义a.link2:visited为红色有下划线，a.link2:hover为红色无下划线，背景为白色。在CSS Styles面板里多了一个名称为link2的自定义样式。然后将此样式应用在某个动态链接上。保存后，用浏览器打开，我们可以看到两个完全不同的链接样式。全部CSS代码如下：
<style type="text/css">

</style>

6. 其他样式表的定义

我们还可以在Use CSS Selector里输入其他CSS选择符：
ID选择符，以“#”号开头定义一个样式，例如：“#id-style”，然后建立一个ID为id-style的ID样式，ID样式表必须手动在HTML标记后加id=”id-style”属性。

含HTML标记的类选择符，例如：“p.red”，表示定义段落为red类的样式，此样式只对有class=”red”属性的段落有效果。

包含选择符，是指前一个HTML标记里包含着后一个HTML标记，例如：“div p”，表示定义在DIV里包含段落的样式。

7. 编辑、修改、删除样式表

点CSS Styles面板中的按钮会打开编辑样式表对话框，如下图：

按钮功能介绍：
Link：链接外部样式表，这里可以选择链入外部样式表和导入外部样式表两种方式。
New：新建样式。
Edit：选中一个样式然后点Edit就可以进行编辑。
Duplicate：复制一个样式，选中一个样式后点Duplicate按钮，弹出对话框，为复制的样式起一个新的名称，OK。
Remover：移除一个样式或一个外部样式表，选中要删除的样式点Remove按钮，此样式就被删除了。

在Style definition（样式定义）栏里可以看到此样式的内容。

8. 外部样式表

建立外部样式表和建立内部样式表差不多，只是在新建的时候选择(New Style Sheet File)，并保存为一个扩展名为.css的样式表文件。

现在，我们把刚才实例中的样式表导出，然后再链接到其他页面。点击CSS Style面板菜单中的Export Style Sheet，系统弹出导出样式表对话框，我们将样式表文件保存为mystyle.css。用记事本打开mystyle.css文件可以看到如下样式表代码：
.emphases { font-weight: bold; color: #FF0000}
p { font-size: 12px; line- text-indent: 24px}
a:link { color: #FF9900; text-decoration: none}
a:visited { color: #FFFF00; text-decoration: none}
a:hover { color: #FF9900; text-decoration: underline overline; background-color: #FFFF00}
a.link2:link { color: #FF0000; text-decoration: underline}
a.link2:visited { color: #FF0000; text-decoration: underline}
a.link2:hover { color: #FF0000; text-decoration: none; background-color: #FFFFFF}

然后转到其他页面中，点CSS Style面板中的链入外部样式表按钮，链入刚才导出的样式表文件mystyle.css，此时这个样式表已经应用到新的页面中了。在新页面的<head>区添加了下列代码：
<link rel="stylesheet" href="mystyle.css" type="text/css">

此外，还可以导入外部样式表，导入方法如下：
点击编辑样式表按钮，打开编辑样式表对话框，点击LINK按钮，这时弹出”Link External Style Sheet”对话框，输入外部样式表的路径，选择Import（导入），确定。

可以看到在<head>区的代码为：
<style type="text/css">

</style>