css,就是“层叠样式表”。将css引入到网页中是网页编辑的一大革命吧~通过设置css,我们可以随意地控制网页中字体的大小、颜色等,便于统一网站的整体风格;可以方便地为网页中的各个元素设置背景颜色和图片并进行精确的定位控制;可以为网页中的元素设置各种滤镜,从而产生诸如阴影、辉光、模糊等只有在图象处理软件中才能实现的效果;可以与脚本语言相结核,在网页中实现很多动态滤镜效果。 css的语法 在使用css前,我们先要对css的基本语法有所了解。 第一行和第二行的p、td标签,分别定义了网页中文字和表格中文字的字体、大小和颜色。由于网页中的文字基本上都放置在表格中,所以需要定义表格中的文字属性。 第三行——第六行的a标签,指定的是链接文本的变化控制。 如何将css添加到页面中 在讲解如何编辑css前,我们先来说一下怎么把css添加到页面中,即怎么才能让编辑好的css对页面元素起作用呢? <STYLE type="text/css"> 在DW里,链接css文件的方法是这样的:点击css样式窗口右下角的“编辑样式表”,就可以打开“编辑样式表”窗口,在此窗口单击“链接”,在弹出的链接中“浏览”,选择已经编辑好的css文件就可以了。 |
如果你使用FP来做主页,那么也可以使用类似的方法链接css文件。点击“格式”菜单栏,有一个“样式表链接”选项。选择“添加”,就可以选择css文件。
注意:以下这个问题是在用FP时很容易遇到的!有时候你会发现css无论如何也不会对网页字体起作用。你仔细检查代码,没发现有错啊!怎么回事?问题就出在,FP中有一个对字体进行设置的选项,有普通,1(8磅),2(10磅)……等可选项。如果使用了css,切记把这里的选项选为“普通”。
讲了那么多,大家应该已经初步了解了css的基本代码吧。在Dreamweaver里,有非常方便的css编辑器,即使你对css代码不是很熟悉,也能编辑出css。
在css样式编辑器中点击右下角的“新建样式”按钮,弹出“新建样式对话框”。按图中的设置选择相应的选项,最后“确定”,就会弹出一个对话框,让你定义新建的css文件的文件名和存放位置。
【图5.3】
设置完成后再点击css样式编辑器的“编辑样式表”按钮,就可以看到以下的对话框,1.css就是我们刚才创建的一个新的css文件。这个文件现在还没有内容。
【图5.4】
从最开始我们研究的css代码中我们已经知道,我们常用的要重新定义的css标签是p、td和a。在上面的对话框中选择“新建”。以下的设置就是重新定义p标签,请注意图中的选项设置
【图5.5】
单击确定,我们就打开了css编辑器。这里才是真正的DW的css编辑器:)
以下这个对话框中的设置就是对p标签的设置。通过这个设置,我们定义了网页中文字的字体、大小、颜色和行高。(td标签也是用同样的方法设置。也就是在上面“新建样式”的对话框中将标签改为td就可以了。)重新提一下,p标签是指对网页中元素的设置,td标签是指对表格中元素的设置。
【图5.6】
好了,接下来是很重要的部分,就是如何对超链接风格进行设置。
在“新建样式”对话框中选择 “使用css选择器”,我们可以看到标签里出现四个选择项。
【图5.7】
a:active表示鼠标点击链接时链接风格;
a:hover表示鼠标指向链接但未点击时的链接风格;
a: link表示超链接的文本在链接未被访问时的风格;
a:visited表示链接被访问过后的风格。
链接的风格包括链接文字的颜色、大小、背景颜色等等。四个标签的设置方法完全相同,我们选择其中一个做说明。比如hover标签定义的链接风格是:链接颜色为红色,背景颜色为橙色。