网页设计与制作教学课件邬锦霞第9章 层叠样式表.ppt

《网页设计与制作教学课件邬锦霞第9章 层叠样式表.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第9章层叠样式表9.1CSS概述9.2创建和编辑CSS样式9.3设置CSS样式参数9.1CSS概述9.1.1CSS基本概念9.1.2CSS基本语法9.1.1CSS基本概念所谓CSS样式就是层叠样式表，是用来控制一个文档中某一文本区域外观的一组格式属性。CSS样式可以一次性对若干个文档所有的样式进行控制。同HTML样式相比，使用CSS样式表的好处除了在于它可以同时连接多个文档之外，还在于当CSS样式有所更新或被修改以后，所有应用了该样式表的文档都会被自动更新。CSS样式表的功能一般可以归纳为以下几点：（1）可以更灵活地控制网页中文字

2、的字体、颜色、大小、间距、风格和位置。（2）可以灵活地设置一段文字的行高、缩进，并可以为其加入三维效果的边框。9.1.1CSS基本概念（3）可以方便地为网页中的任何元素设置不同的背景颜色和背景图像。（4）可以精确地控制网页中各元素的位置。（5）可以为网页中各元素设置过滤器，从而产生如阴影、模糊、透明等效果。（6）可以与脚本语言结合，从而产生各种动态效果。（7）由于是直接的HTML格式的代码，因此网页打开的速度非常快。9.1.2CSS基本语法样式表的脚本语法结构是：HTML标记{标记属性：属性值；标志属性：属性值；标志属性：属性值；

3、……}现在首先讨论在HTML页面直接引用样式表的方法。这个方法必须把样式表信息包含在标记中，为了使样式表在整个页面中产生作用，应把该组标记及内容放到和标记中。在使用样式表的过程中，经常会有几个标记用到同一个属性，例如规定HTML中凡是粗体字、斜体字、1号标题字均显示为红色，按照上面介绍的方法应该书写为：B{color:red}I{color:red}H1{color:red}显然这样书写比较麻烦，引进分组的概念就会使其变得非常简单，可以写成：B,I,H1{color:red

4、}，用逗号分隔各个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样式，并

5、将其应用于网页文字的美化，步骤如下：（1）选择菜单命令【文件》新建】，弹出【新建文档】对话框，在此对话框中选择“常规”选项卡，然后选择类别为“基本页”，在右边选项卡中选择“CSS”，单击【确定】按钮，即可创建一个新的CSS样式表文件。（2）单击【文本】CSS样式】新建】命令，弹出【新建CSS规则】对话框，如图9-1所示。（3）在【选择器类型】中选择“类（可用于任何标签）”单选按钮。（4）在【名称】文本框中输入自定义的样式名称，这里输入“.td”。9.2.1创建自定义CSS样式（5）在【定义】中选择“仅对该文档”单选按钮，如图9-1

6、所示。（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）单击【确定

7、】按钮，完成对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）在【选择器类型】中选

8、择【标签（重新定义特定标签的外观）】单选按钮。（4）在【标签】下拉列表中选择【a】选项，因为超链接都在标签内。（5）在【定义在】中选择【仅对该文档】单选按钮，如图9-10所示。6）单击【确定】按钮，打开【a的CSS规则定义】对话框。9.2.2