CSS样式表和模板.ppt

大纲
打开“新建Css样式”对话框 单击CSS样式面板中的新建按钮
选择所建样式的类型
类（可用于任何HTML元素） 标签（重新定义HTML元素） 复合内容（基于选择的内容）
ID（仅用于一个HTＭＬ元素 输入或选择样式名称:
样式名称 .<样式文件名>
选择样式名称：当类型为标签、高级时选择
导出样式表即从一个网页文档中导出样式创建一个新 的CSS样式表文件。
步骤：
打开“导出样式为CSS文件对话框：执行“文 件”|“导出”|“CSS样式”命令（或“文本”|“CSS 样式”|“导出”命令）
在对话框中输入样式文件的名称
单击“保存”按钮
8.1.8 设置CSS的属性
大纲
1.类型设置 对于文字的格式设置：字体、大小、行高、样式和修饰
2个字，设置为18pt，12号字，设置为24pt)
2.方框设置：主要对图像的大小、水平和垂直方向上 的空白，文字环绕等进行设置
第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构件样式
选择样式定义的存放位置或作用范围:仅对该文档 单击”确定”,打开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等的设置有所区别） 选中单元格（一个或多个）
上,比如建立了<Td>标签的样式后,网页上所有单元 格的文字都自动变为新的格式
类——自定义样式的应用: 选择要应用样式的元素
在属性面板的”类”下拉表中选择自定义的类
2.已经创建样式文件中样式的应用 见8.1.6 链接和导入样式表
编辑或删除CSS样式
大纲
编辑
选择元素后执行下列操作之一: 打开样式定义对话框
式,主要用于设置超级链接的特色(颜色) 选择样式定义的存放位置或作用范围:新样式表文件 单击”确定”,打开保存样式表对话框 选择路径，输入样式表文件名，单击“确定”
百度文库话框的设置:详见设置CSS的属性
8.1.4 CSS样式的应用
大纲
1.样式的应用 标签和高级类型的样式:自动应用到相应的网页元素
层叠样式表则可以用来一次对若干个文档所有的样 式进行控制
CSS样式使网页中多处对象都采用同样属性，一次设 置，多次应用
CSS样式表位于文档中•h可ea以d标同签时之将内一个样式 CSS样式可以对HTML链标接签到的多默个认文格档式进行重定义， 可义优以点对 ：文本区域进行重•所会当定有被C义应自S，S用动样对该更式标样新被准式修文的改本对后进象，行重定
8.1.2 CSS样式面板
大纲
1.打开CSS样式面板的方法 选择命令“窗口”|“CSS样式”
2.CSS样式面板
CSS样式面板
大纲
删除CSS规划 编辑样式 新建CSS规则 附加样式表
‘类别’视图‘列表’视图 ‘设置属性’视图
8.1.3 创建CSS样式
大纲
仅对当前文档 新建CSS样式表文件
创建仅对当前文档的CSS样式
应用类
创建CSS样式表文件
大纲
打开”新建Css样式”对话框 “文本”菜单下的”CSS样式”中的”新建CSS样 式”命令
单击CSS样式面板中的新建按钮 输入或选择样式名称:同前 选择所建样式的类型
类:用户自定义样式名称,可以在HTML中被调用 标签:重新定义HTML各标签(标记)的默认格式 高级:用于定义组合样式或具有特殊序列号(ID)的样
8.1.1 CSS样式
大纲
一、CSS样式 1.定义 2.CSS样式的类型 自定义样式：类（可用于任何HTML元素） HTML标签样式：标签（重新定义HTML元素） 特色超级链接样式：复合内容（基于选择的内容）
指定HTML元素样式：ID（仅用于一个HTＭＬ元 素）
CSS定义
大纲
CSS即(Cascading Style Sheet),层叠样式表或级联样 式表，样式就是用来控制一个文档中某一文本区域 外观的一组格式属性。
步骤 打开”链接外部样式表”对话框:单击“CSS样式 面板”右一方的“附加样式表”按钮 在“文件/URL”文本框中输入文件的地址和文件 名,或单击“浏览”,在磁盘中选择样式表文件 在“添加为”处选择“CSS样式表文件”添加到 此文档中的方式 导入 链接 确定
8.1.7 导出样式表
大纲
双击选定的CSS样式名称 单击样式面板中的“编辑样式”按钮
右击要编辑的CSS样式，在快捷菜单中选择 “编辑”命令
在对话框中进行设置(同创建) 单击“确定”
删除: 选择CSS样式 单击“删除CSS样式”按钮
8.1.6 链接和导入样式表
大纲
链接或导入外部样式表文件即是将已创建的外部样 式表文件导入到当前文档中,用样式表文件,格式化网 页中的指定元素
2.背景设置 网页背景的各种设置: 重复:不重复、重复、横向重复、纵向重复 附件：图像能否跟随网页一起滚动
3.区块设置 4.方框设置 5.边框设置 6.列表设置 7.定位设置 8.扩展功能
区块、方框等设置
大纲
1.区块设置：主要对文字的整体效果和段落缩进等进行 设置
单词、字母间距 垂直对齐：对象的对齐方式 文本对齐 文字缩进：中文首行文字的缩进（字号为9pt，缩进