Web前端开发基础 课件 项目四 CSS3基础知识.pptx

项目四CSS3基础知识

【知识点】1.掌握CSS3中新增加的属性选择器，能够运用属性选择器为页面中的元素添加样式。2.理解关系选择器的用法，能够准确判断元素与元素间的关系。3.掌握常用的结构化伪类选择器，能够为相同名称的元素定义不同样式。4.掌握伪元素选择器的使用，能够在页面中插入所需要的文字或图片内容。5.掌握CSS伪类，会使用CSS伪类实现超链接特效。6.理解过渡属性，能够控制过渡时间、动画快慢等常见过渡效果。7.掌握CSS3中的变形属性，能够制作2D转换、3D转换效果。8.掌握CSS3中的动画，能够熟练制作网页中常见的动画效果【技能点】1.能使用CSS3新增选择器获取网页元素2.能使用CSS3边框、颜色、字体、盒阴影、背景、渐变等新特性美化页面样式3.能使用CSS3动画、过渡等完成网页动态效果4.能使用CSS3多列布局等设计网页布局5.能使用2D、3D转换完成网页元素的旋转、平移、缩放和倾斜效果课程目标【素质目标】1．培养自我管理、持续学习的能力2．培养环保意识，树立正确的价值观和道德素养3．培养对新知识、新技术的不断挑战、开拓创新的精神

·1.目录ContentsCSS属性选择器CSS关系选择器结构伪类选择器CSS3新增常用属性渐变CSS3变形CSS3过渡CSS3动画

4.1CSS3属性选择器E[att^=value]属性选择器是指选择名称为E的元素，且该元素定义了att属性，att属性值包含前缀为value的子字符串。4.1.1E[att^=value]属性选择器E是可省略的。如果省略则表示可以匹配满足条件的任意元素。div[id^=box]表示匹配包含id属性，且id属性值是以box字符串开头的div元素。【注意】

技能训练4-1E[att^=value]属性选择器4.1CSS3属性选择器【方法步骤】1、打开HBuilderX,新建项目chapter4，新建html文件，命名为ex4-1.html2、编写HTML代码1!--属性选择器--2!DOCTYPEhtml3html4 head5 metacharset=UTF-86 titleE[att^=value]属性选择器/title7 styletype=text/css8 h3[id^=one]{9 color:red;10 font-family:微软雅黑;11 font-size:24px;12 }13 h3[id^=two]{14 color:green;15 font-family:微软雅黑;16 font-size:24px17 }18 /style

技能训练4-1E[att^=value]属性选择器1.CSS属性选择器19 /head20 body21 h3id=onetwo做好垃圾分类，人人有责/h322 h3id=one厨余垃圾/h323 p家庭中产生的菜帮菜叶、瓜果皮核、剩菜剩饭、食物残渣、畜禽内脏等易腐垃圾/p24 h3id=two可回收垃圾/h325 p已失去原有使用价值，但回收后加工又可以再利用的物品。主要包括废纸类、塑料类、玻璃类、金属类、电子废弃物类、织物类等/p26 h3id=one1有害垃圾/h327 p有毒有害物质，主要包括废电池、废荧光灯管、废温度计、废血压计、废药品、废油漆溶剂及其包装物、废杀虫剂、废胶片等 28 /p29 h3id=two1其他垃圾/h330 p除厨余垃圾、可回收物、有害垃圾之外的生活垃圾，以及难以辨识类别的生活垃圾/p 31 /body32/html

技能训练4-1E[att^=value]属性选择器4.1CSS3属性选择器3、运行结果：

4.1CSS3属性选择器E[att$=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含后缀为value的子字符串。4.1.2E[att$=value]属性选择器E是可省略的。如果省略则表示可以匹配满足条件的任意元素。如：div[id$=box]表示匹配包含id属性，且id属性值是以“box”字符串结尾的div元素。【注意】

技能训练4-2E[att$=value]属性选择器4.1CSS3属性选择器【方法步骤】1、打开HBuilderX,新建项目chapter4，新建html文件，命名为ex4-2.html2、编写HTML代码部分与ex4-1-1相同，仅修改css部分1styletype=text/css2 h3[id$=one]{3 color:red;4 font-family:微软雅黑;5