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;
}