《Web前端开发》课程理论教学部分 第十讲:认识cSS3 学时计划:2学时理论,0学时实验 (无实验教学内容) 教学大纲: 1、CSS3概述 2、使用CSS3能够做什么? 3、CSS3的新特征 4、在HTML中使用CSS 5、案例:图像边框 6、案例:为 Firefox、 Chrome、 Safari定义不同的样式 7、案例:为 Phone、Pad、PC定义不同的样式 8、讨论与思考 CSS是一种与HTML并存的语言,它能够为文档元素设置可视化 样式,如尺寸、颜色、背景和边框等。目前,CSS已经得到了浏览器 的广泛支持。 本讲主要介绍样式表和CSS3的基础支持,并向读者介绍CSS3 的一些新功能和浏览器支持情况,以及如何在HTML中使用CSS。最 终通过三个案例,展示CSS3的诱人魅力。 CSS3概述 从2010年开始,HTML5与CSS3就一直是互联网技术中最受关 注的两个话题。2010年MIX10上,微软的工程师从前端技术的角度, 把互联网的发展分为三个阶段:第一阶段是Web1.0的以内容为主的 网络,前端技术主要是HTML和CSS;第二阶段是Web2.0的Ajax应 用,热门技术是 JavaScript/DOM/异步数据请求;第三阶段是HTML 5+CSS3时代,这两种技术的结合,使互联网进入了一个崭新的时代。 1.1样式表 样式表( Style sheet)是一种专门描述结构文档表现方式的文 1《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ bs.51xuewebcn
1 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 《Web 前端开发》课程理论教学部分 第十讲：认识 CSS 3 学时计划：2 学时 理论，0 学时 实验 （无实验教学内容） 教学大纲： 1、CSS 3 概述 2、使用 CSS 3 能够做什么？ 3、CSS 3 的新特征 4、在 HTML 中使用 CSS 5、案例：图像边框 6、案例：为 Firefox、Chrome、Safari 定义不同的样式 7、案例：为 Phone、Pad、PC 定义不同的样式 8、讨论与思考 CSS 是一种与 HTML 并存的语言，它能够为文档元素设置可视化 样式，如尺寸、颜色、背景和边框等。目前，CSS 已经得到了浏览器 的广泛支持。 本讲主要介绍样式表和 CSS 3 的基础支持，并向读者介绍 CSS 3 的一些新功能和浏览器支持情况，以及如何在 HTML 中使用 CSS。最 终通过三个案例，展示 CSS 3 的诱人魅力。 一、CSS 3 概述 从 2010 年开始，HTML 5 与 CSS 3 就一直是互联网技术中最受关 注的两个话题。2010 年 MIX10 上，微软的工程师从前端技术的角度， 把互联网的发展分为三个阶段：第一阶段是 Web1.0 的以内容为主的 网络，前端技术主要是 HTML 和 CSS；第二阶段是 Web2.0 的 Ajax 应 用，热门技术是 JavaScript/DOM/异步数据请求；第三阶段是 HTML 5+CSS 3 时代，这两种技术的结合，使互联网进入了一个崭新的时代。 1.1 样式表 样式表（Style Sheet）是一种专门描述结构文档表现方式的文
档,它既可以描述文档在屏幕上如何显示,也可以描述他们的打印效 果,甚至声音效果。样式表一般不包括在结构化文档的内部,而是以 独立的文档方式存在。与HTML描述数据显示方式的传统方式相比, 样式表具有明显的优点。 (1)表达效果丰富。 样式表可以支持文字和图像的精确定位、三维层技术以及交互操 作等,对于文档的表现力远远超过HTML中的标记。更重要的是,样 式表的标准规范独立于其他结构文档的规范,当需要实现丰富的表达 效果时,仅需要修改样式表即可。 (2)文档体积小。 在实际应用中,大量的结构文档中存在重复的内容定义样式,使 用传统方式需要对每一个文档进行样式定义,会产生大量的重复。而 在样式表中一种表现样式只需要一次定义,所有使用该样式的内容通 过调用即可。 (3)便于信息检索。 样式表负责复杂的显示效果,但样式表的显示逻辑与数据逻辑分 离,显示细节的描述并不影响文档中数据的内在结构。因此,搜索引 擎可以不考虑样式表的内容,对结构文档进行检索,从而更好的检索 到有用的信息。 (4)可读性好。 样式表对各种标记的显示进行集中定义,且定义方式直观易读。 这使得样式表易学易用,可读性和可维护性都比较好。而结构化的数 据文档也相对简洁、清晰,突出对内容本身的描述。 1.2CSS概述 级联样式表( Cascading Style Sheet)简称“CSS”,通常又称 为“风格样式表( Style Sheet)”,它是用来进行网页风格设计的。 CSS3是CSS技术的一个升级版本,是由 Adobe Systems、 Apple、 ogle、HP、IBM、 Microsoft、 Mozilla、 Opera、 Sun microsystems 等许多Web界的巨头联合成立的“ CSS Working Group”的组织共同 协商策划的。 2《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
2 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 档，它既可以描述文档在屏幕上如何显示，也可以描述他们的打印效 果，甚至声音效果。样式表一般不包括在结构化文档的内部，而是以 独立的文档方式存在。与 HTML 描述数据显示方式的传统方式相比， 样式表具有明显的优点。 （1）表达效果丰富。 样式表可以支持文字和图像的精确定位、三维层技术以及交互操 作等，对于文档的表现力远远超过 HTML 中的标记。更重要的是，样 式表的标准规范独立于其他结构文档的规范，当需要实现丰富的表达 效果时，仅需要修改样式表即可。 （2）文档体积小。 在实际应用中，大量的结构文档中存在重复的内容定义样式，使 用传统方式需要对每一个文档进行样式定义，会产生大量的重复。而 在样式表中一种表现样式只需要一次定义，所有使用该样式的内容通 过调用即可。 （3）便于信息检索。 样式表负责复杂的显示效果，但样式表的显示逻辑与数据逻辑分 离，显示细节的描述并不影响文档中数据的内在结构。因此，搜索引 擎可以不考虑样式表的内容，对结构文档进行检索，从而更好的检索 到有用的信息。 （4）可读性好。 样式表对各种标记的显示进行集中定义，且定义方式直观易读。 这使得样式表易学易用，可读性和可维护性都比较好。而结构化的数 据文档也相对简洁、清晰，突出对内容本身的描述。 1.2CSS 概述 级联样式表（Cascading Style Sheet）简称“CSS”，通常又称 为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。 CSS 3 是 CSS 技术的一个升级版本，是由 Adobe Systems、Apple、 Google、HP、IBM、Microsoft、Mozilla、Opera、Sun Microsystems 等许多 Web 界的巨头联合成立的“CSS Working Group”的组织共同 协商策划的
1.3CSS的发展历史 CSS的发展历史经过了四个阶段。 (1)CSS 1 1996年12月,CSS1( Cascading Style Sheets, level1)正 式推出。在这个版本中,已经包含了font的相关属性、颜色与背景 的相关属性、文字的相关属性、box的相关属性等。 (2)CSS 2 1998年5月,CSS2( Cascading Style Sheets, level2)正 式推出。在这个版本中开始使用样式表结构 (3)CSS2.1 2004#2 F, CSS 2. 1( Cascading Style Sheets, level 2 revision )正式推岀。它在CS2的基础上略微做了改动,删除了许多诸如 text- shadow等不被浏览器所支持的属性 现在所使用的CSS基本上都在1998年推出的CSS2的基础上发 展而来的。 (4)CSS 3 2010年开始,CSS3逐步发布。具体关于CSS3的发布时间和状 态,请访问http://www.w3.org/standards/techs/css#w3ca 二、使用CSS3能够做什么? 2.1CSS3模块 CSS规范的前几版重现完全包含了构成CSS语言的元素的定义。 在CSS3中,整个规范已经被划分为一组较短的规范,它们被称为模 块( module)。 每个模块为给定的功能子集方面提供定义。其中一个模块定义媒 体选择器,一个模块定义颜色,还有一个模块定义SVG,等等。模块 方式允许CSS规范的某个特定部分能够作为一个标准进行审批和实 施,这样做的速度要快于将包含所有功能的大型规范作为一个标准进 行审批和实施的方式;而后面的方式无疑要花费更长的时间才能使得 规范成为人们认可的标准。总而言之,这意味着CSS3是一个不断演 化和完善的标准,其中的特定部分可能在其它部分之前变成人们认可 3《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ bs. 51xueweb cn
3 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 1.3CSS 的发展历史 CSS 的发展历史经过了四个阶段。 （1）CSS 1 1996 年 12 月，CSS 1（Cascading Style Sheets，level 1）正 式推出。在这个版本中，已经包含了 font 的相关属性、颜色与背景 的相关属性、文字的相关属性、box 的相关属性等。 （2）CSS 2 1998 年 5 月，CSS 2（Cascading Style Sheets，level 2）正 式推出。在这个版本中开始使用样式表结构。 （3）CSS 2.1 2004年2月，CSS 2.1（Cascading Style Sheets，level 2 revision 1）正式推出。它在 CSS 2 的基础上略微做了改动，删除了许多诸如 text-shadow 等不被浏览器所支持的属性。 现在所使用的 CSS 基本上都在 1998 年推出的 CSS 2 的基础上发 展而来的。 （4）CSS 3 2010 年开始，CSS 3 逐步发布。具体关于 CSS 3 的发布时间和状 态，请访问：http://www.w3.org/standards/techs/css#w3c_all。 二、使用 CSS 3 能够做什么？ 2.1CSS 3 模块 CSS 规范的前几版重现完全包含了构成 CSS 语言的元素的定义。 在 CSS 3 中，整个规范已经被划分为一组较短的规范，它们被称为模 块（module）。 每个模块为给定的功能子集方面提供定义。其中一个模块定义媒 体选择器，一个模块定义颜色，还有一个模块定义 SVG，等等。模块 方式允许 CSS 规范的某个特定部分能够作为一个标准进行审批和实 施，这样做的速度要快于将包含所有功能的大型规范作为一个标准进 行审批和实施的方式；而后面的方式无疑要花费更长的时间才能使得 规范成为人们认可的标准。总而言之，这意味着 CSS 3 是一个不断演 化和完善的标准，其中的特定部分可能在其它部分之前变成人们认可
的标准。 表10-1cSS3中的模块 模块名称 功能描述 Basic box model 定义各种与盒相关的样式 Lin 定义各种与直线相关的样式。 Lists 定义各种与列表相关的样式。 Hyperlink Presentation定义各种与超链接相关的样式。譬如锚的显示方式、激活时的视觉效果等。 Presentation leye定义页面中元素的不同的样式级别。 定义各种与语音相关的样式。譬如音量、音速、说话间歇时间等属性。 Background and border定义各种与背景和边框相关的样式 Text 定义各种与文字相关的样式 Color 定义各种与颜色相关的样式。 Fon 定义各种与字体相关的样式 aged Media 定义各种页眉、页脚、页数等页面元数据的样式 定义怎样对属性进行赋值。 inheritance Value and units 将页面上各种各样的值与单位进行统一定义,以供其他模块使用 mage values 定义对 Image元素的赋值方式 2D Transforms 在页面中实现二维空间上的变形效果 3D Transforms 在页面中实现三维空间上的变形效果 Transforms 在页面中实现平滑过渡的视觉效果 Animations 在页面中实现动画 CSSOM View 查看管理页面或页面的视觉效果,处理元素的位置信息 定义CSs样式表的基本结构、样式表中的一些语法细节、浏览器对于样式表的 yntax 分析规则 Generated 定义怎样在元素中插入内容 Replaced Content 定义当一些元素的内容太大,超出了指定的元素尺寸时,是否以及怎样显示溢 marquee 出部分。 定义页面中ruby元素(用于显示拼音文字)的样式 Writing Modes 定义页面中文本数据的布局方式 Basic User Interface 定义在屏幕、纸张上进行输出时页面的渲染方式 4《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ labs. 51xuewebcn
4 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 的标准。 表 10-1 CSS 3 中的模块 模块名称 功能描述 Basic box model 定义各种与盒相关的样式。 Line 定义各种与直线相关的样式。 Lists 定义各种与列表相关的样式。 Hyperlink Presentation 定义各种与超链接相关的样式。譬如锚的显示方式、激活时的视觉效果等。 Presentation Levels 定义页面中元素的不同的样式级别。 Speech 定义各种与语音相关的样式。譬如音量、音速、说话间歇时间等属性。 Background and border 定义各种与背景和边框相关的样式。 Text 定义各种与文字相关的样式。 Color 定义各种与颜色相关的样式。 Font 定义各种与字体相关的样式。 Paged Media 定义各种页眉、页脚、页数等页面元数据的样式。 Cascading and inheritance 定义怎样对属性进行赋值。 Value and Units 将页面上各种各样的值与单位进行统一定义，以供其他模块使用。 Image Values 定义对 image 元素的赋值方式。 2D Transforms 在页面中实现二维空间上的变形效果。 3D Transforms 在页面中实现三维空间上的变形效果。 Transforms 在页面中实现平滑过渡的视觉效果。 Animations 在页面中实现动画。 CSSOM View 查看管理页面或页面的视觉效果，处理元素的位置信息。 Syntax 定义 CSS 样式表的基本结构、样式表中的一些语法细节、浏览器对于样式表的 分析规则。 Generated and Replaced Content 定义怎样在元素中插入内容。 Marquee 定义当一些元素的内容太大，超出了指定的元素尺寸时，是否以及怎样显示溢 出部分。 Ruby 定义页面中 ruby 元素（用于显示拼音文字）的样式。 Writing Modes 定义页面中文本数据的布局方式。 Basic User Interface 定义在屏幕、纸张上进行输出时页面的渲染方式
Namespaces 定义使用命名空间时的语法。 Media Queries 根据媒体类型来实现不同的样式 Reader Media Type 定义用于屏幕阅读器之类的阅读程序时的样式 Multi-column Layout在页面中使用多栏布局方式 Template Layout 在页面中使用特殊布局方式 Flexible Box Layout 创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局 Grid Position 在页面中使用风格布局方式 Generated Content for 在页面中使用印刷时使用的布局方式。 Paged Media 2. 2cSS 3=hTML 5 CSS3常被误解为HTML5的一个子集。尽管CSS3和HTM5通 常相互伴随,但是它们含义不同。HTML5是HTML( Hyper Text Markup Language)规范的第五版,它用于在HTML文档中定义结构、内容和 功能。HTML5支持新的标签和更丰富媒体内容,而CSS3定义用于 定制用户界面呈现方式的新规则。具体来说,CSS3定义HTML内容 在浏览器中的实际显示方式。 在标准发布上,HTML5和CSS3的标准是独立发布的,且有不 同的工作组开展工作。 2.3浏览器对CSS3的兼容性 CSS3得到了浏览器的广泛支持,具体的浏览器支持情况,可以 通过http://www.w3.org/style/css/Software#browsers来进行查 询 网站http://caniuse.com提供了在线的CSS3的浏览器支持列 表。可以通过CSS3属性索引和对比表格的方式,方便的查看浏览器 的支持情况。 Modernize是一个用来检测浏览器功能支持情况的 JavaScript 库。目前,通过检验浏览器对一系列测试的处理情况, Modernize可 以检测18项CSS3功能以及40多项关于HTM5的功能。它比传统检 测浏览器名称(浏览器嗅探)的方式更为可靠。且测试速度很快 5《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
5 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn Namespaces 定义使用命名空间时的语法。 Media Queries 根据媒体类型来实现不同的样式。 'Reader' Media Type 定义用于屏幕阅读器之类的阅读程序时的样式。 Multi-column Layout 在页面中使用多栏布局方式。 Template Layout 在页面中使用特殊布局方式。 Flexible Box Layout 创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。 Grid Position 在页面中使用风格布局方式。 Generated Content for Paged Media 在页面中使用印刷时使用的布局方式。 2.2CSS 3 != HTML 5 CSS 3 常被误解为 HTML 5 的一个子集。尽管 CSS 3 和 HTML 5 通 常相互伴随，但是它们含义不同。HTML 5 是 HTML（Hyper Text Markup Language）规范的第五版，它用于在 HTML 文档中定义结构、内容和 功能。HTML 5 支持新的标签和更丰富媒体内容，而 CSS 3 定义用于 定制用户界面呈现方式的新规则。具体来说，CSS 3 定义 HTML 内容 在浏览器中的实际显示方式。 在标准发布上，HTML 5 和 CSS 3 的标准是独立发布的，且有不 同的工作组开展工作。 2.3 浏览器对 CSS 3 的兼容性 CSS 3 得到了浏览器的广泛支持，具体的浏览器支持情况，可以 通过 http://www.w3.org/Style/CSS/software#browsers 来进行查 询。 网站 http://caniuse.com/提供了在线的 CSS 3 的浏览器支持列 表。可以通过 CSS 3 属性索引和对比表格的方式，方便的查看浏览器 的支持情况。 Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库。目前，通过检验浏览器对一系列测试的处理情况，Modernizr 可 以检测 18 项 CSS3 功能以及 40 多项关于 HTML5 的功能。它比传统检 测浏览器名称（浏览器嗅探）的方式更为可靠。且测试速度很快，一