网页设计类样式表的创建和使用.docVIP

样式表的创建与使用 前面我们已经学习过通过属性面板设置文本属性，实际上Dreamweaver还提供了一个更为科学的方法，就是样式。这种强大的格式化功能，主要分为HTML样式表和CSS样式表两种，可以通过编辑一个或一组样式，来设置一篇甚至多篇文档的内容格式属性。 HTML样式表是通过设置HTML标识符，对段落或选择的文本进行格式化，主要是设置这些文本的字体类型、字体大小、字体颜色及风格等，它只能实现层叠样式表（CSS）的部分功能。 CSS（Cascading Style Sheets）的中文意思为层叠样式表，简称样式表。 CSS可以精确的控制网页里的每一个元素，例如可以控制一个字的前景色、背景色、背景图片等，它可以弥补HTML对网页格式化功能的不足，如段落间距、行距、字体变化和大小、页面格式的动态更新、排版定位等。 HTML是一种标记语言，而CSS是这种标记的一种重要的扩展，或者说CSS是一种用来装饰HTML的标记集合。 1．创建和编辑CSS样式表 （1）CSS样式表的创建 在DreamweaverMX中，有两种方法创建CSS样式表： 方法一： 单击主菜单“文本”→“CSS样式”→“新建CSS样式”，弹出“新建CSS样式”对话框，如图3-1所示。 “新建CSS样式”对话框 在“名称”列表框中输入自已的样式名（保留前面的“句点”，Drcamweaver把样式看做是被修饰的HTML标记的一个属性，当对某个HTML标记应用样式后，“选择状态栏”上被修饰的HTML标记就变成了“标记.样式名”。）样式名必须以英文字母开头，中间不可以有空格或其他标点符号（除“句点”以外）。再选择“定义在”项中的某个单选按钮。 按“确定”按钮后会弹出“CSS样式定义”面板，如图3-2所示。 “aa的CSS样式定义”对话框 在该面板上作相应设置后按“确定”按钮即可完成CSS样式的创建。 方法二： 单击主菜单“窗口”→“CSS样式”弹出面板组，选择“CSS样式”选项卡如图3-3左图所示。单击面板下部的“新建CSS样式” 按钮，弹出如图3-1所示的对话框。或在面板中单击鼠标右键，弹出快捷菜单后选择“新建CSS样式”，同样会弹出如图3-1所示的对话框。 其余步骤同方法一。 “设计”面板上的“CSS样式”选项卡 （2）CSS样式表的编辑 假设已经创建了一个CSS样式名为.aa。 修改样式“.aa”，只要双击如图3-3右图所示面板中的“aa”，或选取“aa”后单击面板下部的按钮，就会弹出“.aa的CSS样式定义”对话框（如图3-2所示）供你修改。 也可以通过菜单“文本”→“CSS样式”→“编辑样式表”，弹出“编辑样式表”对话框，如图3-4所示。单击“编辑”按钮同样可以弹出如图3-2所示的面板，进行修改。 编辑样式表对话框 在如图3-2所示的“CSS样式定义”对话框中，除了图中的类型属性外，还有背景、区块、盒子、边框、列表、定位和扩展等，它们中的每一个类别控制一组样式表元素，最下面的扩展属性中有很多关于网页动态属性和交互性的，可以利用样式定义对话框对相应的参数进行合理的设置和使用。 实例说明类型属性的设置使用： 类型属性对话框如图所示，可以进行CSS样式的字体、大小、样式、行高等设置。其中文字的“粗细”选项中可以使用数值，范围从100到900，必须为整百的数值，正常的粗细为400，最粗为900。 如图3-5左图的一张页面hlx.htm，用浏览器浏览，当选择菜单“查看”→“文字大小”→“最大”可以发现页面因文字放大与原先的布局不同了，如图3-5右图所示。 浏览时中号字和大号字的对比 可以应用CSS样式来解决这个问题。 【例一】应用CSS样式来控制文字，无论浏览器如何调整文字大小，页面都不会改变。 ① 创建样式：用Dreamweaver打开hlx.htm，单击主菜单“文本”→“CSS样式”→“新建CSS样式”，弹出“新建CSS样式”对话框，如图3-6所示。 “新建CSS样式”对话框 ② 设置样式：如图3-141所示，进行相应设置，按“确定”按钮弹出“.d13的CSS样式定义”对话框，如图3-142。字大小：16，行高：1.5倍行高，字颜色：#FF0000（红色），如图3-7所示。 “.d13的CSS样式定义”对话框 一个CSS样式可以同时设置几个属性，这里只设置了“类型”属性。 注意：只有被应用过CSS样式的HTML元素才能按样式要求显示。 ③ 应用样式：选取相应的文字，再单击样式面板“应用样式” 视图下的“d13”样式（见图3-8）,即可将“d13”样式应用到所选择的文字（如图3-9所示）。  应用样式 应用样式后的效果 也可以右击在显示设计视图下部 “选择状态条”上对应的标记font，然后选择“设置类”→“d13”，