使用css样式表美化网页

《使用css样式表美化网页》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第10章使用CSS样式表美化网页CSS可以将网页和格式进行分离，提供对页面布局更强的控制能力以及更快的下载速度。在如今的网页制作中，几乎所有精美的网页都用到了CSS。有了CSS控制，网页便会给人一种尝新悦目的感觉。CSS虽然只是一些代码，得到的效果却不同凡响。Dreamweaver8在CSS功能设计上做了很大的改进。这一章我们就来学习如何在Dreamweaver8中利用CSS美化网页，提高网页制作的品质。10.1CSS快速入门CSS是CascadingStyleSheet的缩写，可以翻译为层叠样式表或级联样式表。CSS是一个辅助HTML设计的新特性，能够保持

2、整个HTML的统一外观。使用CSS可以在设置文本之前，制定整个文本的属性，比如颜色、字体和大小等，即可获得统一的外观。让我们先来了解一下在Dreamweaver8中CSS的基本功能吧。10.1.1CSS新功能如果要在网页中输入代码才能实现CSS的效果，相信很多人都会放弃使用CSS。正是因为Dreamweaver8为用户提供了可视化的操作界面，所以受到越来越多人的喜爱。Dreamweaver8在CSS功能设计方面为使用者带来的方便体现在：【属性】面板、页面属性、【CSS样式】面板和CSS语法提示。下面我们分别讲述：1.【属性】面板　　在Dreamweaver8

3、【属性】面板中的【样式】选项中，我们可以在设计页面时添加的字体、颜色、大小等样式，【样式】选项会将这些格式自动记忆生成“Style1”、“Style2”样式。在下次重复使用可以直接在【样式】选项中套用样式，有了这个功能，我们在做网页设计时可以大大提高工作效率。如图10-1-1所示。图10-1-1【属性】面板中的【样式】选项如果套用的CSS样式不是文字，而是表格或者表单，同样可以在【属性】面板中设置CSS。在【属性】面板中都有一个【类】选项，【类】选项会将我们对表格或表单的格式设置自动记忆生成“Style1”、“Style2”样式。在这里就可以设计表格的CSS

4、样式。2.页面属性在Dreamweaver8的【属性】面板中可以看到一个【页面属性】按钮，单击这个按钮，可以直接打开【页面属性】对话框。在对话框左边的分类中可以看到“外观”、“链接”、“标题”、“标题/编码”和“跟踪图像”选项，选中其中一个选项，在右边出现相应的设置内容。大家可以自己试试看这些选项中各个设置。3.【CSS样式】面板在Dreamweaver8中界面最右边有一列各种选项面板，其中包括【CSS样式】面板，也可以按Ctrl+F11调出该面板，面板如图10-1-2所示。-283-图10-1-2【CSS样式】面板面板下方的一排按钮非常有用。包括了【附加样

5、式表】、【新建CSS规则】、【编辑样式】和【删除CSS规则】。在网页制作过程中，我们经常会用到这些按钮。另外，单击【属性】面板上【样式】选项后的【CSS】按钮可以在【CSS样式】面板中查看当前选中样式的摘要，如图10-1-3所示是选中“Style1”时的【CSS样式】面板。图10-1-3【CSS样式】面板的【正在】选项4．CSS语法提示我们【代码】视图中编辑CSS的时候，只要输入一个CSS的样式名称和冒号，Dreamweaver8就会自动弹出一个列表，列出该样式可以使用的参数。我们只要在弹出的下拉列表中选择要编辑的CSS样式就可以了，省去自己输入代码的麻烦。

6、如图10-1-4所示。-283-图10-1-4CSS语法提示10.1.2样式表的引用方式从上面的例子中，我们可以看到CSS的语句是内嵌在HTML文档内的。在以往，你可能需要用文本编辑工具来编写。比如Windows下的记事本和写字板或者专门的HTML文本编辑工具等。但是在Dreamweaver8里，我们根本不需要编写任何代码，就能创建CSS样式。那么你可能会问，独立编辑好的CSS文档怎样加入到HTML文档中呢？大体说来有三种方式，一种是外部文件方式；一种是内部文档头方式；另一种是直接插入式。三种方式各有妙用，主要的差别在于它们规定的风格使用的范围不同。下面我们

7、分别讲述：1.外部文件方式外部文件方式即将CSS写成一个文件的方式，在HTML文档头通过文件引用来进行风格控制。在Dreamweaver8下创建CSS文件比较简单。你可以选择菜单【文件】

8、【新建】命令，在弹出的【新建文档】对话框中选择【类别】为“CSS样式表”，如图10-1-5所示。-283-图10-1-5在【新建文档】对话框中选择“CSS样式表”类别如图10-1-6所示是已经编辑好的一个CSS样式表。图10-1-6CSS样式表文件究竟该如何引用外部CSS样式表呢？例如，我们要在index.html网页中引用这个样式表文件（style.css）。以前，我们都

9、是在HTML的标志之间写下列代码：