第11讲 CSS样式表的应用.pptVIP

CSS样式表的应用 知识回顾 常用表单元素包括哪些？ 比较文本字段、密码框和文本区域的异同？ 创建文本链接（图像链接）的方法？ 会利用CSS样式来美化链接 会利用CSS样式美化表格 实例一：链接的美化 完成案例：福建五洲集团导航条的美化 涉及的知识点 空链接的创建 外部样式的创建 外部样式的应用、修改 什么是CSS CSS的新建 超级链接的4中状态 外部样式的链接 福建五洲集团导航条的美化操作步骤 实例二：链接的美化（学生练习） 完成案例：淘宝首页宝贝栏目链接美化 涉及的知识点 空链接的创建 外部样式的创建 外部样式的应用、修改 CSS的类型 小结 实例三：注册页的美化 需求描述 注册页的美化 涉及的知识点 创建样式 链接样式 设置单元格属性样式 设置表单属性样式 表格的美化 讲解 边框“分类”属性介绍 样式 宽度 颜色 操作步骤 表单的美化 讲解 “背景”分类属性介绍 背景颜色 背景图像 重复 附件 水平位置／垂直位置 操作步骤 优点 通过使用外部样式，使网站改版更加方便，而且缩短改版时间。 减少页面代码，提高页面反应速度。 表现和内容相分离，方便设计师与程序员分工协作。 强大的字体控制和排版能力。 缺点 CSS样式应用过多会使工作量增大，给网站维护造成麻烦。 行内样式 行内样式是所有样式方法中最为直接的一种，直接对html的标记使用style属性，然后将CSS代码直接写在其中。 内嵌式 内嵌样式就是将CSS写在head与/head之间，并且用style与/style标记进行声明。 链接式 链接样式是使用频率最高、最为实用的方法，将HTML页面本身与CSS样式风格分离为两个或者多个文件，实现了页面框架HTML代码与美工CSS代码的完全分离，体现了分工协作。 导入样式 与链接样式基本相同，采用import方式导入的样式表，在HTML文件初始化时，会被导入到HTML文件内，作为文件一部分，类似内嵌样式的效果。 * 1、选中文本（图片） 2、添加链接 3、选中目标的打开方式 表单、文本字段、文本区域、单选按钮、复选框、按钮…… 都可以用来输入文本，文本字段类型为单行，密码框的类型为密码，文本区域的类型为多行。 本章目标 CSS：层叠样式表。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 打开CSS样式面板（shift+F11），点击“新建CSS规则”按钮， 笔记 鼠标正在按下时链接文字的样式， a:active 鼠标悬浮在链接上时的样式， a:hover 已被访问过的链接样式， a:visited 未被访问的链接样式， a:link 说 明 超链接样式 保存，完成案例 5 创建空链接 4 设置样式 3 打开CSS样式面板 1 创建超链接样式 2 行内样式 CSS的类型 内部样式表 外部样式表 嵌入样式 内部样式表:内部样式表只对所在的网页有效。 外部样式表:是在页面中引用一个.CSS文件。 1、什么是CSS样式表？ 2、创建CSS样式表的方法？ 3、CSS的类型？ 4、超级链接的美化？ 层叠样式表。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 CSS面板——新建CSS规则 内部样式表:内部样式表只对所在的网页有效。 外部样式表:是在页面中引用一个.CSS文件。 完成效果 创建表格样式 2 美化字体 1 应用表格样式 3 定义样式规则 5 新建样式 4 应用样式 6 保存，完成案例3 7 CSS的优缺点 网页设计 使用CSS控制页面 网页设计 使用CSS控制页面 网页设计 列举CSS样式的优点。 CSS样式分为那几类？并分别说明其适用场合。 创建内部样式的方法有哪几种？ 应用外部样式表的方法有哪几种？ 超链接状态有哪几种？并分别解释其含义。 总结 讲解要点： 1、常用表单元素有：文本框、密码框、单选按钮、复选框、列表框、按钮、多行文本框，边列举边说明其含义。 2、比较文本框：文本域、字符宽度和最多字符数，密码框：文本域、字符宽度和最多字符数，多行文本框：文本域、字符宽度、行数、类型和初始值。比较文本框、密码框和多行文本框这些常用属性的异同。 3、找个演示案例说明为什么要使用跳转菜单？ 4、按钮分为3种，分别是普通按钮(button)、提交按钮(submit)和重设按钮(reset)。普通按钮主要用来响应用户的各种操作，如点击鼠标、鼠标滑过等；提交按钮一般用来向后台提交信息，进行信息交流；重置按钮用来清除表单已填信息。 5、在表单中插入表格。 1、告诉学生学完本次课，我们将能做出什么样的CSS样式页面，通过超炫的页面效果，来吸引学生的兴趣。 1、通过在Dre