网页设计与制作 邬锦霞 第9章 层叠样式表

网页设计与制作 邬锦霞 第9章 层叠样式表

ID:40339323

大小:492.50 KB

页数:27页

时间:2019-07-31

网页设计与制作 邬锦霞 第9章 层叠样式表_第1页
网页设计与制作 邬锦霞 第9章 层叠样式表_第2页
网页设计与制作 邬锦霞 第9章 层叠样式表_第3页
网页设计与制作 邬锦霞 第9章 层叠样式表_第4页
网页设计与制作 邬锦霞 第9章 层叠样式表_第5页
资源描述:

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

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标记{标记属性:属性值;标志属性:属性值;标志属性:属性值;……}现在首先讨论在HTML页面直接引用样式表的方法。这个方法必须把样式表信息包

3、含在标记中,为了使样式表在整个页面中产生作用,应把该组标记及内容放到和标记中。在使用样式表的过程中,经常会有几个标记用到同一个属性,例如规定HTML中凡是粗体字、斜体字、1号标题字均显示为红色,按照上面介绍的方法应该书写为:B{color:red}I{color:red}H1{color:red}显然这样书写比较麻烦,引进分组的概念就会使其变得非常简单,可以写成:B,I,H1{color:red},用逗号分隔各个HTML标志,把三行代码合并为一行。此外同一个HTML标记,还可以定义多个属性,例如把H1~H6各级标

4、题定义为红色、黑体字,带下划线,则应写为: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)选择菜单命令【文件》新建】,弹出【新建文档】对话框,在此对话框中选择“常规”选项卡,然后选择类别为“基本页”,在右边选

5、项卡中选择“CSS”,单击【确定】按钮,即可创建一个新的CSS样式表文件。(2)单击【文本】CSS样式】新建】命令,弹出【新建CSS规则】对话框,如图9-1所示。(3)在【选择器类型】中选择“类(可用于任何标签)”单选按钮。(4)在【名称】文本框中输入自定义的样式名称,这里输入“.td”。9.2.1创建自定义CSS样式(5)在【定义】中选择“仅对该文档”单选按钮,如图9-1所示。(6)单击【确定】按钮,弹出【.td的CSS规则定义】对话框,如图9-2所示。(7)在【分类】列表中选择“类型”选项,右边显示对应的参数设置。(8)在“字体”列表中单击“编辑字体列表”选项,如图

6、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】选项,为文字应用自定

7、义的样式,如图9-8所示。(15)保存后浏览的效果如图9-9所示。9.2.2动态链接CSS样式应用动态链接CSS样式,可以美化页面文字的链接效果。具体的操作步骤如下:(1)定义超链接的HTML标签。(2)单击【文本》CSS样式》新建】选项,打开【新建CSS规则】对话框。(3)在【选择器类型】中选择【标签(重新定义特定标签的外观)】单选按钮。(4)在【标签】下拉列表中选择【a】选项,因为超链接都在标签内。(5)在【定义在】中选择【仅对该文档】单选按钮,如图9-10所示。6)单击【确定】按钮,打开【a的CSS规则定义】对话框。9.2.2

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。