CSS3 简介
编辑教程简介
CSS3是CSS(层叠样式表)技术的升级版本,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块
CSS3于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案
CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。
浏览器厂商按CSS节奏快速创新,因此通过采用模块方法
CSS3规范里的元素能以不同速度向前发展,因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性,这也让跨浏览器开发变得复杂
优势
减少开发成本与维护成本
在CSS3出现之前,开发人员为了实现一个圆角效果,往往需要添加额外的HTML标签,使用一个或多个图片来完成,而使用CSS3只需要一个标签,利用CSS3中的border-radius属性就能完成。
这样,CSS3技术能把人员从绘图、切图和优化图片的工作中解放出来。如果后续需要调整这个圆角的弧度或者圆角的颜色,使用CSS2.1,需要从头绘图、切图才能实现,使用CSS3只需修改border-radius属性值就可快速完成修改。
CSS3提供的动画特性,可让开发者在先实现一些动态按钮或者动态导航时远离JavaScript,让开发人员不需要花费大量的时间去写脚本或者寻找合适的脚本插件来适配一些动态网站效果。
提高页面性能
很多CSS3技术通过提供相同的视觉效果而成为图片的“替代品”,换句话说,在进行Web开发时,减少多余的标签嵌套以及图片的使用数量,意味着用户要下载的内容将会更少,页面加载也会更快。
另外,更少的图片、脚本和Flash文件能够减少用户访问Web站点时的HTTP请求数,这是提升页面加载速度的最佳方法之一。而使用CSS3制作图形化网站无需任何图片,极大地减少了HTTP的请求数量,并且提升了页面的加载速度。
例如CSS3的动画效果,能够减少对JavaScript和Flash文件的HTTP请求,但可能会要求浏览器执行很多的工作来完成这个动画效果的渲染,这有可能导致浏览器响应缓慢致使用户流失。因此,在使用一些复杂的特效时需要考虑清楚。其实很多CSS3技术能够在任何情况下都大幅提高页面的性能
CSS3将完全向后兼容,所以没有必要修改的设计来让它们继续运作。网络浏览器也还将继续支持CSS2
发展史
早在2001年W3C就完成了CSS3的草案规范。CSS3规范的一个新特点是被分为若干个相互独立的模块。
一方面分成若干较小的模块较利于规范及时更新和发布,及时调整模块的内容,这些模块独立实现和发布,也为日后CSS的扩展奠定了基础。
另外一方面,由于受支持设备和浏览器厂商的限制,设备或者厂商可以有选择的支持一部分模块,支持CSS3的一个子集,这样有利于CSS3的推广。
以下为截至2019年12月,CSS3各模块的规范情况:
时间 | 名称 | 最后状态 | 模块 |
---|---|---|---|
1999.01.27 - 2019.08.13 | 文本修饰模块 | 候选推荐 | css-text-decor-3 |
1999.06.22 - 2018.10.18 | 分页媒体模块 | 工作草案 | css-page-3 |
1999.06.23 - 2019.10.15 | 多列布局 | 工作草案 | css-multicol-1 |
1999.06.22 - 2018.06.19 | 颜色模块 | 推荐 | css-color-3 |
1999.06.25 - 2014.03.20 | 命名空间模块 | 推荐 | css-namespaces-3 |
1999.08.03 - 2018.11.06 | 选择器 | 推荐 | selectors-3 |
2001.04.04 - 2012.06.19 | 媒体查询 | 推荐 | css3-mediaqueries |
2001.05.17 - 2019.11.13 | 文本模块 | 工作草案 | css-text-3 |
2001.07.13 - 2018.08.28 | 级联和继承 | 候选推荐 | css-cascade-3 |
2001.07.13 - 2019.06.06 | 取值和单位模块 | 候选推荐 | css-values-3 |
2001.07.26 - 2018.12.18 | 基本盒子模型 | 工作草案 | css-box-3 |
2001.07.31- 2018.09.20 | 字体模块 | 推荐 | css-fonts-3 |
2001.09.24 - 2017.10.17 | 背景和边框模块 | 候选推荐 | css-backgrounds-3 |
2002.02.20 - 2019.08-17 | 列表模块 | 工作草案 | css-lists-3 |
2002.05.15 - 2018.08.08 | 行内布局模块 | 工作草案 | css-inline-3 |
2002.08.02 - 2018.06.21 | 基本用户界面模块 | 推荐 | css-ui-3 |
2003.05.14 - 2019.08.02 | 生成内容模块 | 工作草案 | css-content-3 |
2003.08.13 - 2019.07.16 | 语法模块 | 候选推荐 | css-syntax-3 |
2004.02.24 - 2014.10.14 | 超链接显示模块 | 工作组笔记 | css3-hyperlinks |
2005.12.15 - 2015.03.26 | 模板布局模块 | 工作组笔记 | css-template-3 |
2006.06.12 - 2014.05.13 | 分页媒体模块生成内容 | 工作草案 | css-gcpm-3 |
2008.08.01 - 2014.10.14 | Marquee模块 | 工作组笔记 | css3-marquee |
2009.07.23 - 2019.10.10 | 图像模块 | 候选推荐 | css-images-3 |
2010.12.02 - 2019.12.10 | 书写模式 | 推荐 | css-writing-modes-3 |
2011.09.01 - 2013.04.04 | 条件规则模块 | 候选推荐 | css3-conditionalr |
2012.02.07 - 2016.05.17 | 定位布局模块 | 工作草案 | css-position-3 |
2012.02.28 - 2018.12.04 | 片段模块 | 候选推荐 | css-break-3 |
2012.09.27 - 2019.05.22 | 宽高大小模块 | 工作草案 | css-sizing-3 |
2012.10.09 - 2017.12.14 | 计数器风格 | 候选推荐 | css-counter-styles-3 |
2013.04.18 - 2018.07.31 | 溢出模块 | 工作草案 | css-overflow-3 |
2014.02.20- 2019.07.11 | 显示类型模块 | 候选推荐 | css-display-3 |
兼容
浏览器厂商以前就一直在实施CSS3,虽然它还未成为真正的标准,但却提供了针对浏览器的前缀:
Chrome(谷歌浏览器) | -webkit- |
---|---|
Safari(苹果浏览器) | -webkit- |
Firefox(火狐浏览器) | -moz- |
lE(IE浏览器) | -ms- |
Opera(欧朋浏览器) | -0- |
例如,CSS3渐变样式在Firefox和Safari中是不同的。Firefox使用-moz-linear-gradient,而Safari使用-webkit-gradient,这两种语法都使用了厂商类型的前缀。
需要注意的是,在使用有厂商前缀的样式时,也应该使用无前缀的。这样可以保证当浏览器移除了前缀,使用标准CSS3规范时,样式仍然有效。
例如:
#example{
-webkit-box-shadow:0 3px 5px#FFF;
-moz-box-shadow:0 3px 5px#FFF;
-o-box-shadow:0 3px 5px#FFF;
box-shadow:0 3px 5px#FFF;/*无前缀的样式*/
}
CSS3 模块
CSS3 被划分为模块。
其中最重要的 CSS3 模块包括:
- 选择器
- 框模型
- 背景和边框
- 文本效果
- 2D/3D 转换
- 动画
- 多列布局
- 用户界面
CSS3 标准
W3C 仍然在对 CSS3 规范进行开发。
不过,现代浏览器已经实现了相当多的 CSS3 属性。
选择支付方式:
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间