如同人类的的进化一样,
CSS3
是
CSS2
的“进化”版本,在
CSS2
基础上,
增强
或
新增
了许多特性,
弥补了
CSS2
的众多不足之处,使得
Web
开发变得更为高效和便捷。
Html4-html5 css2- css3
-
-
CSS3的现状
-
1
、浏览器支持程度差,需要添加
私有前缀
2
、移动端支持优于
PC
端
3
、不断改进中
4
、应用相对广泛
-
-
如何对待
-
- 坚持渐进增强原则
-
渐进增强:
让低版本浏览器
可以使用最基本的功能,高版本的浏览器具有更好的用户体验
2
、考虑用户群体
3
、遵照产品的方案
4
、
听
Boss
的
-
准备工作
-
统一环境
-
由于
CSS3
兼容性问题的普遍存在,为了避免因兼容性带来的干扰,我们约定统一的环境,以保证学习的效
率,在最后会单独说明兼容性的问题。
1
、
Chrome
浏览器
version 46+
2
、
Firefox
浏览器
firefox 42+
3
、
PhotoShop CS6
(建议)
-
-
如何使用手册
-
学会使用工具,可以让我们事半功倍。
元字符
|
含义
|
示例
|
[]
|
全部可选项
|
padding: [<length> | <percentage>]{1, 4}
|
||
|
并列
|
border: <line-width> || <line-style> || <color>
|
|
|
多选一
|
position: static | relative | absolute | fixed
|
?
|
0
个或
1
个
| box-shadow: none | <shadow>[, <shadow>]*
<shadow>: inset? && <length>{2, 4} && <color>?
|
*
|
0
个或多个
| |
{}
|
范围
|
学会查看手册,培养自主学习能力。
-
基础知识
-
属性选择器
-
CSS3
新增了许多
灵活
查找元素的方法,极大的提高了查找元素的效率和
精准度
。
CSS3
选择器与
jQuery
中所提供的
绝大部分
选择器兼容。
其特点是通过
属性
来选择元素,具体有以下
5
种形式:
选择器
|
示例
|
含义
|
E[attr]
|
存在
attr
属性即可
| |
E[attr=val]
|
属性值
完全等于
val
| |
E[attr*=val]
|
属性值里包含
val
字符并且在“
任意
”位置
| |
E[attr^=val]
|
属性值里包含
val
字符并且在“
开始
”位置
| |
E[attr$=val]
|
属性值里包含
val
字符并且在“
结束
”位置
|
-
-
伪类
-
除了以前学过的
:link
、
:active
、
:visited
、
:hover
,
CSS3
又新增了其它的伪类选择器。
1
、结构
(
位置
)
伪类
以某元素(
E
)相对于其父元素或兄弟元素的位置来获取无素;
选择器
|
示例
|
含义
|
E:first-child
|
其父元素的第
1
个子元素
| |
E:last-child
|
其父元素的最后
1
个子元素
| |
E:nth-child(n)
|
其父元素的第
n
个子元素
| |
E:nth-last-child(n)
|
其父元素的第
n
个子元素(倒着数)
|
n
遵循线性变化,其取值
0
、
1
、
2
、
3
、
4
、
...
n
可是多种形式:
nth-child(2n+0)
、
nth-child(2n+1)
、
nth-child(-1n+3)
等;
注:指
E
元素的父元素,并对应位置的子元素必须是
E
2
、空伪类
E:empty
选中没有任何子节点的
E
元素;(使用不是非常广泛)
3
、目标伪类
E:target
结合锚点进行使用,处于
当前锚点
的元素会被选中;
4
、排除伪类
E:not(selector)
除
selector
(任意选择器)外的元素会被选中;
-
-
伪元素
-
1
、
E::first-letter
文本的第一个单词或
字(如中文、日文、韩文等)
2
、
E::first-line
文本第一行;
3
、
E::selection
可改变选中文本的样式;
4
、
E::before
和
E::after
在
E
元素内部的开始位置和结束位创建一个元素,该元素为行内元素,且必须要结合
content
属性使用。
E:after
、
E:before
在
旧版本
里是伪元素,
CSS3
的规范里“
:
”用来表示伪类,“
::
”用来表示伪元素,但是在高版本浏览器下
E:after
、
E:before
会被自动识别为
E::after
、
E::before
,这样做的目的是用来做
兼容处理
。
E:after
、
E:before
后面的练习中会反复用到,目前只需要有个大致了解
":"
与
"::"
区别在于区分伪类和伪元素
-
-
颜色
-
新增了
RGB
A
、
HSL
A
模式,其中的
A
表示透明度通道,即可以设置颜色值的透明度,相较
opacity
,它们不具有继承性,即不会影响子元素的透明度。
如下图所示为颜色表示方法:
RGBA
R
ed
、
G
reen
、
B
lue
、
A
lpha
即
RGBA
H
ue
、
S
aturation
、
L
ightness
、
A
lpha
即
HSLA
不同的颜色表示方法其取值也不相同,具体如下:
R
、
G
、
B
取值范围
0~255
HSLA
H
色调
取值范围
0~360
,
0/360
表示红色、
120
表示绿色、
240
表示蓝色
S
饱和度
取值范围
0%~100%
L
亮度
取值范围
0%~100%
A
透明度
取值范围
0~1
RGBA
、
HSLA
可应用于所有使用颜色的地方。
见代码示
关于
CSS
透明度:
1
、
opacity
只能针对整个盒子设置透明度,子盒子及内容会继承父盒子的透明度;
2
、
transparent
不可调节透明度,始终完全透明
-
-
文本
-
text-shadow
,可分别设置偏移量、模糊度、颜色(可设透明度)。
如:
text-shadow: 2px 2px 2px #CCC;
1
、水平偏移量
正值向右
负值向左;
2
、垂直偏移量
正值向下
负值向上;
3
、模糊度是不能为负值;
-
-
盒模型
-
CSS3
中可以通过
box-sizing
来指定盒模型,即可指定为
content-box
、
border-box
,这样我们
计算盒子大小的
方式就发生了改变
。
可以分成两种情况:
1
、
box-sizing: border-box
盒子大小为
width
2
、
box-sizing: content-box
盒子大小为
width + padding + border
注:上面的标注的
width
指的是
CSS
属性里设置的
width: length
,
content
的值是会自动调整的。
-
-
边框
-
其中
边框圆角
、
边框阴影
属性,
应用十分广泛
,兼容性也相对较好,具有符合渐进增强原则的特征,我们
需要
重点掌握
。
-
-
边框圆角
-
border-radius
圆角处理时,脑中要形成圆、圆心、横轴、纵轴的概念,
正圆是椭圆的一种特殊情况
。如下图
为了方便表述,我们将四个角标记成
1
、
2
、
3
、
4
,如
2
代表右上角,
CSS
里提供了
border-radius
来设置这些角
横纵轴半径值。
见代码示例
01
边框
-
圆角
border-radius.html
分别设置横纵轴半径,以“
/
”进行分隔,遵循“
1
,
2
,
3
,
4
”规则,“
/
”前面的
1~4
个用来设置横轴半径
(分别对应横轴
1
、
2
、
3
、
4
位置
),“
/
”后面
1~4
个参数用来设置纵轴半径(分别对应纵轴
1
、
2
、
3
、
4
位置
)。
支持简写模式,具体如下:
1
、
border-radius: 10px;
表示四个角的横纵轴半径都为
10px
;
2
、
border-radius: 10px 5px;
表示
1
和
3
角横纵轴半径都为
10px
,
2
和
4
角横纵轴半径为
5px
;
3
、
border-radius: 10px 5px 8px;
表示
1
角模纵轴半径都为
10px
,
2
和
4
角横纵轴半径都为
8px
,
3
角的横纵轴半径都为
8px
;
4
、
border-radius: 10px 8px 6px 4px;
表示
1
角横纵轴半径都为
10px
,表示
2
角横纵轴半径都为
8px
,表示
3
角横
纵轴半径都为
6px
,表示
4
角横纵轴半径都为
6px
;
见代码示例
02
边框
-
圆角
-
详解
border-radius.html
-
-
边框阴影
-
box-shadow
与文字阴影类似,可分别设置盒子阴影偏移量、模糊度、颜色(可设透明度)。
如
box-shadow: 5px 5px 5px #CCC
1
、水平偏移量
正值向右
负值向左;
2
、垂直偏移量
正值向下
负值向上;
3
、模糊度是不能为负值;
4
、
inset
可以设置内阴影;
注:设置边框阴影不会改变盒子的大小,即不会影响其兄弟元素的布局。可以设置多重边框阴影,实现更好的效果,增强立体感,
符合渐进增强,实际开发中可以大胆使用。
-
-
背景
-
背景在
CSS3
中也得到很大程度的增强,比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。
- background-size
通过
background-size
设置背景图片的尺寸,就像我们设置
img
的尺寸一样,在移动
Web
开发中做屏幕适配应
用非常广泛。
其参数设置如下:
a)
可以设置长度单位
(px)
或百分比(设置百分比时,参照盒子的宽高)
b)
设置为
cover
时,会自动调整缩放比例,保证图片始终
填充满
背景区域,如有
溢出部分
则会被隐藏。
c)
设置为
contain
会自动调整缩放比例,保证图片始终
完整显示
在背景区域。
2
、
background-origin
通过
background-origin
可以设置背景图片定位
(background-position)
的参照原点。
其参数设置如下:
border-box
以边框做为参考原点;
padding-box
以内边距做为参考原点;
content-box
以内容区做为参考点;
3
、
background-clip
通过
background-clip
,可以设置对背景区域进行裁切,即改变背景区域的大小。
其参数设置如下:
border-box
裁切边框以内为背景区域;
padding-box
裁切内边距以内为背景区域;
content-box
裁切内容区做为背景区域;
4
、多背景
以逗号分隔可以设置多背景,可用于自适应布局
-
-
渐变
-
渐变是
CSS3
当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使
用数量,并且具有很强的适应性和可扩展性。
-
-
线性渐变(渐进增强原则)
-
linear-gradient
线性渐变指沿着某条直线朝一个方向产生渐变效果,如下图是从黄色渐变到绿色。
1
、必要的元素:
借助
Photoshop
总结得出线性渐变的必要元素
a
、方向
b
、起始色
c
、终止色
d
、渐变距离
2
、关于方向
设置渐变方向,可以用关键字如
to top
、
to right
,也可以用角度(正负值均可)如
45deg
、
-90deg
等,当以角
度做为参数时,可参照下图来使用,
0deg
从下往上,
90deg
从左向右,进而可以推算出
180deg
从上向下。
注:我们可以设置渐变的起始点,这个起始点的值可以是百分比形式,这个百分比在没有设置
background-size
时,是相对于盒子大小的,当设置了
background-size
时则是相对于
background-size
的。
-
-
径向渐变
-
radial-gradient
径向渐变指从
一个中心点
开始沿着
四周
产生渐变效果
1
、必要的元素:
a)
辐射范围即圆半径
b)
中心点
即圆的中心
c)
渐变起始色
d)
渐变终止色
e)
渐变范围
2
、关于中心点
中心位置参照的是盒子的左上角,例如
background-image: radial-gradient(120px at 0 0 yellow green)
其圆心点为
左上角,
background-image: radial-gradient(120px at 0 100% yellow green)
其圆心为左下角。
3
、关于辐射范围
其半径可以不等,即可以是椭圆,如
background-image: radial-gradient(120px 100px at 0 0 yellow green)
会是一个
椭圆形(横轴
120px
、纵轴
100px
)的渐变。
写在最后
关于渐变不同浏览器有不同的版本,即语法格式不一样,我们以最新语法为准,可自行查找资料
了解即可。
-
-
过渡
-
过渡是
CSS3
中具有颠覆性的特征之一,可以实现元素不同状态间的
平滑
过渡(补间动画),经常用来制作
动画效果。
帧动画:通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片
见代码示例
baidu.html
补间动画:自动完成从起始状态到终止状态的的过渡。
见代码示例
01
体验过渡
.html
关于补间动画更多学习可查看
http://mux.alimama.com/posts/1009
在
CSS3
里使用
transition
可以实现补间动画(过渡效果),并且当前元素只要有“属性”发生变化时即存在
两种状态
(
我们用
A
和
B
代指),就可以实现平滑的过渡,为了方便演示采用
hover
切换两种状态,但是并不
仅仅局限于
hover
状态来实现过渡。
可以通过
all
设置所有属性的过渡效果,也可以分别设置某一属性的过渡效果,可以将过渡属性
transition
设置
在
A
或
B
状态,但是会有一些细节的差异,
transition
属性拆解如下表:
属性
|
示例
|
含义
|
transition-property
|
设置过渡属性
| |
transition-duration
|
设置过渡时间
| |
transition-timing-function
|
设置过渡速度
| |
transition-delay
|
设置过渡延时
|
-
-
单词
-
empty
|
空的;无意义的;无知的;
|
英 ['em(p)tɪ]
|
letter
|
信;字母,文字;
|
英 ['letə]
|
transparent
|
透明的;显然的;坦率的;易懂的
|
美 [træns'pærənt]
|
shodow
|
阴影;影子;幽灵;庇护;隐蔽处
|
美 ['ʃædo]
|
origin
|
起源;原点;出身;开端
|
美 ['ɔrɪdʒɪn]
|
clip
|
剪;剪掉;缩短
|
美 [klɪp]
|
gradient
|
梯度;坡度;倾斜度
|
美 ['ɡredɪənt]
|
radial
|
半径的;放射状的;光线的;光线状的
|
美 ['redɪəl]
|
��
2
ҳ
-
-
边框
-
其中
边框圆角
、
边框阴影
属性,
应用十分广泛
,兼容性也相对较好,具有符合渐进增强原则的特征,我们
需要
重点掌握
。
-
-
-
边框圆角
-
-
border-radius
每个角可以设置两个值
,
x
值,
y
值
圆角处理时,
脑中要
形成圆、圆心、横轴、纵轴的概念,
正圆是椭圆的一种特殊情况
。如下图
可分别设置长、短半径,以“
/
”进行分隔,遵循“
1
,
2
,
3
,
4
”规则,“
/
”前面的
1~4
个用来设置横轴半
径(分别对应横轴
1
、
2
、
3
、
4
位置
),“
/
”后面
1~4
个参数用来设置纵轴半径(分别对应纵轴
1
、
2
、
3
、
4
位置
)
-
-
-
边框阴影
-
-
box-shadow
与
text-shadow
用法差不多
1
、水平偏移量
正值向右
负值向左;
2
、垂直偏移量
正值向下
负值向上;
box-shadow: 5px 5px 27px red, -5px -5px 27px green;
3
、模糊度是不能为负值;
4
、
inset
可以设置内阴影;
设置边框阴影不会改变盒子的大小,即不会影响其兄弟元素的布局。
可以设置多重边框阴影,实现更好的效果,增强立体感
。
1.1.4案例 用css 实现
-
-
渐变
-
渐变是
CSS3
当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使
用数量,并且具有很强的适应性和可扩展性。
可分为线性渐变、径向渐变
-
-
-
线性渐变 (gradient 变化)
-
-
linear-gradient
线性渐变指沿着某条直线朝一个方向产生渐变效果。
上图是从黄色渐变到绿色
Background:linear-gradient(
To right
表示方向
(left,top,right,left ,
也可以使用度数
)
Yellow,
渐变起始颜色
Green
渐变终止颜色
)
1
、必要的元素:
a
、方向
b
、起始颜色
c
、终止色;
2
、关于方向如下图
-
-
-
径向渐变 (radial 径向)
-
-
radial-gradient
径向渐变指从
一个中心点
开始沿着
四周
产生渐变效果
background
:
radial-gradient
(
150 px at center ,
yellow ,
green
);
150 px at center ,
yellow ,
green
);
围绕中心点做渐变,半径是
150px
,从黄颜色到绿颜色做渐变
.
1
、必要的元素:
a
、辐射范围即圆半径
(
半径越大,渐变效果越大
)
b
、中心点
即圆的中心
(
中心点的位置是以盒子自身
)
background
:
radial-gradient
(
150 px at left center ,
yellow ,
green
);
150 px at left center ,
yellow ,
green
);
以左上角为圆的中心点
background
:
radial-gradient
(
150 px at 0px 0px ,
yellow ,
green
);
150 px at 0px 0px ,
yellow ,
green
);
c
、渐变起始色
d
、渐变终止色
2
、关于中心点:中心位置参照的是
盒子的左上角
3
、关于辐射范围:其半径可以不等,即可以是椭圆
div
{
width : 300 px ;
height : 300 px ;
margin : 100 px auto ;
background : radial-gradient (
250 px at 0 px 0 px ,
yellow ,
green
);
border-radius : 150 px ;
}
width : 300 px ;
height : 300 px ;
margin : 100 px auto ;
background : radial-gradient (
250 px at 0 px 0 px ,
yellow ,
green
);
border-radius : 150 px ;
}
-
-
背景
-
背景在
CSS3
中也得到很大程度的增强,比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。
background-size:width,height
可以设置背景图片的宽度以及高度
- background-size设置背景图片的尺寸
-
background-size:600px,auto;
自动是适应盒子的宽度
background-size: 100% auto; 当宽度发送改变时,高度会有内容溢出。
常规用法,通过百分百,和像素来调整背景的尺寸.
background-size
:
auto
100
%;
cover
会自动调整缩放比例,保证图片始终
填充满
背景区域,如有
溢出部分
则会被隐藏。
整个背景图片完整显示在背景区域
.
contain
会自动调整缩放比例,保证图片始终
完整显示
在背景区域。
也可以使用长度单位或百分比
案例
:
全屏背景自动适应
.
- background-origin(原点,起点)设置背景定位的原点
-
所谓的背景原点就是调整背景位置的一个参照点
.
调整背景图片定位的参照原点
.
border-box
以边框做为参考原点;
padding-box
以内边距做为参考原点;
content-box
以内容区做为参考点;
3
、
background-clip
设置背景区域
clip(
裁切
)
border-box
裁切边框以内为背景区域;
padding-box
裁切内边距以内为背景区域;
content-box
裁切内容区做为背景区域;
4
、以逗号分隔可以设置多背景,可用于自适应局
背景图片尺寸在实际开发中应用十分广泛
。
-
-
过渡(transition)
-
Transition:param1 param2
param1
要过渡的属性
param2
过渡的时间
.
过渡是
CSS3
中具有颠覆性的特征之一,可以实现元素不同状态间的
平滑过渡
(补间动画),经常用来制作
动画效果。
补间动画:自动完成从起始状态到终止状态的的过渡。不用管中间的状态
帧动画:扑克牌切换
.
通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片
关于补间动画更多学习可查看
http://mux.alimama.com/posts/1009
特点:当前元素只要有“属性”发生变化时,可以平滑的进行过渡。
transition-property
设置过渡属性
transition-duration
设置过渡时间
用来控制速度
linear(
匀速
)
ease-in (
加速
)
transition-timing-function
设置过渡速度
transition-delay
设置过渡延时
超过时间后执行动画
以上四属性重在理解
-
-
2D转换 transform
-
转换是
CSS3
中具有颠覆性的特征之一,可以实现元素的位移、旋转、变形、缩放,甚至支持矩阵方式,配
合即将学习的过渡和动画知识,可以取代大量之前只能靠
Flash
才可以实现的效果。在
css3
当中,通过
transform(
变形
)
来实现
2d
或者
3d
转换
,
其中
2d
有,缩放,移动,旋转,扭曲。
- 缩放 scale (x, y) 可以对元素进行水平和垂直方向的缩放,x、y的取值可为小数,不可为负值;
-
- 移动 translate(x, y) 可以改变元素的位置,x、y可为负值;
-
x
在水平方向移动。
y
在垂直方向移动。
- 旋转 rotate(30deg) 可以对元素进行旋转,正值为顺时针,负值为逆时针;
-
- skew(30deg,30deg) 倾斜
-
x
沿着水平方向倾斜
y
沿着水平方向倾斜
案例
1
,火箭移动
案例
2
盾牌,将位置还原
案例
3
旋转
原点
-
-
单词:
-
transition
|
过渡;转变;
|
[træn'zɪʃən]
|
property
|
性质,性能;财产;所有权
|
['prɑpɚti]
|
duration
|
持续,持续的时间,期间
|
[du'reʃən]
|
transform
|
改变,使…变形;转换
|
[træns'fɔrm]
|
scale
|
规模;比例;
|
[skel]
|
rotate
|
旋转;循环
|
['rotet]
|
translate
|
转变为;调动
|
[træns'let]
|
skew
|
. 斜交;歪斜
|
[skjuː]
|
perspective
|
观点;远景;透视图
|
[pɚ'spɛktɪv]
|
preserve
|
保存;保护;维持;
|
[prɪ'zɝv]]
|
animation
|
活泼,生气;激励;卡通片绘制
|
[,ænɪ'meʃən]
|
iteration
|
迭代;反复;重复
|
[,ɪtə'reʃən]
|
inifinite
|
无限的,无穷的;无数的;极大的
|
['ɪnfɪnət]
|
alternate
|
使交替;使轮流
|
['ɔltɚnət]
|
1、3d变换
rotateX() 沿着x轴旋转
rotateY() 沿着y轴旋转
rotateZ() 沿着z轴旋转
translateX() 沿x轴位移
translateY() 沿Y轴位移
translateZ() 沿Z轴位移 translateZ 需要配合透视使用
旋转方向:
对着正方向去看 都是顺时针旋转
backface-visibility:hidden 背面不可见
伪元素 获取自定义属性的值
content:attr(data-text);
// 自定义属性的作用 存储数据
<span data-text="传">传</span
>
透视
如果希望看到 3d效果 需要添加透视 近大远小
透视 设置是 盒子 和 用户眼睛的距离,加给变换元素的父盒子
透视的值越大效果越不明显 perspective:1000px;
透视产生的3d效果,只是视觉上的呈现,并不是真正的3d
真正的3d的盒子
让子盒子保持真正的3d效果
transform-style:perserve-3d;
注意点:加给 父盒子
动画:
css3中也可以来定义动画
和 js使用函数类似 先定义 在调用
function say(){}
定义动画:
@keyframes 动画名称{
from{
起始状态
}
to{
结束状态
}
}
@keyframes 动画名称{
0%{
}
30%{
}
100%{
}
}
调用动画
animation: 动画名称 持续时间 ;
调用动画: 动画名称 持续时间 执行次数 是否反向 延迟执行 运动曲线..
动画名称: animation-name: move
单次动画执行时间:animation-duration: 2s;
重复次数 animation-iteration-count: 1; infinite 无数次
动画方向:animation-direction alternate:交替 reverse 反向
动画延迟:animation-delay: 1s;
动画结束后的所保持的状态:
backwards:保持动画开始前的状态
forwards:保持动画结束后的状态
运动曲线:animation-timing-function
linear 运算 ease-in-out :先加速后减速 steps
steps(n) 让动画分步完成
animation-timing-function: steps(15);
动画的播放状态 :paused 暂停 running 运行
animation-play-state: paused;