《CSS样式表和模板》PPT课件.ppt

《《CSS样式表和模板》PPT课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第8章CSS样式表和模板通过本章学习应能够熟练应用CSS和模板来设计网页页面元素的统一格式本章大纲8.1CSS样式8.2模板8.1CSS样式表和模板8.1.1CSS样式的概念8.1.2CSS样式面板8.1.3创建CSS样式8.1.4CSS样式的应用8.1.5CSS样式的编辑8.1.6链接和导入样式表8.1.7导出样式表8.1.8设置CSS的属性8.1.9Spry构件样式8.1.1CSS样式一、CSS样式1.定义2.CSS样式的类型自定义样式：类（可用于任何HTML元素）HTML标签样式：标签（重新定义HTML元素）特色超级链接样

2、式：复合内容（基于选择的内容）指定HTML元素样式：ID（仅用于一个HTＭＬ元素）CSS定义CSS即(CascadingStyleSheet),层叠样式表或级联样式表，样式就是用来控制一个文档中某一文本区域外观的一组格式属性。层叠样式表则可以用来一次对若干个文档所有的样式进行控制CSS样式使网页中多处对象都采用同样属性，一次设置，多次应用CSS样式表位于文档中head标签之内CSS样式可以对HTML标签的默认格式进行重定义，可以对文本区域进行重定义，对标准文本进行重定义优点：可以同时将一个样式链接到多个文档当CSS样式被修改后，

3、所有应用该样式的对象会被自动更新8.1.2CSS样式面板1.打开CSS样式面板的方法选择命令“窗口”

4、“CSS样式”2.CSS样式面板CSS样式面板编辑样式删除CSS规划新建CSS规则附加样式表‘类别’视图‘列表’视图‘设置属性’视图8.1.3创建CSS样式仅对当前文档新建CSS样式表文件创建仅对当前文档的CSS样式打开“新建Css样式”对话框单击CSS样式面板中的新建按钮选择所建样式的类型类（可用于任何HTML元素）标签（重新定义HTML元素）复合内容（基于选择的内容）ID（仅用于一个HTＭＬ元素输入或选择样式名称:样式名称.

5、<样式文件名>选择样式名称：当类型为标签、高级时选择选择样式定义的存放位置或作用范围:仅对该文档单击”确定”,打开CSS样式定义对话框对话框的设置:详见设置CSS样式属性特色超级链接名称的函义1.链接名称的含义a:link——未被访问过的链接a:visited——访问过的链接a:hover——鼠标移上时的链接a:active——被点击的链接2.组合样式实例使一个页面中的超级链接具有不同的特色在表格中创建超级链接文本创建链接各状态的特色a:link、a:visited、a:hover、a:active自定义一个CSS的伪类:.<类

6、名>，如：.abc，任意设置一项定义组合样式:.<类名>a:link等，如：.abca:link（设置要与a:link等的设置有所区别）选中单元格（一个或多个）应用类创建CSS样式表文件打开”新建Css样式”对话框“文本”菜单下的”CSS样式”中的”新建CSS样式”命令单击CSS样式面板中的新建按钮输入或选择样式名称:同前选择所建样式的类型类:用户自定义样式名称,可以在HTML中被调用标签:重新定义HTML各标签(标记)的默认格式高级:用于定义组合样式或具有特殊序列号(ID)的样式,主要用于设置超级链接的特色(颜色)选择样式定义

7、的存放位置或作用范围:新样式表文件单击”确定”,打开保存样式表对话框选择路径，输入样式表文件名，单击“确定”对话框的设置:详见设置CSS的属性8.1.4CSS样式的应用1.样式的应用标签和高级类型的样式:自动应用到相应的网页元素上,比如建立了标签的样式后,网页上所有单元格的文字都自动变为新的格式类——自定义样式的应用:选择要应用样式的元素在属性面板的”类”下拉表中选择自定义的类2.已经创建样式文件中样式的应用见8.1.6链接和导入样式表编辑或删除CSS样式编辑选择元素后执行下列操作之一:打开样式定义对话框双击选定的CSS

8、样式名称单击样式面板中的“编辑样式”按钮右击要编辑的CSS样式，在快捷菜单中选择“编辑”命令在对话框中进行设置(同创建)单击“确定”删除:选择CSS样式单击“删除CSS样式”按钮8.1.6链接和导入样式表链接或导入外部样式表文件即是将已创建的外部样式表文件导入到当前文档中,用样式表文件,格式化网页中的指定元素步骤打开”链接外部样式表”对话框:单击“CSS样式面板”右一方的“附加样式表”按钮在“文件/URL”文本框中输入文件的地址和文件名,或单击“浏览”,在磁盘中选择样式表文件在“添加为”处选择“CSS样式表文件”添加到此文档中的

9、方式导入链接确定8.1.7导出样式表导出样式表即从一个网页文档中导出样式创建一个新的CSS样式表文件。步骤：打开“导出样式为CSS文件对话框：执行“文件”

10、“导出”

11、“CSS样式”命令（或“文本”

12、“CSS样式”

13、“导出”命令）在对话框中输入样式文件的名称单击“