《网页设计与制作》(第二版)电子第四章CSS样式、模板解决方案.pptVIP

CSS样式是“Cascading Style Sheet”的缩写，常被译作“级联样式表”或“层叠样式表”。 其作用主要是控制网页元素风格。通俗地讲，CSS样式表就是针对网页中多处文字都采用同样的属性设置提出的，利用样式表可对页面中经常出现的相同（或相近）属性的对象进行整体属性的设置。 4.1 CSS样式 一.使用CSS样式面板 使用Dreamweaver MX 2004的CSS样式面板可以创建和管理CSS样式。用下面的方法之一可以打开CSS样式面板： （1）选择命令“窗口”→“CSS样式”。 （2）单击“设计”面板上的小三 角形将 “设计”面板展开，选择 面板上的“CSS样式”标签。 （3）使用快捷键“Shift+F11” 二.新建和编辑CSS样式 1.新建CSS样式 2.设置CSS样式定义对话框参数 3.编辑CSS样式表 1.新建CSS样式 新建CSS样式表的具体操作步骤如下： （1）将插入点放在文档中，然后执行以下操作之一打开“新建 CSS 样式”对话框： 在“CSS 样式”面板中，单击面板右下角区域中的“新建 CSS 样式”按钮“ ”； 在文本属性检查器中，从“样式”弹出式菜单中选择“管理样式”，然后在出现的对话框中单击“新建” 。 选择“窗口” →“标签检查器”，然后单击“相关 CSS”选项卡，在“相关 CSS”选项卡中右键单击，然后从上下文菜单中选择“新建规则”； 选择“文本”菜单→“CSS 样式” →“新建(N)…” （2）定义要创建的 CSS 样式的类型： 若要创建可作为 类属性应用于文本范围或文本块的自定义样式，请选择“类（可应用于任何标签）”，然后在“名称”文本框中输入样式名称。 注意：类名称必须以句点开头，并且可以包含任何字母和数字组合（例如，.mycss）。如果没有输入开头的句点，Deamweaver MX 2004将自动输入。 若要重定义特定 HTML 标签的默认格式，请选择“标签（重定义特定标签的外观），然后在“标签”字段中输入一个 HTML 标签，或从弹出式菜单中选择一个标签。 若要为具体某个标签组合或所有包含特定 Id 属性的标签定义格式，请选择“高级”，然后在“选择器”文本框中输入一个或多个 HTML 标签，或从弹出式菜单中选择一个标签。弹出式菜单中提供的选择器（称作伪类选择器）包括 a:active、a:hover、a:link 和 a:visited。 a：active：表示超链接的激活。 a：hover：鼠标停留在超链接上时的状态。 a：link：超链接的正常显示状态。 a：visited：已访问超链接的状态。 （3）在“定义在”域中选择新建CSS样式的位置： 新建样式表文件：选择该项，将创建外部样式表。 仅对该文档：选择该项，将新建的CSS样式嵌入当前文档中。 （4）设置完成后单击“确定”按钮，将打开“保存样式表文件为”对话框，输入文件名称等内容，将样式表保存。 （5）单击“保存”按钮，保存CSS样式文件，并打开CSS样式定义对话框，在该对话框中定义CSS样式 ： （6）在CSS样式定义对话框中设置完成后，单击“确定”按钮，生成CSS样式 。 2．设置“CSS样式定义”对话框参数 （1）定义CSS样式的类型属性 （2）定义CSS样式的背景属性 （3）定义CSS样式的区块属性 （4）定义CSS样式的方框属性 （5）定义CSS样式的边框属性 （6）定义CSS样式的列表属性 （7）定义CSS样式的定位属性 （8）定义CSS样式的扩展属性 （1）定义CSS样式的类型属性 在CSS样式定义对话框中的“分类”列表中选择类型选项，设置CSS样式的“类型”属性。可以设置字体、字大小、风格、颜色及其他效果等属性 （2）定义CSS样式的背景属性 在CSS样式定义对话框中的“分类”列表中选择“背 景”选项，设置CSS样式的“背景”属性，可以设置 背景颜色、背景图像等属性 。 （3）定义CSS样式的区块属性 在CSS样式定义对话框中的“分类”列表中选择“区块”选项，设置CSS样式的“区块”属性，包括单词间距、字母间距、对齐方式、文字缩进等内容。 （4）定义CSS样式的方框属性 在CSS样式定义对话