HTML5 CSS3 JavaScript网页设计与制作项目教程课件PPT 项目2 认识CSS3——美化网页(2).pptx

HTML5+CSS3+JavaScript网页设计与制作项目教程项目2 认识CSS3——美化网页 目录ENTERPRISE OPERATION REPORT04.总结提升03.知识链接02.学习目标01.项目导入05.拓展训练 项目导入PART 01 项目导入“旅行家——联系方式”页面效果展示在进行网页页面实现时，CSS3技术能够让原有的网站变得生动美观，文字错落有致。本章我们将使用HTML+CSS3制作“旅行家-联系方式”页面。 学习目标PART 0202 知识目标能力目标1、了解CSS3的发展历史及主流浏览器的支持情况2、掌握CSS选择器，能够运用CSS选择器选择页面元素3、熟悉CSS文本样式属性，能够运用相应的属性定义文本样式4、理解CSS优先级，能够区分复合选择器权重的大小5、掌握CSS3新增的属性选择器6、理解关系选择器的用法，能够准确判断元素与元素之间的关系7、掌握常用的结构化伪类选择器、伪元素选择器、CSS伪类等实现页面的不同效果。1、能够熟练运用CSS3属性选择器为页面中的元素添加样式2、能够灵活运用CSS美化网页02 知识链接PART 0303 一、CSS3简介CSS概述CSS(Cascading Style Sheets) 通常称为CSS样式表或层叠样式表（级联样式表），它以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。如下图，文字的颜色、大小、图片间的间距等都是通过CSS来控制的。03 2. CSS历史大事记20世纪90年代初，HTML语言诞生，各种形式的样式表也随之出现。但随着HTML功能的增加，外来定义样式的语言变得越来越没有意义了。1994 年，Hkon Wium Lie 最初提出了 CSS 的想法，联合当时正在设计 Argo 的浏览器的Bert Bos，他们决定一起合作设计 CSS，于是创造了 CSS 的最初版本。CSS发展至今出现了4个版本。一、CSS3简介03 一、CSS3简介CSS11996 年 12 月，W3C 推出了 CSS 规范的第一版本。1997 年，W3C 颁布 CSS1.0 版本 ，CSS1.0 较全面地规定了文档的显示样式，可分为选择器、样式属性、伪类 / 对象几个部分。CSS21998 年，W3C 发布了 CSS 的第二个版本，目前的主流浏览器都采用这标准。CSS2 的规范是基于 CSS1 设计的，包含了 CSS1 所有的功能，并扩充和改进了很多更加强大的属性。包括选择器、位置模型、布局、表格样式、媒体类型、伪类、光标样式。CSS2.12004年2月，CSS2.1正式推出。它在CSS2的基础上略微做了改动，删除了许多不被浏览器支持的属性。CSS32005 年 12 月，W3C 开始 CSS3 标准的制定，到目前为止该标准还没有最终定稿。但是各主流浏览器已经开始支持其中的绝大部分特性。 3. CSS3浏览器支持情况CSS3给我们带来众多全新的设计体验，但并不是所有的浏览器都完全支持它。各主流浏览器对CSS3模块的支持情况如下。一、CSS3简介CSS3模块Chrome4Safari4Firefox3.6Opera10.5IE10RGBA?????HSLA?????Multiple Background?????Border Image?????Border Radius?????Box Shadow?????Opacity?????CSS Animations?????CSS Columns?????CSS Gradients?????CSS Reflections?????CSS Transforms?????CSS Transforms 3D?????CSS Transitions?????CSS FontFace?????03 各个浏览器厂商对CSS3各属性的支持程度不一样，因此在标准尚未明确的情况下，会用厂商的前缀加以区分，通常把这些加上私有前缀的属性称之为“私有属性”。各主流浏览器都定义的自己的私有属性，以便让用户更好的体验CSS3的新特性！一、CSS3简介内核类型浏览器私有前缀TridentIE8 / IE9 / IE10-msWebkit谷歌（Chrome）/ Safari-webkitGecko火狐（Firefox）-mozBlinkOpera-o当运用CSS3私有属性时，先写私有的CSS3属性，再写标准的CSS3属性。当一个属性成为标准，并且被Firefox、Chrome等浏览器的最新版普遍兼容的时候，我们就可以去掉该属性的CSS3前缀了。03 1、CSS样式规则（1）CSS语法格式：CSS(Cascading ?Style ?Sheet)层叠样式表，它是用来美化页面的一种语言，即上面提到的