2020-3-17 14:30:43 | 作者：老铁SEO | 0个评论 | 人浏览
一、指代不同
1、CSS3：是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案。
2、CSS：是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
二、内容不同
1、CSS3：主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
2、CSS：不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
三、特点不同
1、CSS3：新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。
2、CSS：能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
css3新特性
1:CSS3选择器部分
E[att^="val"]匹配具有att属性、且值以val开头的E元素
E[att$="val"]匹配具有att属性、且值以val结尾的E元素
E[att*="val"]匹配具有att属性、且值中含有val的E元素
E:root匹配文档的根元素。在HTML中，根元素永远是HTML
E:nth-child(n)匹配父元素中的第n个子元素E
E:nth-last-child(n)匹配父元素中的倒数第n个结构子元素E
E:nth-of-type(n)匹配同类型中的第n个同级兄弟元素E
E:nth-last-of-type(n)匹配同类型中的倒数第n个同级兄弟元素E
E:last-child匹配父元素中最后一个E元素
E:first-of-type匹配同级兄弟元素中的第一个E元素
E:only-child匹配属于父元素中唯一子元素的E
E:only-of-type匹配属于同类型中唯一兄弟元素的E
E:empty匹配没有任何子元素（包括text节点）的元素E
:target匹配相关URL指向的E元素
E:enabled匹配所有用户界面（form表单）中处于可用状态的E元素
E:disabled匹配所有用户界面（form表单）中处于不可用状态的E元素
E:checked匹配所有用户界面（form表单）中处于选中状态的元素E
E::selection匹配E元素中被用户选中或处于高亮状态的部分
E:not(s)匹配所有不匹配简单选择符s的元素E
E~F匹配E元素之后的F元素
2、CSS3特效部分1：圆角，阴影，渐变
border-radius
box-shadow
text-shadow
-webkit-gradient
3、CSS3特效部分2：背景，边框背景
background-origin
background-clip
background-size
multiplebackgrounds
border-image
4、CSS3特效部分3：变形
rotate
X/Y/Z
scale
translate
transform-origin,transition-property,transition-duration,
transition-timing-function,transition-delay'
skew
matrix
5、CSS3特效部分4：动画
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
-webkit-animation-direction
css3动画属性
animation-fill-mode:none|forwards|backwards|both;
none：不改变默认行为。
forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards：在animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both：向前和向后填充模式都被应用。
CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时问支持不同特性，这也让跨浏览器开发变得复杂。
css3新增的属性
h5是html的最新版本，是14年由w3c完成标准制定。增强了，浏览器的原生功能，减少浏览器插件（eg：flash）的应用，提高用户体验满意度，让开发更加方便。
-h5新增的标签
新增元素
说明
video表示一段视频并提供播放的用户界面
audio表示音频
canvas表示位图区域
source为video和audio提供数据源
track为video和audio指定字母
svg定义矢量图
code代码段
figure和文档有关的图例
figcaption图例的说明
main
time日期和时间值
mark高亮的引用文字
datalist提供给其他控件的预定义选项
keygen秘钥对生成器控件
output计算值
progress进度条
menu菜单
embed嵌入的外部资源
menuitem用户可点击的菜单项
menu菜单
template
section
nav
aside
article
footer
header
-css3
css3被划分为模块，最重要的几个模块包括：选择器、框模型、背景和边框、文本效果、2D/3D转换、动画、多列布局、用户界面
选择器
框模型
背景和边框
border-radius、box-shadow、border-image、
background-size：规定背景图片的尺寸
background-origin：规定背景图片的定位区域
background-clip：规定背景的绘制区域
文本效果（常用）
text-shadow：设置文字阴影
word-wrap：强制换行
word-break
css3提出@font-face规则，规则中定义了font-family、font-weight、font-style、font-stretch、src、unicode-range
2/3D转换
transform：向元素应用2/3D转换
transition：过渡
动画
@keyframes规则：
animation、animation-name、animation-duration等
用户界面（常用）
box-sizing、resize
css3新增伪类
：nth-child()
：nth-last-child()
：only-child
：last-child
：nth-of-type()
：only-of-type()
：empty
：target这个伪类允许我们选择基于URL的元素，如果这个元素有一个识别器（比如跟着一个#），那么:target会对使用这个ID识别器的元素增加样式。
：enabled
：disabled
：checked
：not
css3动画效果
主要需要使用-webkit-animation
如：
-webkit-animation:gogogo2sinfinitelinear;
其中gogogo是自己定义的动画帧，2s是整个动画的秒数，infinite是永久循环linear是线性变化(step-end则是无线性变化，直接输出结果)
代码如下：
CSS:
@-webkit-keyframesgogogo{
0%{
-webkit-transform:rotate(0deg);
border:5pxsolidred;
}
50%{
-webkit-transform:rotate(180deg);
background:black;
border:5pxsolidyellow;
}
100%{
-webkit-transform:rotate(360deg);
background:white;
border:5pxsolidred;
}
}
.loading{
border:5pxsolidblack;
border-radius:40px;
width:28px;
height:188px;
-webkit-animation:gogogo2sinfinitelinear;
margin:100px;
}