html5 css3基础知识详解
如同人类的的进化一样，
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: [ |
|
||
|
并列
|
border: |
|
|
|
多选一
|
position: static | relative | absolute | fixed
|
|
?
|
0
个或
1
个
|
box-shadow: none | |
|
*
|
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
）的渐变。
写在最后
关于渐变不同浏览器有不同的版本，即语法格式不一样，我们以最新语法为准，可自行查找资料
了解即可。
http://www.w3cplus.com/css3/new-css3-linear-gradient.html
-
-
过渡
-
过渡是
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
值
圆角处理时，
.png)
脑中要
脑中要
形成圆、圆心、横轴、纵轴的概念，
正圆是椭圆的一种特殊情况
。如下图
可分别设置长、短半径，以“
/
”进行分隔，遵循“
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
可以设置内阴影；
.png)
设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。
可以设置多重边框阴影，实现更好的效果，增强立体感
。
1.1.4案例 用css 实现
-
-
渐变
-
渐变是
CSS3
当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使
用数量，并且具有很强的适应性和可扩展性。
可分为线性渐变、径向渐变
-
-
-
线性渐变 （gradient 变化）
-
-
linear-gradient
线性渐变指沿着某条直线朝一个方向产生渐变效果。
上图是从黄色渐变到绿色
Background:linear-gradient(
To right
表示方向
(left,top,right,left ,
也可以使用度数
)
Yellow,
渐变起始颜色
Green
渐变终止颜色
)
.png)
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);
// 自定义属性的作用 存储数据
传
>
透视
如果希望看到 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(ｎ) 让动画分步完成
animation-timing-function: steps(15);
动画的播放状态 ：paused 暂停 running 运行
animation-play-state: paused;