Web前端开发技术与实践 第7章:初识CS3 阮晓龙 13938213680/ rxl@hactcmeducn http://web.51xueweb.cr 问南中医学院管理信息工程学科 河南中医学院网络信息中心 2015.9
Web前端开发技术与实践 第7章：初识CSS3 阮晓龙 13938213680 / rxl@hactcm.edu.cn http://web.51xueweb.cn 河南中医学院管理信息工程学科 河南中医学院网络信息中心 2015.9 1
2 本章主要内容 口CS3概述 口CS3功能 口在HTML中使用CSS 口案例:基于终端设备选择不同样式 米 口案例:基于浏览器选择不同样式 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 本章主要内容 CSS3概述 CSS3功能 在HTML中使用CSS 案例：基于终端设备选择不同样式 案例：基于浏览器选择不同样式 2
3 1.CSS3概述 1.1什么是CSS CSS( Cascading Style sheet),译作“层叠样式表”,是用 于控制或增强网页样式并允许将样式信息与网页内容分离的 种标记性语言。 口使用CSS样式可以控制许多仅使用田TM无法控制的属性。当在浏 览器中打开一个HTM网页时,浏览器将读取该网页中的HTM标 签,并根据内置的解析规则将网页元素呈现出来。CSS决定浏览 器将如何描述HM元素的表现形式。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.CSS3概述 CSS（Cascading Style Sheet），译作“层叠样式表” ，是用 于控制或增强网页样式并允许将样式信息与网页内容分离的一 种标记性语言。 使用CSS样式可以控制许多仅使用HTML无法控制的属性。当在浏 览器中打开一个HTML网页时，浏览器将读取该网页中的HTML标 签，并根据内置的解析规则将网页元素呈现出来。CSS决定浏览 器将如何描述HTML元素的表现形式。 3 1.1什么是CSS
4 1.CSS3概述 12CS5发展史 口CSS的发展历史经过了四个阶段: CSS1 口此版本中,已经包含了font的相关属性、颜色与背景的相关属性、文 字的相关属性、box的相关属性等。 CSS2 口此版本中开始使用样式表结构。 口此版本在CSS2的基础上略微做了改动,删除了许多诸如text- shadow等 不被浏览器所支持的属性。 CSS3 具体情况参考:htt://w.w3.org/ standards/ techs/css井w3c_a11 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.CSS3概述 CSS的发展历史经过了四个阶段: CSS1 此版本中，已经包含了font的相关属性、颜色与背景的相关属性、文 字的相关属性、box的相关属性等。 CSS2 此版本中开始使用样式表结构。 CSS2.1 此版本在CSS2的基础上略微做了改动，删除了许多诸如text-shadow等 不被浏览器所支持的属性。 CSS3 具体情况参考：http://www.w3.org/standards/techs/css#w3c_all。 4 1.2 CSS发展史
1.CSS3概述 13CSS3新特征 口CSS3的新功能 ■边框特性 过渡与动画 多背景图 选择器 ■颜色与透明度 Web字体 多列布局与弹性盒模型布局 ■媒体查询 ■盒子的变形 阴影 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.CSS3概述 CSS3的新功能： 边框特性 多背景图 颜色与透明度 多列布局与弹性盒模型布局 盒子的变形 过渡与动画 选择器 Web字体 媒体查询 阴影 5 1.3 CSS3新特征
1.CSS3概述 13CSS3新特征 口CSS3的应用范围: ■所有主流桌面浏览器 口目前, Internet Explorer、 Chrome、 Firefox、 Safari和0pera均支 持各种CSS3功能。但是,只有浏览器的最新版本才能实际支持主要的 CSS3功能。 ■移动浏览器 口最新的智能手机操作系统均基本支持CS3。包括I0S、 Android BlackBerry、 Windows phone设备的默认Web浏览器。实际上,移动浏 览器具有一些CSS3功能的最佳支持能力 注:并不是所有桌面和移动浏览器均以相同的方式支持所有的功能。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.CSS3概述 CSS3的应用范围： 所有主流桌面浏览器 目前，Internet Explorer、Chrome、Firefox、Safari和Opera 均支 持各种CSS3功能。但是，只有浏览器的最新版本才能实际支持主要的 CSS3功能。 移动浏览器 最新的智能手机操作系统均基本支持CSS3。包括IOS、Android、 BlackBerry、Windows Phone设备的默认Web浏览器。实际上，移动浏 览器具有一些CSS3功能的最佳支持能力。 注：并不是所有桌面和移动浏览器均以相同的方式支持所有的功能。 6 1.3 CSS3新特征
1.CSS3概述 14主流浏览器对CSS3的支持 o CSS3 Properties 不同平台不同浏览器对CSS3属性的支持情况有所不同。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.CSS3概述 CSS3 Properties 不同平台不同浏览器对CSS3属性的支持情况有所不同。 7 1.4主流浏览器对CSS3的支持
8 表701不同平台不同就览器对CSs3属性的支持情 Windows 涮炎器融牌| Safari Firefox Chrome Opera FirefoxSafari 8.0 40.0 31040.0 8.0 10 RGBA HSLA √√√ Background size Multiple Backgrounds Border image Border radius Box Shadow √√√ Text Shadow CSS Animation CSS Columns √√√ csS Gradients 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 8
9 表7-01不同台不同就览器CSs3属性的支持情况 WindowS 濑览器品牌 Safari Firefox Chrome Opera FirefoxSafari 8.0 40.044310 40.0 8.0 CSS Reflections CSS Transforms cSS Transform xxX CSS Transitions CSS FontFace FlexBox Generated Content√ DataURI Pointer events Display: table Overflow Scrolling X X Media queries 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 9
10 1.CSS3概述 14主流浏览器对CSS3的支持 a cSS3 Selectors 不用平台不同浏览器对CSS3选择器的支持情况也是不同的。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.CSS3概述 CSS3 Selectors 不用平台不同浏览器对CSS3选择器的支持情况也是不同的。 10 1.4主流浏览器对CSS3的支持