TP04 初识CSS3.pptxVIP

第四章初识CSS3回顾与作业点评常用的表单元素有哪些？使用语义化标签制作表单的作用是什么？请找出下面代码的错误之处。提问input name=userName type=text value=zhangsan readonly/input name=btn type=submit disabled value=提交 //36预习检查使用CSS制作网页的优点是什么？CSS的基本语法结构是什么？HTML中引入CSS样式的几种方式是什么？提问/36本章任务制作《望庐山瀑布》制作《水调歌头》制作《如梦令》制作开心餐厅介绍页面制作团队风采页面/36本章目标会使用CSS三种基本的选择器设置字体大小和颜色会使用行内样式，内部样式表和外部样式表3种方式为HTML文档添加CSS样式会使用复合选择器为特定的网页元素添加CSS样式理解CSS继承特性，并掌握其在CSS样式中的应用/36什么是CSS/36CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离CSS的优势 内容与表现分离 网页的表现统一，容易修改 丰富的样式，使得页面布局更加灵活 减少网页的代码量，增加网页的浏览速度，节省网络带宽 运用独立于页面的CSS，有利于网页被搜索引擎收录使用CSS的意义CSS：层叠样式表（Cascading Style Sheet）CSS在网页中的应用/361、强大的CSS选择器2、新的颜色制式和透明设定3、多栏布局的实现4、多背景图效果5、文字阴影效果6、开放的网络字体类型7、圆角8、边框背景图片9、盒子阴影10、2D；3D效果CSS3新特性预览CSS的基本语法2-1CSS基本语法结构语法选择器属性值选择器 { 声明1; 声明2; …… }h1 { font-size:12px; color:#F00;}经验声明CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上/36CSS的基本语法2-2style标签style type=text/cssh1 { font-size:12px; color:#F00;}/style/36CSS选择器3-1标签选择器类选择器ID选择器语法顾名思议，标签选择器是直接将HTML标签作为选择器，可以是h1…h6、p、img/等HTML标签。属性值p { font-size:16px;}声明标签选择器/36演示示例1：标签选择器CSS选择器3-2标签选择器类选择器ID选择器语法标签名 class= 类名称标签内容/标签名属性值类名称.class { font-size:16px;}声明类选择器/36演示示例2：类选择器CSS选择器3-3标签选择器类选择器ID选择器语法属性值id名称#id { font-size:16px;}声明id选择器/36演示示例3：ID选择器小结标签选择器直接应用于HTML标签类选择器可在页面中多次使用ID选择器在同一个页面中只能使用一次/36学员操作—制作《望庐山瀑布》练习需求说明使用标题标签和段落标签制作李白的诗《望庐山瀑布》，诗正文字体颜色为绿色，字体大小为14px。完成时间：5分钟/36学员操作—制作《水调歌头》练习需求说明标题颜色为红色，字体大小为18px；正文第一段字体大小为12px，字体颜色为红色，第二段字体颜色为黑色，字体大小为12px红色18px字体水平线红色12px字体黑色12 px字体完成时间：5分钟/36学员操作—制作《如梦令》练习需求说明使用标签选择器设置标题字体大小为20px页面中所有段落中的文本字体大小为16px使用类选择器设置正文和译文内容字体颜色为绿色使用ID选择器设置译文标题颜色为蓝色完成时间：5分钟/36共性问题集中讲解常见问题及解决办法代码规范问题共性问题集中讲解/36HTML中引入CSS样式7-1行内样式内部样式表外部样式表/36HTML中引入CSS样式7-2行内样式使用style属性引入CSS样式示例h1 style=color:red;style属性的应用/h1p style=font-size:14px; color:green;直接在HTML标签中设置的样式/p/36HTML中引入CSS样式7-3内部样式表CSS代码写在head的style标签中优点方便在同页面中修改样式缺点不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底/36HTML中引入CSS样式7-4外部样式表CSS代码保存在扩展名为.css的样式表中HTML文件引用扩展名为.css的样式表链接式/36HTML中引入CSS样式7-5外部样式表链接外部样式表语法文件路径使用外部样式表文件