CSS样式表和模板.ppt
《CSS样式表和模板.ppt》由会员分享,可在线阅读,更多相关《CSS样式表和模板.ppt(34页珍藏版)》请在三一文库上搜索。
1、第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元素) 特色超级链
2、接样式:复合内容(基于选择的内容) 指定HTML元素样式:ID(仅用于一个HT元素),CSS定义,CSS即(Cascading Style Sheet),层叠样式表或级联样式表,样式就是用来控制一个文档中某一文本区域外观的一组格式属性。 层叠样式表则可以用来一次对若干个文档所有的样式进行控制 CSS样式使网页中多处对象都采用同样属性,一次设置,多次应用 CSS样式表位于文档中head标签之内 CSS样式可以对HTML标签的默认格式进行重定义,可以对文本区域进行重定义,对标准文本进行重定义 优点:,可以同时将一个样式链接到多个文档 当CSS样式被修改后,所有应用该样式的对象会被自动更新,8.1.
3、2 CSS样式面板,1.打开CSS样式面板的方法 选择命令“窗口”|“CSS样式” 2.CSS样式面板,CSS样式面板,8.1.3 创建CSS样式,仅对当前文档 新建CSS样式表文件,创建仅对当前文档的CSS样式,打开“新建Css样式”对话框 单击CSS样式面板中的新建按钮 选择所建样式的类型 类(可用于任何HTML元素) 标签(重新定义HTML元素) 复合内容(基于选择的内容) ID(仅用于一个HT元素 输入或选择样式名称: 样式名称 . 选择样式名称:当类型为标签、高级时选择 选择样式定义的存放位置或作用范围:仅对该文档 单击”确定”,打开CSS样式定义对话框 对话框的设置:详见设置CSS
4、样式属性,特色超级链接名称的函义,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样式”对话框 “
5、文本”菜单下的”CSS样式”中的”新建CSS样式”命令 单击CSS样式面板中的新建按钮 输入或选择样式名称:同前 选择所建样式的类型 类:用户自定义样式名称,可以在HTML中被调用 标签:重新定义HTML各标签(标记)的默认格式 高级:用于定义组合样式或具有特殊序列号(ID)的样式,主要用于设置超级链接的特色(颜色) 选择样式定义的存放位置或作用范围:新样式表文件 单击”确定”,打开保存样式表对话框 选择路径,输入样式表文件名,单击“确定” 对话框的设置:详见设置CSS的属性,8.1.4 CSS样式的应用,1.样式的应用 标签和高级类型的样式:自动应用到相应的网页元素上,比如建立了标签的样式后
6、,网页上所有单元格的文字都自动变为新的格式 类自定义样式的应用: 选择要应用样式的元素 在属性面板的”类”下拉表中选择自定义的类 2.已经创建样式文件中样式的应用 见8.1.6 链接和导入样式表,编辑或删除CSS样式,编辑 选择元素后执行下列操作之一: 打开样式定义对话框 双击选定的CSS样式名称 单击样式面板中的“编辑样式”按钮 右击要编辑的CSS样式,在快捷菜单中选择“编辑”命令 在对话框中进行设置(同创建) 单击“确定” 删除: 选择CSS样式 单击“删除CSS样式”按钮,8.1.6 链接和导入样式表,链接或导入外部样式表文件即是将已创建的外部样式表文件导入到当前文档中,用样式表文件,格
7、式化网页中的指定元素 步骤 打开”链接外部样式表”对话框:单击“CSS样式面板”右一方的“附加样式表”按钮 在“文件/URL”文本框中输入文件的地址和文件名,或单击“浏览”,在磁盘中选择样式表文件 在“添加为”处选择“CSS样式表文件”添加到此文档中的方式 导入 链接 确定,8.1.7 导出样式表,导出样式表即从一个网页文档中导出样式创建一个新的CSS样式表文件。 步骤: 打开“导出样式为CSS文件对话框:执行“文件”|“导出”|“CSS样式”命令(或“文本”|“CSS样式”|“导出”命令) 在对话框中输入样式文件的名称 单击“保存”按钮,8.1.8 设置CSS的属性,1.类型设置 对于文字的
8、格式设置:字体、大小、行高、样式和修饰 2.背景设置 网页背景的各种设置: 重复:不重复、重复、横向重复、纵向重复 附件:图像能否跟随网页一起滚动 3.区块设置 4.方框设置 5.边框设置 6.列表设置 7.定位设置 8.扩展功能,区块、方框等设置,1.区块设置:主要对文字的整体效果和段落缩进等进行设置 单词、字母间距 垂直对齐:对象的对齐方式 文本对齐 文字缩进:中文首行文字的缩进(字号为9pt,缩进2个字,设置为18pt,12号字,设置为24pt) 2.方框设置:主要对图像的大小、水平和垂直方向上的空白,文字环绕等进行设置 浮动:环绕效果对象与文边的相对位置 清除:对象的边上是否允许出现层
9、 填充:对象边框和其中内容间的空白,浏览时的效果 边界:对象边框四周的空白区域,边框、列表、定位设置,1.边框设置 主要给对象添加边框,设置边框的颜色、粗细、样式等 样式:边框为虚线、点划线、实线、双线、槽状、脊状、凹陷、突出等形状 宽度、颜色:等同前 2.列表设置:对文本前面的项目符号的样式进行设置 类型:符号的类型为圆点、圆圈、方块等 项目符号图像:在图像文件中设置项目符号样式 位置:贴近左侧或向右缩进 3.定位 对层进行设置(实际操作很少被用到) 类型:定位方式为绝对、相对、静态等 显示:同层的属性 置入:浏览器中的位置 剪切: 定义层的可见部分,扩展功能,1.分页:目前尚无浏览器支持该
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- CSS 样式 模板
链接地址:https://www.31doc.com/p-2037442.html