html5 css3基础知识详解

如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性，弥补了

CSS2的众多不足之处，使得Web开发变得更为高效和便捷。

Html4-html5 css2- css3

CSS3的现状

1、浏览器支持程度差，需要添加私有前缀

2、移动端支持优于PC端

3、不断改进中

4、应用相对广泛

如何对待

坚持渐进增强原则

渐进增强：让低版本浏览器可以使用最基本的功能，高版本的浏览器具有更好的用户体验

2、考虑用户群体

3、遵照产品的方案

4、听Boss的

准备工作
1. 统一环境

由于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个或多个
{}	范围

学会查看手册，培养自主学习能力。

基础知识
1. 属性选择器

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后面的练习中会反复用到，目前只需要有个大致了解

":" 与 "::" 区别在于区分伪类和伪元素

颜色

新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，它们不具有继承性，即不会影响子元素的透明度。

如下图所示为颜色表示方法：

RGBA

Red、Green、Blue、Alpha即RGBA

Hue、Saturation、Lightness、Alpha即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值

圆角处理时，脑中要

形成圆、圆心、横轴、纵轴的概念，正圆是椭圆的一种特殊情况。如下图

可分别设置长、短半径，以“/”进行分隔，遵循“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(
           150px at center,
           yellow,
           green
      );

围绕中心点做渐变，半径是150px，从黄颜色到绿颜色做渐变.

1、必要的元素：

a、辐射范围即圆半径 (半径越大，渐变效果越大)

b、中心点即圆的中心 (中心点的位置是以盒子自身)

    background: radial-gradient(
            150px at left center,
           yellow,
           green
        );

以左上角为圆的中心点

    background: radial-gradient(
            150px at 0px 0px,
             yellow,
             green
        );

c、渐变起始色

d、渐变终止色

2、关于中心点：中心位置参照的是盒子的左上角

3、关于辐射范围：其半径可以不等，即可以是椭圆

div{
         width: 300px;
         height: 300px;
         margin:100px auto;
         background: radial-gradient(
             250px at 0px 0px,
             yellow,
             green
         );
         border-radius: 150px;
    }

背景

背景在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(ｎ) 让动画分步完成

animation-timing-function: steps(15);

动画的播放状态：paused 暂停 running 运行

animation-play-state: paused;