好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

CSS3简介

CSS3 简介

提起 CSS 我们不会太陌生,我们 Web 页面 的样式离不开它,而 CSS3 是 CSS 技术 升级 版本。

对于 CSS3 我们在前端开发的工作中有大量的应用,它主要就是对普通 CSS 样式的一种补充。如果说 HTML 标签 是 页面 的骨架, CSS 是 页面 的皮肤, 那么 CSS3 就是 页面 的灵魂, 它丰富了 页面 的交互和 显示 效果 。

1. 什么是 CSS3 ?

它其实是 CSS 不停 升级 的演变,早在 2001 年 W3C 就完成了 CSS3 的草案规范。CSS3 规范的 一个 新特点是被分为若干个相互独立的模块。一方面分成若干较小的模块较利于规范及时更新和发布,及时调整模块的 内容 ,这些模块独立实现和发布,也为日后 CSS 的扩展奠定了基础。另外一方面,由于受 支持 设备和浏览器厂商的限制,设备或者厂商可以有选择的 支持 一部分模块, 支持 CSS3 的 一个 子集,这样有利于 CSS3 的推广。

我们日常工作中其实 CSS 和 CSS3 是在一起使用的,有时候你甚至不知道已经使用了 CSS3 。因为 CSS3 就是 CSS 升级 演变的产物。

2. 为什么要学习 CSS3 ?

我们学习它肯定需要 一个 理由,最直观的就是前端已经进入了图形化时代,丰富的 页面 效果 在使用 CSS2 实现成本很高。其次,使用 CSS3 可以轻松完成动画或者过渡 效果 ,远离脚本实现动画,让我节省开发时间。

CSS3 技术可以代替很多 图片 ,减少 标签 的嵌套,这意味着 页面 的 标签 更少,静态资源请求数减少,这就意味着我们打开 页面 的时间更快更好。

最后,CSS3 做到了向后兼容,在低版本浏览器中它不会打乱原有的布局,最多就是不起作用。

3. 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- dis play-3

参考文献: 百度 百科

4. CSS3 新增特性

边框特性: 增加 了圆角的定义和 图片 边框,它给了设计师更多的设计空间,在以前所有的元素都是方的,如果我们想要使用漂亮的边框只能使用背景图,这就无形中给服务器带来了压力。 多背景图: 现在我们 一个 元素上可以使用多张背景图了。 颜色: 现在我们不但可以使用线性渐变和径向渐变,还可以设置颜色的透明度,在不借助背景图的情况下可以创建更多的色彩。 **多列布局和弹性盒模:**让我们不再像以前那样为了布局大盒子套小盒子,定位 和 浮动 傻傻分不清楚,它可以说是前端布局的革命。 空间上 增加 了 2D 和 3D 空间 。 过渡和动画 。 web字体 ,我们可以告别千篇一律的微软雅黑了。 媒体 查询 ,现在在不同的分辨率下我们不再通过 JS 去控制样式了。 丰富的阴影 效果 。多用于 hover,悬浮等场景。

5. 学习基础

有一定的 CSS 语法基础。 了解 HTML 基本的一些元素,如: div h1-h6 a span i 这些简单的 标签 。 了解 class id 这类基础元素选择器。

6. 兼容性

目前 Chrome 、 Firefox 、IE 9+ 基本上 支持 了大部分的 CSS3 特性,我们可以放心的使用了。对于 支持 性不好的也可以使用前缀。

Chrome Safari Firefox IE Opera webkit- -webkit- -moz- -ms- -0-

border 边框 ?

查看更多关于CSS3简介的详细内容...

  阅读:49次

上一篇

下一篇

第1节:CSS3简介    第2节:border 边框    第3节:borderImage 边框图片    第4节:border-radius 圆角    第5节:box-shadow 阴影    第6节:box-sizing 盒类型    第7节:gradients 渐变    第8节:text-justify 对齐    第9节:text-overflow 文字超出    第10节:text-shadow 文本阴影    第11节:word-break 文本打断    第12节:word-wrap 文本换行    第13节:letter-spacing 字间距    第14节:perspective 透视    第15节:transform 2D 空间转换    第16节:transform 3D 空间转换    第17节:transition 过渡    第18节:animation 动画    第19节:columns 字符分割    第20节:flex 弹性盒子布局    第21节:flex order 顺序    第22节:flex: grow、shrink、basis    第23节:flex-direction 排列方向    第24节:justify-content (轴内)对齐方式    第25节:flex-wrap 换行    第26节:align-items 竖直方向对齐方式    第27节:align-content    第28节:Grid 布局简介    第29节:Grid 行和列    第30节:media 媒体查询    第31节:only 元素选择    第32节:before && after 位置    第33节:nth 类型元素选择器    第34节:calc 计算属性