[CSS样式表和模板.ppt

第8章 CSS样式表和模板 通过本章学习应能够熟练应用CSS和模板来设计网页页面元素的统一格式 本章大纲 8.1 CSS样式 8.2 模板 8.1 CSS样式表和模板 8.1.1 CSS样式的概念 8.1.2 CSS样式面板 8.1.3 创建CSS样式 8.1.4 CSS样式的应用 8.1.5 CSS样式的编辑 8.1.6 链接和导入样式表 8.1.7 导出样式表 8.1.8 设置CSS的属性 8.1.9 Spry构件样式 8.1.1 CSS样式 一、CSS样式 1.定义 2.CSS样式的类型 自定义样式：类（可用于任何HTML元素） HTML标签样式：标签（重新定义HTML元素） 特色超级链接样式：复合内容（基于选择的内容） 指定HTML元素样式：ID（仅用于一个HTＭＬ元素） CSS定义 CSS即(Cascading Style Sheet),层叠样式表或级联样式表，样式就是用来控制一个文档中某一文本区域外观的一组格式属性。 层叠样式表则可以用来一次对若干个文档所有的样式进行控制 CSS样式使网页中多处对象都采用同样属性，一次设置，多次应用 CSS样式表位于文档中head标签之内 CSS样式可以对HTML标签的默认格式进行重定义，可以对文本区域进行重定义，对标准文本进行重定义 优点： 8.1.2 CSS样式面板 1.打开CSS样式面板的方法 选择命令“窗口”|“CSS样式” 2.CSS样式面板 CSS样式面板 8.1.3 创建CSS样式 仅对当前文档 新建CSS样式表文件 创建仅对当前文档的CSS样式 打开“新建Css样式”对话框 单击CSS样式面板中的新建按钮 选择所建样式的类型 类（可用于任何HTML元素） 标签（重新定义HTML元素） 复合内容（基于选择的内容） ID（仅用于一个HTＭＬ元素 输入或选择样式名称: 样式名称 .样式文件名 选择样式名称：当类型为标签、高级时选择 选择样式定义的存放位置或作用范围:仅对该文档 单击”确定”,打开CSS样式定义对话框 对话框的设置:详见设置CSS样式属性 特色超级链接名称的函义 1.链接名称的含义 a:link——未被访问过的链接 a:visited——访问过的链接 a:hover——鼠标移上时的链接 a:active——被点击的链接 2.组合样式实例 使一个页面中的超级链接具有不同的特色 在表格中创建超级链接文本 创建链接各状态的特色a:link、a:visited、a:hover、a:active 自定义一个CSS的伪类: .类名，如：.abc ，任意设置一项 定义组合样式: .类名 a:link等，如：.abc a:link（设置要与a:link等的设置有所区别） 选中单元格（一个或多个） 应用类 创建CSS样式表文件 打开”新建Css样式”对话框 “文本”菜单下的”CSS样式”中的”新建CSS样式”命令 单击CSS样式面板中的新建按钮 输入或选择样式名称:同前 选择所建样式的类型 类:用户自定义样式名称,可以在HTML中被调用 标签:重新定义HTML各标签(标记)的默认格式 高级:用于定义组合样式或具有特殊序列号(ID)的样式,主要用于设置超级链接的特色(颜色) 选择样式定义的存放位置或作用范围:新样式表文件 单击”确定”,打开保存样式表对话框 选择路径，输入样式表文件名，单击“确定” 对话框的设置:详见设置CSS的属性 8.1.4 CSS样式的应用 1.样式的应用 标签和高级类型的样式:自动应用到相应的网页元素上,比如建立了Td标签的样式后,网页上所有单元格的文字都自动变为新的格式 类——自定义样式的应用: 选择要应用样式的元素 在属性面板的”类”下拉表中选择自定义的类 2.已经创建样式文件中样式的应用 见8.1.6 链接和导入样式表 编辑或删除CSS样式 编辑 选择元素后执行下列操作之一: 打开样式定义对话框 双击选定的CSS样式名称 单击样式面板中的“编辑样式”按钮 右击要编辑的CSS样式，在快捷菜单中选择“编辑”命令 在对话框中进行设置(同创建) 单击“确定” 删除: 选择CSS样式 单击“删除CSS样式”按钮 8.1.6 链接和导入样式表 链接或导入外部样式表文件即是将已创建的外部样式表文件导入到当前文档中,用样式表文件,格式化网页中的指定元素 步骤 打开”链接外部样式表”对话框:单击“CSS样式面板”右一方的“附加样式表”按钮 在“文件/URL”文本框中输入文件的地址和文件名,或单击“浏览”,在磁盘中选择样式表文件 在“添加为”处选择“CSS样式表文件”添加到此文档中的方式 导入 链接 确定 8.1.7 导出样式表 导出样式表即从一个网页文档中导出样式创建一个新的CSS样式表文件。 步骤： 打开“导出样式为CSS文件对话框：执行“文件”|“导