Web前端开发与应用教程第6章 CSS3概述.pptxVIP

第6章 CSS3概述 第6章 CSS3概述 6.1 为什么要使用CSS样式 6.2 CSS样式的发展 6.3 CCS3的前景展望 6.4 练习 Web前端开发与应用教程（HTML5+CSS3+JavaScript） 2 6.1 为什么要使用CSS样式 Web前端开发与应用教程（HTML5+CSS3+JavaScript） 3 6.1.1 什么是CSS样式 Cascading Style Sheets（层叠样式表）的缩写，它是一种对Web文档添加样式的简单机制，是一种表现HTML或XML等文件外观样式的计算机语言，是一种网页排版和布局设计的技术。 Web前端开发与应用教程（HTML5+CSS3+JavaScript） 4 6.1.2 CSS与DIV标记之缘 纯CSS布局与结构式HTML相结合能帮助设计师分离外观与结构，和传统的表格布局相比，具有以下特点： 1. 网页载入更快 2. 降低流量费用 3. 修改设计时效率高 4. 更容易被搜索引擎收录 Web前端开发与应用教程（HTML5+CSS3+JavaScript） 5 6.2 CSS样式的发展 Web前端开发与应用教程（HTML5+CSS3+JavaScript） 6 6.2.1 CSS1.0和CSS2.0概述 1．CSS1.0版本 2．CSS2.0版本 Web前端开发与应用教程（HTML5+CSS3+JavaScript） 7 6.2.2 CSS3的出现 早在2001年，W3C就着手开始准备开发CSS第三版规范。CSS3.0规范一个新的特点是规范被分为若干个互相独立的模块，一方面分成若干较小的模块有利于规范及时更新和发布，及时调整模块的内容；另一方面，由于受支持设备和浏览器厂商的限制，设备或厂商可以有选择地支持一部分模块，支持CSS3.0的一个子集。 Web前端开发与应用教程（HTML5+CSS3+JavaScript） 8 6.3 CCS3的前景展望 Web前端开发与应用教程（HTML5+CSS3+JavaScript） 9 6.3.1 CSS3的应用范围 1. 按钮效果 1. 制作柱形图 3. 设计下拉菜单 4. 图片阴影效果 5. 文本框样式 6. 字体效果 7. CSS3引用气泡 8. 动画效果 Web前端开发与应用教程（HTML5+CSS3+JavaScript） 10 6.3.2 当前支持CSS3的浏览器 Web前端开发与应用教程（HTML5+CSS3+JavaScript） 11 CSS3属性 Windows Mac FIREFOX SAFARI IE CHROME OPERA FIREFOX SAFARI OPERA 3.6 4 5 9 10 10 11.1 4 5 11.1 RGBA √ √ √ √ √ √ √ √ √ √ HSLA √ √ √ √ √ √ √ √ √ √ Background Size × √ √ √ √ √ √ √ √ √ Multiple Backgrounds × √ √ √ √ √ √ √ √ √ Border Image √ √ √ × × √ √ √ √ √ Border Radius √ √ √ √ √ √ √ √ √ √ Box Shadow √ √ √ √ √ √ √ √ √ √ Text Shadow √ √ √ × × √ √ √ √ √ Opacity √ √ √ √ √ √ √ √ √ √ Animation × × √ × × √ × × √ × Columns √ √ √ × √ √ √ √ √ √ Gradients × √ √ × √ √ √ √ √ √ Reflections × × √ × × √ × × √ × Transforms 2D √ √ √ √ √ √ √ √ √ √ Transforms 3D × × × × × × × × × × Transitions × √ √ × × √ √ √ √ √ FontFace √ √ √ √ √ √ √ √ √ √ FlexBox √ √ √ × √ √ × √ √ × 6.4 练习 Web前端开发与应用教程（HTML5+CSS3+JavaScript） 12 6.4 练习 1. 访问网站/standards/techs/css#w3c_all，了解CSS发展现状。 2. 尝试使用记事本或其它文本编辑器创建后缀名为.css的文件。 3. 访问网站/，尝试搜索“CSS3”开源项目，选择感兴趣的项目，并了解项目内容。 4. 使用主流浏览器（IE、Edge、Firefox、Chrome、Safari等）访问练习3中的CSS3开源项目的演示页面，观察显示效果是否一致。 5. 访问网站/，了解主流浏览器对CSS3 属性的支持