CSS——层叠样式表的使用已经变得越来越普及,常见的样式表使用方法有三种:内部样式表文件、外部链接样式表、内部嵌入样式表。关于样式表的优越意义和详细用法以及具体的设置参数不是短短的一篇文章可以说清的。早期创建CSS需要有专门的知识,需要直接编写样式表文件。如今,Dreamweaver使得这项工作可以在一个统一的界面中进行,通过简单的操作即可完成创建、修改、添加等样式表功能,这些设置可以影响到任何事物,从普通的文本布局到复杂的多媒体文件控制。你将会发现通过修改一个单一的外部样式表文件,可以迅速的改变整个站点的外观。今天我们不准备详细讨论所有样式表的具体参数和知识,我们只想给大家介绍在Dreamweaver中使用样式面板直接创建样式表文件的方法。
一、对样式表的操作途径可以有以下三种:
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)1、 从下拉菜单Window—CSS Styles打开样式面板。
2、 从下拉菜单Text—CSS Styles启动样式表对话框。
3、 在页面空白处点击鼠标右键启动样式表对话框。
不管如何启动上述几个样式菜单或面板,他们都包含相同的几个命令:新建样式表、编辑样式表、链接样式表和导出样式表。下面我们来详细介绍样式的定义。
二、 定义样式表选项。
启动新建样式表后会打开如图四所示的对话框:
(一)首先看一下Define选项
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)1、 New Style Sheet File:此选项将会把你设定的样式最终保存在一个外部单独的样式表文件中,这个样式表文件可以被其他文件共同使用,也就是说你可以使站点内的所有文件使用同一个样式表文件。
2、 This Document Only:此选项将会把你设定的样式仅仅放在当前文件的头文件中,这些样式只能在此文件中使用。
(二)另一个选项是Type:在这里选择将要创建的样式的类型,包括:
1、 Make Custom Style(定制自己的样式类别):选择此类型后,需要在上方的Name中填入一个样式名字,需要注意的是,此类名称必须以“.”开头。这种方式定义的样式我们可以把它附给绝大多数的HTML对象,这样可以使这些对象有统一的外观。如图五我们创建一个myStyle的样式:
因为上面我们选择的是定义一个外部样式表文件,所以点击OK后打开保存文件的对话框:
选择你的目录和文件名,保存后进入样式设置对话框
这里我们定义了一个字型为宋体,字体大小为12pt,行高为20pt,色彩为深绿色,并带有下化线的样式。
2、 Redefine HTML Tag(重新定义HTML标识):选择此选项后从上方的Name下拉框里选择需要重新定义的HTML标识。这个选项将使得文件中具有统一标签的所有内容使用相同的外观。例如使所有的段落起始位置缩进两个字可以按照下面的方法重新定义p标签
文字的大小等定义同上面的方法,而段落首行缩紧可以按图所示定义:
需要注意的是,如果你的字体定义的为10pt,则这里的首行缩进可以定义为20pt既两个中文字。由于所有的相同类型标签使用的样式相同,所以这种方式适合于大量的相同元素的样式定义,例如对网页中所有的段落统一字体、颜色、大小、行距、段首缩进。
3、 Use CSS Selector(使用CSS选择器):这个选项的功能是可以设定链接文本的样式