第10章 使用CSS样式表美化网页
    CSS可以将网页和格式进行分离，提供对页面布局更强的控制能力以及更快的下载速度。在如今的网页制作中，几乎所有精美的网页都用到了CSS。有了CSS控制，网页便会给人一种尝新悦目的感觉。CSS虽然只是一些代码，得到的效果却不同凡响。Dreamweaver 8在CSS功能设计上做了很大的改进。这一章我们就来学习如何在Dreamweaver 8中利用CSS美化网页，提高网页制作的品质。
10.1 CSS快速入门
    CSS是Cascading Style Sheet的缩写，可以翻译为层叠样式表或级联样式表。CSS是一个辅助HTML设计的新特性，能够保持整个HTML的统一外观。使用CSS可以在设置文本之前，制定整个文本的属性，比如颜、字体和大小等，即可获得统一的外观。让我们先来了解一下在Dreamweaver 8中CSS的基本功能吧。
10.1.1 CSS新功能
    如果要在网页中输入代码才能实现CSS的效果，相信很多人都会放弃使用CSS。正是因为
Dreamweaver 8为用户提供了可视化的操作界面，所以受到越来越多人的喜爱。Dreamweaver 8在CSS功能设计方面为使用者带来的方便体现在：【属性】面板、页面属性、【CSS样式】面板和CSS语法提示。下面我们分别讲述：
    1. 【属性】面板
  在Dreamweaver 8【属性】面板中的【样式】选项中，我们可以在设计页面时添加的字体、颜、大小等样式，【样式】选项会将这些格式自动记忆生成“Style1”、“Style2”样式。在下次重复使用可以直接在【样式】选项中套用样式，有了这个功能，我们在做网页设计时可以大大提高工作效率。如图10-1-1所示。
图10-1- 1 【属性】面板中的【样式】选项
    如果套用的CSS样式不是文字，而是表格或者表单，同样可以在【属性】面板中设置CS
S。在【属性】面板中都有一个【类】选项，【类】选项会将我们对表格或表单的格式设置自动记忆生成“Style1”、“Style2”样式。在这里就可以设计表格的CSS样式。
    2. 页面属性
    在Dreamweaver 8的【属性】面板中可以看到一个【页面属性】按钮，单击这个按钮，可以直接打开【页面属性】对话框。在对话框左边的分类中可以看到“外观”、“链接”、“标题”、“标题/编码”和“跟踪图像”选项，选中其中一个选项，在右边出现相应的设置内容。大家可以自己试试看这些选项中各个设置。
    3. 【CSS 样式】面板
    在Dreamweaver 8中界面最右边有一列各种选项面板，其中包括【CSS样式】面板，也可以按Ctrl+F11调出该面板，面板如图10-1-2所示。
图10-1- 2 【CSS样式】面板
    面板下方的一排按钮非常有用。包括了【附加样式表】、【新建CSS规则】、【编辑样式】和【删除CSS规则】。在网页制作过程中，我们经常会用到这些按钮。
    另外，单击【属性】面板上【样式】选项后的【CSS】按钮可以在【CSS样式】面板中查看当前选中样式的摘要，如图10-1-3所示是选中“Style1”时的【CSS样式】面板。html网页设计css
图10-1- 3 【CSS样式】面板的【正在】选项
    4．CSS语法提示
    我们【代码】视图中编辑CSS的时候，只要输入一个CSS的样式名称和冒号，Dreamweaver 8就会自动弹出一个列表，列出该样式可以使用的参数。我们只要在弹出的下拉列表中选择要编辑的CSS样式就可以了，省去自己输入代码的麻烦。如图10-1-4所示。
图10-1- 4 CSS语法提示
10.1.2样式表的引用方式
    从上面的例子中，我们可以看到CSS的语句是内嵌在HTML文档内的。在以往，你可能需要用文本编辑工具来编写。比如Windows下的记事本和写字板或者专门的HTML文本编辑工具等。
    但是在Dreamweaver 8里，我们根本不需要编写任何代码，就能创建CSS样式。那么你可能会问，独立编辑好的CSS文档怎样加入到HTML文档中呢？大体说来有三种方式，一种是外部文件方式；一种是内部文档头方式；另一种是直接插入式。三种方式各有妙用，主要的差别在于它们规定的风格使用的范围不同。下面我们分别讲述：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。