第十八节 CSS样式

css即Cascading Stylesheets，是用于弥补编写网页的html语言的很多不足，使网页格式更容易得到控制。几乎每个网页都要用到css。 本节主要讲css在Dreamweaver中的应用，至于css的细节，请查阅相关的css资料。

点击Launcher面板左起第四个图标，或点击菜单栏的Window/CSS Style，也可直接使用快捷键F7，即弹出css样式面板。

点击css样式面板右下方的 图标，也弹出新建样式对话框。
从新建样式对话框上可看到，用Dreamweaver在页面内定义css有三种方式——Make Custom Style (class)、Redefine HTML Tag和Use CSS Selector。
Make Custom Style (class)是将css样式应用于选定的区域，若要在整个页面的相关区域应用css样式，则需选择Redefine HTML Tag和Use CSS Selector方式。
Make Custom Style (class)比较类似于html样式的设置，用Make Custom Style定义的css样式的使用也比较类似于html样式。
Redefine HTML Tag，是将页面源文件中的html标记重定义。用Redefine HTML Tag定义的css样式设置完毕后，该css样式马上生效。
Use CSS Selector，是将此时的css样式用于特定的html标记组合或ID名。你可从Selector后的下拉选框里选择，选框里有四个选项——a:active、a:hover、a:link和a:visited，分别代表超级链接的激活状态、鼠标移动到超级链接上的状态、超级链接的链接状态和超级链接访问过的状态。你也可直接在选框里填入一些html标记组合。例如填入td p，则这个css样式将用于网页上所有td标记内p标记的作用范围。你还可填入以符号#开头的ID名，例如可填入#abc，则这个css样式将用于网页上所有带有ID=”abc”的html标记的作用范围。

不管选择了哪一种，点击OK按钮，弹出css样式设置对话框。

这个对话框分为八种模式。点击左侧可选取。对话框上前面有符号 * 的项，表示其效果在Dreamweaver窗口中显示不出来，要查看效果需用浏览器预览。
Type模式主要是对文字属性的设置。
Background模式是对背景属性的设置。
Block模式，即区模式，是对某区域内文本的各种空隙大小的设置。
Box模式是容器设置模式。
Border模式即是设置容器边框的属性。Border，或叫边框，也是容器的一个组成部分。微软的Internet Explore不支持边框属性。
List模式是设置列表的属性。
Positioning模式Positioning即定位，是利用css将页面元素精确、方便的放置到网页页面中。Extentions模式是css的一些扩展。其中Page Break和页面打印有关。Cursor是鼠标移动到定义的页面元素上时，鼠标显示的效果。Filter是css滤镜效果。

设置完成后，用Redefine HTML Tag和Use CSS Selector方式建立的css样式马上生效，用Make Custom Style (class)建立的样式要添加后才能生效，设置方法类似于html样式的设置方法。


接下来介绍一下使用外部的css文件。 外部的css文件，即是将css样式定义在一个外部的文件，而不是定义在页面文件内，这样可是很多网页公用同样的样式。建议大家使用css样式时，最好用链接外部css文件的方法，这样能做到网站的风格统一和便于更新。
要制作一个新的外部css文件，点击css面板上的图标，弹出编辑css对话框。

点击编辑css对话框上的Link按钮，即弹出引入外部css文件的对话框。选择一个外部css文件即可。


最后是一个简单的例子。这个css设置很常用。我们要达到这样的效果，使文字大小为9磅，去掉超级链接的下划线，当鼠标移到超级链接时显示下划线。

先通过样式固定文字为最常用的9磅大小。点击新建样式按钮，在弹出的对话框上选择中间的一项，在下拉选框中选择p。点击OK按钮，弹出css属性设置对话框。 Size是字体大小，在后面选择9，单位选择为points，这样就设置字体为9磅。 设置完成后点击OK按钮。 好，现在页面的文字达到了我们要求的效果。 以上是针对p标记的，然后对td、input、li、select等标记重复以上操作。
接下来将去掉超级链接的下划线，并改变其颜色。 点击新建样式按钮，在弹出的对话框上选择中间的一项，在下拉选框中选择a。点击OK按钮，弹出css属性设置对话框。 在decoration后选择none。 再设置一下颜色。 然后点击OK按钮。 这时，页面上的超级链接变成了我们需要的效果。
最后，可以通过设置，使当鼠标移过超级链接时，显示下划线。 点击新建样式按钮，在弹出的对话框上选择下面的一项，在下拉选框中选择a:hover。点击OK按钮，弹出css属性设置对话框。 在decoration后选择under-line。 再设置一下颜色。 然后点击OK按钮。 按下F12键预览这个页面，移动鼠标到超级链接之上，即显示出下划线。