网页设计与制作邬锦霞电子教案 第9章 层叠样式表.pptVIP

第9章 层叠样式表 9.1 CSS 概 述 9.2 创建和编辑CSS样式 9.3 设置CSS样式参数 9.1 CSS 概 述 9.1.1 CSS基本概念 9.1.2 CSS基本语法 9.1.1 CSS基本概念 所谓CSS样式就是层叠样式表，是用来控制一个文档中某一文本区域外观的一组格式属性。CSS样式可以一次性对若干个文档所有的样式进行控制。同HTML样式相比，使用CSS样式表的好处除了在于它可以同时连接多个文档之外，还在于当CSS样式有所更新或被修改以后，所有应用了该样式表的文档都会被自动更新。 CSS样式表的功能一般可以归纳为以下几点： （1）可以更灵活地控制网页中文字的字体、颜色、大小、间距、风格和位置。 （2）可以灵活地设置一段文字的行高、缩进，并可以为其加入三维效果的边框。 9.1.1 CSS基本概念 （3）可以方便地为网页中的任何元素设置不同的背景颜色和背景图像。 （4）可以精确地控制网页中各元素的位置。 （5）可以为网页中各元素设置过滤器，从而产生如阴影、模糊、透明等效果。 （6）可以与脚本语言结合，从而产生各种动态效果。 （7）由于是直接的HTML格式的代码，因此网页打开的速度非常快。 9.1.2 CSS基本语法 样式表的脚本语法结构是： HTML标记{标记属性：属性值；标志属性：属性值；标志属性：属性值；……} 现在首先讨论在HTML页面直接引用样式表的方法。这个方法必须把样式表信息包含在style和/style标记中，为了使样式表在整个页面中产生作用，应把该组标记及内容放到head和/head标记中。 在使用样式表的过程中，经常会有几个标记用到同一个属性，例如规定HTML中凡是粗体字、斜体字、1号标题字均显示为红色，按照上面介绍的方法应该书写为： B{color:red} I{color:red} H1{color:red} 显然这样书写比较麻烦，引进分组的概念就会使其变得非常简单，可以写成：B,I,H1{color:red}，用逗号分隔各个HTML标志，把三行代码合并为一行。此外同一个HTML标记，还可以定义多个属性，例如把H1～H6各级标题定义为红色、黑体字，带下划线，则应写为： H1,H2,H3,H4,H5,H6{color:red;text-decoration:underline; font-family:”黑体”} 9.2 创建和编辑CSS样式 9.2.1 创建自定义CSS样式 9.2.2 动态链接CSS样式 9.2.3 导出CSS文件 9.2.4 导入CSS文件 9.2.5 链接外部CSS样式 9.2.1 创建自定义CSS样式 下面介绍如何创建一个自定义的CSS样式，并将其应用于网页文字的美化，步骤如下： （1）选择菜单命令【文件》新建】，弹出【新建文档】对话框，在此对话框中选择“常规”选项卡，然后选择类别为“基本页”，在右边选项卡中选择“CSS”，单击【确定】按钮，即可创建一个新的CSS样式表文件。 （2）单击【文本】CSS样式】新建】命令，弹出【新建CSS规则】对话框，如图9-1所示。 （3）在【选择器类型】中选择“类（可用于任何标签）”单选按钮。 （4）在【名称】文本框中输入自定义的样式名称，这里输入“.td”。 9.2.1 创建自定义CSS样式 （5）在【定义】中选择“仅对该文档”单选按钮，如图9-1所示。 （6）单击【确定】按钮，弹出【.td的CSS规则定义】对话框，如图9-2所示。 （7）在【分类】列表中选择“类型”选项，右边显示对应的参数设置 。 （8）在“字体”列表中单击“编辑字体列表”选项，如图9-3所示。 （9）打开【编辑字体列表】对话框，在【可用字体】列表中点击【新宋体】选项，然后将其加入到【选择的字体】列表中，如图9-4所示。 （10）单击【确定】按钮返回【.td的CSS规则定义】对话框。 9.2.1 创建自定义CSS样式 （11）设置字体为【新宋体】，大小为12像素，颜色设置为#CCCCCC，如图9-5所示。 （12）单击【确定】按钮，完成对CSS样式的创建，此时在【CSS样式】面板中会出现一个名为.td的自定义样式，如图9-6所示。 （13）在网页中选定一段要应用样式的文字，如图9-7所示。 （14）在【属性】面板的【样式】下拉列表中单击【td】选项，为文字应用自定义的样式，如图9-8所示。 （15）保存后浏览的效果如图9-9所示。 9.2.2 动态链接CSS样式 应用动态链接CSS样式，可以美化页面文字的链接效果。具体的操作步骤如下： （1）定义超链接的HTML标签。 （2）单击【文本》CSS样式》新建】选项，打开【新建CSS规则】对话框。 （3）在【选择器类型】中选择【标签（重新定义特定标签的外观）】单选按钮。