CSS样式上机练习课件.ppt

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

1、第四章上机CSS层叠样式表相关回顾CSS样式表的基本语法CSS样式表的三种应用方式行内样式表内嵌样式表外部样式表CSS样式表的作用上机目标学会CSS样式表的基本语法能够使用CSS样式表美化页面教员讲解上机目标训练技能点会创建常用的页面样式行内样式表、内嵌样式表、外部样式表的使用会创建个性化的表格页面会创建个性化的表单页面阶段1训练要点：CSS的基本语法行内样式表的使用需求说明：使用行内样式使用行内样式规范代码示例页面使用的是第一章第二阶段的练习页面讲解需求说明实现思路和关键代码：CSS行内样式表：

2、0FF”>……

标签内的文本内容将以蓝色显示讲解实现思路和关键代码完成时间：10分钟阶段2需求说明图示：采用行内样式表的方式修饰拍拍公告规范代码示例多个样式作用时，以位置最近的样式定义为准页面使用第二章第二阶段的练习页面完成时间：10分钟阶段2常见调试问题及解决办法代码规范问题共性问题集中讲解阶段3无下划线的超链接页面使用第二章第四阶段的上机了练习页面规范代码示例训练要点：内嵌样式表的基本语法类样式的创建需求说明：讲解需求说明实现思路及关键代码：超链接伪类的使用类样式的定义阶段3a:link{…}/*未被访问的链接*/a:visited{…}/*已

3、被访问过的链接*/a:hover{…}/*鼠标悬浮在上的链接*/a:active{…}/*鼠标点中激活链接*/超链接伪类的应用讲解实现思路和关键代码完成时间：10分钟阶段4需求说明：使用CSS内嵌样式修饰商品类目规范代码示例通过CSS样式修饰的超链接页面使用第二章第三阶段的上机练习页面未通过CSS样式修饰的超链接完成时间：10分钟阶段4常见调试问题及解决办法代码规范问题共性问题集中讲解阶段5规范代码示例细边框的文本框无边框的按钮页面使用第三章第四阶段的上机练习页面训练要点：创建外部样式表并在页面中引入创建常用样式，细边框的文本框和无边框的按钮需求说明：讲解需求说明阶段5.text{b

4、order-width:1px;border-style:solid;}.picButton{background-image:url(images/btn.gif);border:0px;margin:0px;padding:0px;height:26px;width:99px;font-size:14px;}无边框的按钮细边框的文本框实现思路及关键代码：无边框的按钮细边框的文本框外部样式表文件的引入讲解实现思路和关键代码完成时间：15分钟阶段6需求说明：定义外部样式文件修饰拍拍用户登录规范代码示例引入外部样式表修饰登录页面完成时间：15分钟总结总结并布置作业