河南中医药大学：《Web前端开发》课程理论教学课件（2014）第十讲 认识CSS 3

Web前端开发》课程理论教学部分 第十讲:认识CSS3 河南中医学院互联网应用技术研究所 Http://Labs.51xuEweb.Com 2013.4

web前端开发》课程理论教学部分/第十讲:认识css3 学时计划 学时计划:2学时理论,0学时实验 (无实验教学内容) 教学大纲 1、cSs3概述 2、使用cSS3能够做什么? 3、cSS3的新特征 4、在HTML中使用csS 5、案例:图像边框 6、案例:为 Firefox、 Chrome、 Safari定义不同样式 7、案例:为 Phone、Pad、PC定义不同样式 8、讨论与思考

web前端开发》课程理论教学部分/第十讲:认识css3 cSS是一种与HTML并存的语言,它能够为文档元素设置可视化样式 如尺寸、颜色、背景和边框等。目前,CSS已经得到了浏览器的 广泛支持。 本讲主要介绍样式表和css3的基础支持,并向读者介绍cSS3的一 些新功能和浏览器支持情况,以及如何在HTML中使用cSS。最终通 过三个案例,展示CSS3的诱人魅力。 河南中医学院互联网应用技术研究所/http://labs.51xueweb.cn/2013.4

web前端开发》课程理论教学部分/第十讲:认识css3 cSS3概述 从2010年开始,HTML5与cSS3就一直是互联网技术中最受关注的 两个话题。2010年MIX10上,微软的工程师从前端技术的角度,把 互联网的发展分为三个阶段: 第一阶段是Web1.0的以内容为主的网络,前端技术主要是HTML和 CSS: 第二阶段是Web2.0的Ajax应用,热门技术是 JavaScript/DOM异步 数据请求; 第三阶段是HTML5+cSS3时代,这两种技术的结合,使互联网进 人了一个崭新的时代。 河南中医学院互联网应用技术研究所/http://labs.51xueweb.cn/2013.4

web前端开发》课程理论教学部分/第十讲:认识css3 cSS3概述 1.1样式表 样式表 Style Sheet)是一种专门描述结构文档表现方式的文档, 它既可以描述文档在屏幕上如何显示,也可以描述他们的打印效果 ,甚至声音效果。样式表一般不包括在结构化文档的内部,而是以 独立的文档方式存在。与HTML描述数据显示方式的传统方式相比, 样式表具有明显的优点。 (1)表达效果丰富。 (2)文档体积小。 (3)便于信息检索 (4)可读性好。 河南中医学院互联网应用技术研究所/http://labs.51xueweb.cn/2013.4

web前端开发》课程理论教学部分/第十讲:认识css3 cSS3概述 1.2CSs概述 级联样式表( Cascading Style Sheet)简称“css”,通常又称为 “风格样式表( Style Sheet)”,它是用来进行网页风格设计的。 cSs3是cSs技术的一个升级版本,是由 Adobe Systems、 Apple 、 Google、hp、lBM、 Microsoft,、 Mozilla、 Opera、 Sun Micro systems等许多Web界的巨头联合成立的“ CSS Working Group 的组织共同协商策划的。 河南中医学院互联网应用技术研究所/http://labs.51xueweb.cn/2013.4

web前端开发》课程理论教学部分/第十讲:认识css3 cSS3概述 1.3cSs的发展历史 cSs的发展历史经过了四个阶段 1) CSS 1 196年12月,css1( Cascading Style Sheets, level1)正式推 出。在这个版本中,已经包含了font的相关属性、颜色与背景的相关 属性、文字的相关属性、box的相关属性等 (2)CSS 2 1998年5月,CSS2 Cascading Style Sheets, level2)正式推出 。在这个版本中开始使用样式表结构。 河南中医学院互联网应用技术研究所/http://labs.51xueweb.cn/2013.4

web前端开发》课程理论教学部分/第十讲:认识css3 cSS3概述 1.3cSs的发展历史 cSs的发展历史经过了四个阶段 (3)css2.1 20044F2F, CSS 2.1( Cascading Style Sheets, level 2 revision 1)正式推出。它在cSS2的基础上略微做了改动,删除了许多诸如 text-shadow等不被浏览器所支持的属性。 现在所使用的cSS基本上都在1998年推出的cSS2的基础上发展而 来的。 4) CSS 3 2010年开始,cSS3逐步发布。具体关于cSs3的发布时间和状态, 请访问:hto:/wwww3orgy/ standards/ techs/css#w3c_al 河南中医学院互联网应用技术研究所/http://labs.51xueweb.cn/2013.4

2013-02-21 Selectors API Level 1 translations· errata Selectors, which are widely used in CSS, are patterns that match against elements in a tree structure [SELECT[CSS21]The Selectors API specification defines methods for retrieving Element nodes from the DOM by matching against a group of selectors. It is often desirable to perform DOM operations on a specific set of elements in a document. These methods simplify the process of acquiring specific elements, especially compared with the more verbose techniques defined and used in the past 2012-06-19 Media Queries translations- errata Media queries extend the functionality of media types by allowing more precise labeling of style sheets By using media queries presentations can be tailored to a specific range of output devices without changing the content itself 2011-09-29 CSS Namespaces Module translations errata Defines the syntax for using namespaces in CSS 2011-09-29 Selectors Level 3 Selectors are patterns that match against elements in an HTML or XML tree. They are used in CSS, and also in the Selectors API 011-06- A MathML for CSs Profile translations errata This document describes a profile of MathML 3.0 that admits formatting with Cascading Style Sheets 011-06-07 CSS Color Module Level 3 translations· errata CSS( Cascading Style Sheets)is a language for describing the rendering of HTML and XML documents on screen, on paper. in speech, etc. It uses color related properties and respective values to color the text, backgrounds, borders, and other parts of elements in a document. This specification describes color values and properties for foreground color and group opacity. These include properties and values from CSS level 2 and new values 2011-06-07 Cascading Style Sheets Level 2 Revision 1(CSS 2.1)Specification translations· errata This specification defines Cascading Style Sheets, level 2 revision 1(CSS 2.1). CSS 2. 1 is a style sheet language that allows

web前端开发》课程理论教学部分/第十讲:认识css3 使用CSS3能够做什么? 2.1cSs3模块 css规范的前几版重现完全包含了构成cSS语言的元素的定义。在 css3中,整个规范已经被划分为一组较短的规范,它们被称为模块 ( module)。 每个模块为给定的功能子集方面提供定义。其中一个模块定义媒体 选择器,一个模块定义颜色,还有一个模块定义SⅤG,等等。模块 方式允许CSS规范的某个特定部分能够作为一个标准进行审批和实 施,这样做的速度要快于将包含所有功能的大型规范作为一个标准 进行审批和实施的方式;而后面的方式无疑要花费更长的时间才能 使得规范成为人们认可的标准。总而言之,这意味着cSS3是一个不 断演化和完善的标准,其中的特定部分可能在其它部分之前变成人 们认可的标准。 河南中医学院互联网应用技术研究所/http://labs.51xueweb.cn/2013.4