Web前端开发 第7章：初识CSS3 阮晓龙 13938213680 / rxl@hactcm.edu.cn http://web.book.51xueweb.cn http://www.51xueweb.cn 河南中医药大学管理科学与工程学科 2018.5.

Presentation on theme: "Web前端开发 第7章：初识CSS3 阮晓龙 13938213680 / rxl@hactcm.edu.cn http://web.book.51xueweb.cn http://www.51xueweb.cn 河南中医药大学管理科学与工程学科 2018.5."— Presentation transcript:

1 Web前端开发 第7章：初识CSS3 阮晓龙 13938213680 / rxl@hactcm.edu.cn
河南中医药大学管理科学与工程学科 2018.5

2 本章主要内容 CSS3概述 CSS3功能 在HTML中使用CSS 案例：基于终端设备选择不同样式 案例：基于浏览器选择不同样式

3 1.CSS3概述 1.1什么是CSS CSS（Cascading Style Sheets），译作“层叠样式表”，是用于控制或增强网页样式并允许将样式信息与网页内容分离的一种标记性语言。 使用CSS样式可以控制许多仅使用HTML无法控制的属性。当在浏览器中打开一个HTML网页时，浏览器将读取该网页中的HTML标签，并根据内置的解析规则将网页元素呈现出来。CSS决定浏览器将如何描述HTML元素的表现形式。

4 1.CSS3概述 CSS的发展历史经过了四个阶段: CSS1 CSS2 CSS2.1 CSS3
此版本中，已经包含了font的相关属性、颜色与背景的相关属性、文字的相关属性、box的相关属性等。 CSS2 此版本中开始使用样式表结构。 CSS2.1 此版本在CSS2的基础上略微做了改动，删除了许多诸如text-shadow等不被浏览器所支持的属性。 CSS3 2010年逐步发布，具体情况参考：

5 1.CSS3概述 CSS3的新功能： 边框特性 过渡与动画 多背景图 选择器 颜色与透明度 Web字体 多列布局与弹性盒模型布局 媒体查询
盒子的变形 过渡与动画 选择器 Web字体 媒体查询 阴影

6 1.CSS3概述 CSS3的应用范围： 所有主流桌面浏览器 移动浏览器
目前，Internet Explorer、Chrome、Firefox、Safari和Opera 均支持各种CSS3功能。但是，只有浏览器的最新版本才能实际支持主要的CSS3功能。 移动浏览器 最新的智能手机操作系统均基本支持CSS3。包括IOS、Android、BlackBerry、Windows Phone设备的默认Web浏览器。实际上，移动浏览器具有一些CSS3功能的最佳支持能力。 注：并不是所有桌面和移动浏览器均以相同的方式支持所有的功能。

7 1.CSS3概述 1.4主流浏览器对CSS3的支持 CSS3 Properties 不同平台不同浏览器对CSS3属性的支持情况有所不同。

8

9

10 1.CSS3概述 1.4主流浏览器对CSS3的支持 CSS3 Selectors 不用平台不同浏览器对CSS3选择器的支持情况也是不同的。

11

12

13 1.CSS3概述 随着主流浏览器对CSS3支持到不断增强，越来越多的互联网公司开始在前端开发中加入CSS3来实现一些效果。
比如，国外比较流行的Twitter前端框架Bootstrap，该框架中使用的大量的CSS3效果，如CSS3动画、阴影、圆角、选择器、Web字体等。

14 2.CSS3功能 2.1 CSS3模块 CSS规范的前几版完全包含了构成CSS语言的元素的定义。在CSS3中，整个规范已经被划分为一组较短的规范，它们被称为模块（module）。 CSS3中每个模块为给定的功能子集方面提供定义。 模块方式允许CSS规范的某个特定部分能够作为一个标准进行审批和实施，这样做的速度要快于将包含所有功能的大型规范作为一个标准进行审批和实施的方式；而后面的方式无疑要花费更长的时间才能使得规范成为人们认可的标准。总而言之，这意味着CSS3是一个不断演化和完善的标准。

15

16

17

18 2.CSS3功能 2.2使用CSS3的优势 使用CSS的优势： 减少开发成本与维护成本 提高页面性能

19 3.在HTML中使用CSS 内联样式是在元素属性中设置样式。此种方式很适合用于测试样式和快速查看样式效果，但是不推荐在整个文档上使用此方法。
3.1内联样式 内联样式是在元素属性中设置样式。此种方式很适合用于测试样式和快速查看样式效果，但是不推荐在整个文档上使用此方法。 在使用此方法时，必须在每一个元素上重复设置各个样式，这样既增加文档大小，也增加文档的更新和维护难度。 例如，所有的<li>元素都设置了宽度大小，如果需要修改，就需要反复更改多处样式定义内容。

20 现场演示： 案例7-01：在HTML中使用CSS的内联样式

21 3.在HTML中使用CSS 嵌入样式是通过在HTML文档头定义样式单部分来实现的。
3.2嵌入样式 嵌入样式是通过在HTML文档头定义样式单部分来实现的。 通常不建议使用嵌入样式，因为此方式必须在HTML文档内部定义样式，如果此文档的CSS样式需要被其他HTML文档使用，那么就必须重新定义。大量CSS嵌套在HTML文档中，也会导致HTML文档过大，造成网络负担过重。如果需要修改整站风格时，必须对网站的每一个网页进行修改，不利于更新和管理。

22 现场演示： 案例7-02：在HTML中使用CSS的嵌入样式

23 3.在HTML中使用CSS 3.3外部样式 外部样式是将所有样式写在一个外部文件中，在HTML文档中使用<link>元素，将文件链接到需要设置样式的文档上。 使用这种方法，只需要修改链接的文件，就可以完全改变网页的整体风格。此外，也可以使用这种方法修改或调整文档，使之适应不同环境或设备的显示要求。

24 现场演示： 案例7-03：在HTML中使用CSS的外部样式

25 3.在HTML中使用CSS 3.4网站CSS文件的规划 随着CSS的应用重要性的增强，一个网站的CSS文件也就越来越多。如何规划CSS文件的目录和结构，对于网站的性能有着重要的意义。 常用的网站CSS文件规划的方法： 基于原型 基于页面元素或模块 基于标记

26 现场演示： 案例7-04：基于终端设备选择不同样式

27 现场演示： 案例7-05：基于浏览器选择不同样式

28 Thanks.