使用语言开发商业站点tp04.pptx

第四章初识CSS3

预习检查什么是CSS？CSS3的基本语法结构是什么？CSS3的基本选择器有哪几种？语法规则是什么？CSS3的高级选择器有哪些？在HTML中引入CSS样式的几种方式是什么？集中测试2/55

回顾与作业点评常用的表单元素有哪些？使用什么属性可以作表单的初步验证？请找出下面代码的错误之处点评作业的提交情况和共性问题inputname=userNametype=textvalue=zhangsanreadonly=readonly/inputname=btntype=submitdisabled=disabledvalue=提交/3/55回顾作业点评

本章任务制作《望庐山瀑布》制作影视简介制作开心餐厅介绍页面4/55

本章目标会使用行内样式、内部样式表和外部样式表三种方式为HTML5文档添加CSS样式会使用CSS3的基本选择器设置字体大小和颜色会使用复合选择器为特定的网页元素添加CSS样式会使用CSS3高级选择器为网页元素添加CSS样式5/55

什么是CSSCSS的概念CascadingStyleSheet级联样式表表现HTML或XHTML文件样式的计算机语言包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定6/55

CSS在网页中的应用7/55

CSS的发展史8/55

CSS的优势内容与表现分离网页的表现统一，容易修改丰富的样式，使得页面布局更加灵活减少网页的代码量，增加网页的浏览速度，节省网络带宽运用独立于页面的CSS，有利于网页被搜索引擎收录9/55

选择器{声明1;声明2;……}CSS的基本语法2-1CSS基本语法结构语法h1{ font-size:12px; color:#F00;}选择器声明属性值经验CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;”都要写上!10/55

CSS的基本语法2-2style标签styletype=text/cssh1{ font-size:12px; color:#F00;}/style11/55

HTML中引入CSS样式7-1行内样式内部样式表外部样式表12/55

HTML中引入CSS样式7-2行内样式使用style属性引入CSS样式h1style=color:red;style属性的应用/h1pstyle=font-size:14px;color:green;直接在HTML标签中设置的样式/p示例13/55

HTML中引入CSS样式7-3内部样式表CSS代码写在head的style标签中优点方便在同页面中修改样式缺点不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底styleh1{color:green;}/style14/55

HTML中引入CSS样式7-4外部样式表CSS代码保存在扩展名为.css的样式表中HTML文件引用扩展名为.css的样式表，有两种方式链接式导入式15/55

HTML中引入CSS样式7-5外部样式表链接外部样式表head……linkhref=style.cssrel=stylesheettype=text/css/……/head文件路径使用外部样式表文件类型语法演示示例1：链接外部样式表16/55

HTML中引入CSS样式7-6外部样式表导入外部样式表head……styletype=text/css!--@importurl(style.css);--/style/head语法演示示例2：导入外部样式表17/55

HTML中引入CSS样式7-7链接式与导入式的区别link/标签属于XHTML，@import是属于CSS2.1使用link/链接的CSS文件先加载到网页当中，再进行编译显示使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的18/55

CSS样式优先级行内样式内部样式表外部样式表就近原则演示示例3：3种引入样式方式优先级19/55

学员操作—制作《望庐山瀑布》需求说明使用标题标签和段落标签制作李白的诗《望庐山瀑布》，诗正文字体颜色为绿色，字体大小为14px练习完成时间：10分钟20/55

常见问题及解决办法代码规范问题调试技巧共性问题集中讲解共性问题集中讲解21/55

CSS3基本选择器3-1标签选择器类选择器ID选择器HTML标签作为标签选择器的名称h1…h6、p、img/p{font-size:16px;}标签选择器声明属性值语法演示示例4：标签选择器22/55

CSS3基本选择器3