CSS基础

选择器：由 HTML 元素的 id、class 属性或元素名本身以及一些特殊符号构成，用来指定要为哪个 HTML 元素定义样式，例如选择器p就表示为页面中的所有<p>标签定义样式；
属性：您希望给 HTML 元素设置的样式名称，由一系列关键词组成，例如 color（颜色）、border（边框）、font（字体）等，CSS 中提供了众多属性，您可以通过 w3school查看；
值：由数值和单位或者关键字组成，用来控制某个属性的显示效果，例如 color 属性的值可以是 red 或 #F1F1F1 等。

您可以按照如下图所示的语法规则来定义 CSS 样式：

二、CSS使用

1. 外部 CSS

外部 CSS 样式在 HTML 页面 <head> 部分内的 <link> 元素中进行引用
多个 HTML 页面可同时引用同一个 CSS 文件，实现更改一个文件即可更改多个页面的外观
可以在任何文本编辑器中编写，并且以 .css 扩展名保存
外部 .css 文件不应包含任何 HTML 标签

/* 创建一个 mystyle.css 文件 */
body {
  background-color: blue;
}
h1 {
  color: red;
  margin-left: 40px;
}

<!-- 在 html 中使用自己创建的 mystyle.css 文件 -->
<!DOCTYPE html>
<html>
  <head>
    <!-- 引入自己创建的 mystyle.css 文件 --> 
	<link rel="stylesheet" type="text/css" href="mystyle.css">
  </head>
  <body>
  </body>
</html>

2. 内部 CSS

如果一个页面具有唯一样式，则可以使用内部样式表
内部样式在 HTML 页面的 <head> 部分内的 <style> 元素中进行定义

<!DOCTYPE html>
<html>
  <head>
	<style>
	  body {
	    background-color: blue;
	  }
	  h1 {
	    color: red;
	    margin-left: 40px;
	  } 
	</style>
  </head>
  <body>
	<h1>This is a heading</h1>
  </body>
</html>

3. 行内（内联） CSS

行内样式可用于为单个元素应用唯一样式
行内样式在相关标签元素的 "style" 属性中定义

提示：行内样式失去了样式表的许多优点（通过将内容与呈现混合在一起），请谨慎使用此方法。

<!DOCTYPE html>
<html>
  <body>
	<h1 style="color:blue;">This is a heading</h1>
  </body>
</html>

4. CSS样式优先级

如上，CSS样式有三种使用方式，它们可以组合使用。当组合使用时如果对同一个标签元素都设置了样式，会出现样式层叠（即样式被覆盖）。

层叠优先级：浏览器默认样式 < 外部样式表 < 内部样式表 < 行内（内联）样式

如下示例中，将以行内样式为最终呈现效果，文字颜色将设置为蓝色（color: blue;）

/* 创建一个 mystyle.css 文件 */
h1 {
  color: yellow;
}

<!DOCTYPE html>
<html>
  <head>
    <!-- 引入自己创建的 mystyle.css 文件 --> 
	<link rel="stylesheet" type="text/css" href="mystyle.css">
    <style>
	  h1 {
	    color: red;
	  } 
	</style>
  </head>
  <body>
    <h1 style="color:blue;">This is a heading</h1>
  </body>
</html>

三、CSS常用选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

常用 CSS 选择器分为五类：

1. 简单选择器

选择器	示例	示例描述
通用选择器	* {}	通用选择器（*）选择页面上的所有的 HTML 元素添加样式
元素选择器	div {}	元素选择器选择指定的标签元素左侧表示选择所有的 <div> 元素
分组选择器	div, h1, p {}	分组选择器选择所有指定的标签元素左侧表示选择所有的 <div>，<h1> 和 <p> 元素
id 选择器	#para {}	id 选择器使用 HTML 元素的 id 属性来选择特定元素元素的 id 是唯一的，因此 id 选择器用于选择一个唯一的元素通过在 id名前面加上 # 表示选中拥有此 id 名的元素左侧表示选择属性中拥有 id=“para” 的元素
类选择器	.box {}	类选择器选择有特定 class 属性的 HTML 元素通过在 class 名前面加上 . 表示选中拥有此 class 名的所有元素左侧表示选择属性中拥有 class=“box” 的所有元素

2. 关系选择器

根据它们之间的特定关系来选取元素

选择器	示例	示例描述
后代选择器	div p {}	后代选择器匹配属于指定元素后代的所有元素左侧表示选择 <div> 元素内的所有 <p> 元素
子选择器	div > p {}	子选择器匹配属于指定元素子元素的所有元素左侧表示选择属于 <div> 元素子元素的所有 <p> 元素
相邻兄弟选择器	div + p {}	相邻兄弟选择器匹配第二个元素紧跟在第一个元素之后的同级元素兄弟元素必须具有相同的父元素，“相邻”的意思是“紧随其后” 左侧表示选择 <div> 元素后面紧跟着的 <p> 元素
通用兄弟选择器	div ~ p {}	通用兄弟选择器匹配第一个元素之后所有同层级的第二个元素位置无须紧邻，只须同层级左侧表示选择属于 <div> 元素后面同层级的所有 <p> 元素

3. 属性选择器

根据特定属性或属性值来选取元素

选择器	示例	示例描述
[attribute]	a[target] {}	选取带有指定属性的元素左侧表示选择所有带有 target 属性的 <a> 元素
[attribute="value"]	a[target="_blank"] {}	选取带有指定属性和值的元素左侧表示选择所有带有 target="_blank" 属性的 <a> 元素
[attribute~="value"]	[title~="flower"] {}	选取属性值包含指定词的元素左侧表示选择 title 属性包含 "flower" 单词的所有元素
[attribute\|="value"]	[class\|="top"] {}	选取指定属性以指定值开头的元素左侧表示选择 class 属性以 "top" 开头的所有元素注意：值必须是完整或单独的单词，如 class="top" 或者后跟连字符的，比如 class="top-text"
[attribute^="value"]	[class^="top"] {}	选取指定属性以指定值开头的元素左侧表示选择 class 属性以 "top" 开头的所有元素注意：值不必是完整单词
[attribute$="value"]	[class$="test"] {}	选取指定属性以指定值结尾的元素左侧表示选择 class 属性以 "test" 结尾的所有元素
[attribute*="value"]	[class*="te"] {}	选取属性值包含指定词的元素左侧表示选择 class 属性包含 "te" 的所有元素注意：值不必是完整单词

4. 伪元素选择器

伪元素用于设置元素指定部分的样式，例如，它可用于：

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

选择器	示例	示例描述
::after	p::after	在每个 <p> 元素之后插入内容
::before	p::before	在每个 <p> 元素之前插入内容
::first-letter	p::first-letter	选择每个 <p> 元素的首字母，只能应用于块级元素
::first-line	p::first-line	选择每个 <p> 元素的首行，只能应用于块级元素
::selection	p::selection	选择用户选择的元素部分

5. 伪类选择器

伪类是用于定义元素的特殊状态，例如，它可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

常用的伪类选择器

选择器	示例	示例描述
:active	a:active	选择活动的链接
:checked	input:checked	选择每个被选中的 <input> 元素
:disabled	input:disabled	选择每个被禁用的 <input> 元素
:empty	p:empty	选择没有子元素的每个 <p> 元素
:first-child	p:first-child	选择作为其父的首个子元素的每个 <p> 元素
:last-child	p:last-child	选择作为其父的最后一个子元素的每个 <p> 元素
:focus	input:focus	选择获得焦点的 <input> 元素
:hover	a:hover	选择鼠标悬停其上的链接
:not(selector)	:not(p)	选择每个非 <p> 元素的元素
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个 <p> 元素
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个 <p> 元素，从最后一个子元素计数
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个 <p> 元素的每个 <p> 元素，从最后一个子元素计数
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个 <p> 元素的每个 <p> 元素
:root	root	选择元素的根元素
:target	#news:target	选择当前活动的 #news 元素（单击包含该锚名称的 URL）

6. 选择器优先级

如同 CSS 样式在组合使用中拥有优先级一样，当同一个标签元素被多个选择器选中并使用时，也会有优先级的顺序。

选择器优先级大致可分为六等，从高到低的顺序为：

行内（内联）样式
id 选择器
类选择器、属性选择器、伪类选择器
元素选择器、伪元素选择器
后代选择器、子选择器、兄弟选择器、通用选择器等
浏览器默认属性

提示：

当权值相等时，后定义的样式表要优于先定义的样式表
在同一组属性设置中表有 !important 规则的优先级最大

四、CSS3新特性

CSS3 是 CSS2.1 的一个升级版，它是对 CSS 的一个扩展。

CSS3 新增的特性按照功能大致可分为六大部分：

1. 选择器的拓展

CSS3 新增了许多可使用的选择器使得前端开发人员在选择页面元素时更加灵活。

新增的选择器包含如下几个方面：

属性选择器
伪类选择器
伪元素选择器
否定选择器
关系选择器》通用兄弟选择器

具体使用和说明请看【CSS 常用选择器】。

2. 页面布局的加强

CSS 布局有多种方式，不同的页面风格采用合适的布局能有效提升工作效率，本文介绍了 CSS3 常用的几种布局方式，不推荐的布局不在本文中介绍。

2.1 浮动布局

float 浮动属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

浮动的使用

/* 设置右浮动 */
#para {
  float:right;
}

属性值

值	描述
left	元素浮动到其容器的左侧，试一试
right	元素浮动在其容器的右侧，试一试
none	元素不会浮动（将显示在文本中刚出现的位置），默认值，试一试

设置了浮动的元素有以下特性：

脱离标准流，不占位置（自己原来的位置漏给后面的标流）
浮动的元素一排显示，如果父亲装不下了，默认另起一行显示。浮动的元素之间默认无缝隙
任何元素都可以添加浮动，无论它是块元素还是行内元素，浮动后可以直接设置宽高

由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度，计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题。

为解决父元素高度坍塌问题的过程，在设置浮动后我们还需要清浮动。

清浮动

使用 clear 属性清浮动，clear 属性取值如下：

值	描述
left	要求元素的顶部低于之前生成的所有左浮动元素的底部
right	要求元素的顶部低于之前生成的所有右浮动元素的底部
none	默认值，无特殊要求
both	要求元素的顶部低于之前生成的所有浮动元素的底部

clear 属性的使用（建议使用伪元素清浮动），试一试：

/* 给父元素增加::after伪元素，并设置 clear 属性 */
.clear-fix::after {
  content: " ";
  display: block;
  clear: both;
}

2.2 定位布局

页面布局时可以使用 css 中的 position 属性控制元素在包含块的精准位置，通过top、bottom、left、right设置元素的偏移量。

position 属性有五个不同的位置值：

static - 静态定位（不定位），默认值
relative - 相对定位
absolute - 绝对定位
fixed - 固定定位
sticky - 粘性定位

static

HTML元素默认的定位是静态，默认定位在文档流中，设置 position: static; 样式的元素不会受到left，right，bottom，top的影响。它不会因为任何特殊的定位方法而改变其在正常流中的位置。试一试

relative

相对定位是元素相对于其在原来标准流中位置进行移动，通过left，right，bottom，top属性进行调整。试一试

注意点

设置了相对定位的元素是不脱离文档流的，也就是说他是区分行内元素/块级元素/行内块元素
因为他不脱离文档流，那我们就可以他添加 magin 和 padding
在同一方向上只能设置一个属性，即 left，right 选择一个属性设置，设置了 top 就不能设置bottom

使用场景

结合绝对定位使用
对元素进行微调

absolute

试一试

绝对定位的参考点

默认情况下，无论有无祖先元素，都是以 body 作为参考点。
但是，当祖先元素中有定位流元素(使用了绝对/相对/固定定位)，那么该元素就是参考点
如果其祖先元素中含有多个定位流元素，则选择最近的定位流元素作为参考点

注意点

绝对定位的元素是脱离文档流的
因为他脱离文档流，那么他就不区分行内元素/块级元素/行内块元素
绝对定位的元素是会忽略其祖先元素的 padding

fixed

设置了固定定位的元素是相对于视口定位的，也就是说其不会随着滚动条的滚动而滚动，他始终处于以一个视口的位置，通过 left，right，bottom，top 属性调整其位置。试一试

注意点

固定定位的元素是脱离文档流的
和绝对定位一样，不区分区分行内元素/块级元素/行内块元素

sticky

此定位结合了相对定位和固定定位，通过相对定位定位到某一位置，当视口到达此位置时，将其固定住，例如：设置 top: 50px，那么在 sticky 元素到达距离相对定位的元素顶部 50px 的位置时固定，不再向上移动（此时相当于 fixed 定位）。试一试

注意点

粘滞定位的元素是不脱离文档流的
设置 position: sticky; 同时给一个（left，right，bottom，top）之一即可

使用条件

父元素不能 overflow: hidden 或者 overflow: auto 属性。
必须指定 left，right，bottom，top 4个值之一，否则只会处于相对定位
父元素的高度不能低于 sticky 元素的高度
sticky 元素仅在其父元素内生效

z-index

使元素浮起来，脱离文档流。默认情况下所有元素的 z-index 的值都为 0，z-index 专门用于控制定位流的覆盖关系，也就是说他只在定位流(使用了绝对/相对/固定定位)里才会生效。试一试

注意点

当两个父元素都没设置 z-index 时，子元素的 z-index 谁大谁在上
当两个父元素都设置 z-index 时,子元素的 z-index 失效，看父元素的 z-index 谁大谁在上

2.3 多列布局

在以前，如果我们需要实现一个多列的页面布局，往往采用的方案是浮动或者绝对定位。

CSS3 新增了多列布局用以定义多栏布局的模块，可支持在布局中建立列（column）的数量，以及内容如何在列之间流动（flow）、列之间的间距（gap）大小，以及列的分隔线（column rules），常用于文章排版。

多列属性介绍：

属性	描述	示例
column-count	规定元素应划分的列数	试一试
column-gap	指定列之间的间隙	试一试
column-rule	用于设置下面所有 column-rule-* 属性的简写属性	试一试
column-rule-color	规定列之间规则的颜色	试一试
column-rule-style	规定列之间的规则样式	试一试
column-rule-width	规定列之间的规则宽度	试一试
column-span	规定一个元素应该跨越多少列	试一试
column-width	为列指定建议的最佳宽度	试一试

2.4 弹性盒布局

CSS3 弹性盒（Flexbox），是一种用于按行或按列布局元素的一维布局方法。当页面需要适应不同的屏幕大小时的响应式布局结构，可以对一个容器中的子元素进行排列、对齐和分配空白空间。

如需开始使用 Flexbox 模型，您需要首先定义 Flex 容器，设置属性为 flex 或 inline-flex。如下，蓝色块为内容块（1、2、3）的父元素，将父元素加上属性 display: flex;，flex 容器将可伸缩：

<!-- 示例代码 -->
<div style="display: flex;">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

flex 容器属性介绍：

属性	描述	示例
flex-direction	规定弹性容器内的弹性项目的方向	试一试
justify-content	当弹性项目没有用到主轴上的所有可用空间时，水平对齐这些项	试一试
align-items	当弹性项目没有用到主轴上的所有可用空间时，垂直对齐这些项	试一试
flex-wrap	规定弹性项目是否应该换行，若一条 flex 线上没有足够的空间容纳它们	试一试
flex-flow	flex-direction 和 flex-wrap 的简写属性	试一试
align-content	修改 flex-wrap 属性的行为。与 align-items 相似，但它不对齐弹性项目，而是对齐 flex 线	试一试
order	规定弹性项目相对于同一容器内其余弹性项目的顺序	试一试
align-self	用于弹性项目。覆盖容器的 align-items 属性	试一试
flex	flex-grow、flex-shrink 以及 flex-basis 属性的简写属性

提示：更多示例及属性详细介绍请查看 MDN 文档 - Flexbox

2.5 网格布局

CSS3 网格是一个用于 web 的二维布局系统。网格是由一系列水平及垂直的线构成的一种布局模式。根据网格，我们能够将设计元素进行排列，帮助我们设计一系列具有固定位置以及宽度的元素的页面，使我们的网站页面更加统一。

当 HTML 元素的 display 属性设置为 grid 或 inline-grid 时，它就会成为网格容器：

.grid-container {
  display: grid;
}

容器指定了网格布局以后，接着就要划分行和列，以及间隙等属性，对容器内元素进行布局，以下介绍了常用的网格布局属性：

属性	描述	示例
grid-template-columns	定义每一列的列宽	试一试
grid-template-rows	定义每一行的行高	试一试
grid-template-areas	定义显示行和列，使用命名的网格元素	试一试
grid-template	以上的简写形式	试一试
grid-row-gap	设置行与行的间隔（行间距）	试一试
grid-column-gap	设置列与列的间隔（列间距）	试一试
grid-gap	以上的简写形式	试一试
grid-row-start	定义行的开始位置	试一试
grid-row-end	定义行的结束位置	试一试
grid-row	以上的简写形式	试一试
grid-column-start	定义列的开始位置	试一试
grid-column-end	定义列的结束位置	试一试
grid-column	以上的简写形式	试一试
grid-area	以上grid-row/column-start/end的简写形式	试一试
justify-content	用于在容器内对齐整个网格	试一试
align-content	用于垂直对齐容器内的整个网格	试一试

其属性值除了填写像素，它还支持百分比、fr 关键字等多种方式，以方便计算使用：

repeat()

有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数，简化重复的值。

/* 指定一个三行三列的网格，列宽和行高都是100px */
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);

auto-fill 关键字

有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

/* 设置每列宽度100px，然后自动填充，直到容器不能放置更多的列 */
grid-template-columns: repeat(auto-fill, 100px);

fr 关键字

为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

/* 两个相同宽度的列 */
grid-template-columns: 1fr 1fr;
/* 第一列的宽度为150像素，第二列的宽度是第三列的一半 */
grid-template-columns: 150px 1fr 2fr;

minmax()

minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

/* 设置三列，第三列宽度最小为100px，最大为150px */
grid-template-columns: 1fr 1fr minmax(100px, 150px);

auto 关键字

auto关键字表示由浏览器自己决定长度。

/* 设置三列，第二列的宽度撑满剩余空间 */
grid-template-columns: 100px auto 100px;

3. 元素修饰的加强

3.1 颜色和不透明度

CSS 支持140多种颜色名称，以及十六进制和 RGB 颜色。

此外，CSS3 还增加了如右几种：RGBA 颜色、HSL 颜色、HSLA 颜色、opacity 不透明度。

RGBA 颜色

RGBA 颜色值是 RGB 颜色值的扩展，带有 alpha 通道 - 该通道规定颜色的不透明度。

RGBA 颜色值是这样规定的：rgba(red, green, blue, alpha)。 alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

下面的例子定义了不同的 RGBA 颜色：

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* 带不透明度的红色 */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* 带不透明度的绿色 */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* 带不透明度的蓝色 */

HSL 颜色

HSL 指的是色相、饱和度和亮度（Hue、Saturation 以及 Lightness）。

HSL 颜色值是这样规定的：hsl(hue, saturation, lightness)。

色相（hue）是色轮上的度数（从 0 到 360）：

0（或 360）是红色
120 是绿色
240 是蓝色

饱和度（saturation）是一个百分比值：100％是全色。

亮度也（lightness）是一个百分比值：0％是深色（黑色），而 100％是白色。

下面的例子定义了不同的 HSL 颜色：

#p1 {background-color: hsl(120, 100%, 50%);}  /* 绿色 */
#p2 {background-color: hsl(120, 100%, 75%);}  /* 浅绿色 */
#p3 {background-color: hsl(120, 100%, 25%);}  /* 深绿色 */

HSLA 颜色

HSLA 颜色值是带有 Alpha 通道的 HSL 颜色值的扩展 - 它规定了颜色的不透明度。

HSLA 颜色值由以下参数规定：hsla(hue, saturation, lightness, alpha)，其中 alpha 参数定义不透明度。 alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

下面的例子定义了不同的 HSLA 颜色：

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* 带不透明度的绿色 */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* 带不透明度的浅绿色 */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* 带不透明度的深绿色 */

Opacity不透明度

CSS opacity 属性设置整个元素的不透明度（背景颜色和文本都将是不透明/透明的）。

opacity 属性值必须是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

请注意，上面的文本也将是透明/不透明的！

下面的例子显示了带有不透明度的不同元素：

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* 带不透明度的红色 */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* 带不透明度的绿色 */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* 带不透明度的蓝色 */

3.2 圆角支持

通过 border-radius 属性定义元素角的半径，可以实现任何元素的“圆角”样式。

border-radius 属性可以接受一到四个值。规则如下：

四个值 - border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角）
三个值 - border-radius: 15px 50px 30px;（第一个值用于左上角，第二个值用于右上角和左下角，第三个用于右下角）
两个值 - border-radius: 15px 50px;（第一个值用于左上角和右下角，第二个值用于右上角和左下角）
一个值 - border-radius: 15px;（该值用于所有四个角，圆角都是一样的）

也可以单独设置一个角的值：

左上角 - border-top-left-radius：12px;
右上角 - border-top-right-radius：12px;
左下角 - border-bottom-left-radius：12px;
右下角 - border-bottom-right-radius：12px;

圆角属性：

属性	描述
border-radius	用于设置所有四个 border---radius 属性的简写属性
border-top-left-radius	定义左上角边框的形状
border-top-right-radius	定义右上角边框的形状
border-bottom-right-radius	定义右下角边框的形状
border-bottom-left-radius	定义左下角边框的形状

3.3 多背景图片支持

CSS3 允许您通过 background-image 属性为一个元素添加多幅背景图像。

不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者。

下面的例子有两幅背景图像，第一幅图像是花朵（与底部和右侧对齐），第二幅图像是纸张背景（与左上角对齐）：

/* 示例代码 */
#para {
  background-image: url(flower.png), url(paper.jpg);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

背景属性：

属性	描述	示例
background	用于在一条声明中设置所有背景属性的简写属性	background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
background-clip	规定背景的绘制区域	background-clip: content-box;试一试
background-image	为一个元素指定一幅或多幅背景图像	background-image: url(flower.png), url(paper.jpg);试一试
background-origin	规定背景图像的放置位置	background-origin: content-box;试一试
background-size	规定背景图像的大小	background-size: cover;试一试
background-repeat	规定背景图像是否重复	background-repeat: no-repeat;

3.4 渐变效果支持

CSS 渐变使您可以显示两种或多种指定颜色之间的平滑过渡。

CSS 定义了两种渐变类型：

线性渐变（向下/向上/向左/向右/对角线）
径向渐变（由其中心定义）

线性渐变

如需创建线性渐变，您必须定义至少两个色标。色标是您要呈现平滑过渡的颜色。您还可以设置起点和方向（或角度）以及渐变效果。

background-image: linear-gradient(direction/angle, color-stop1, color-stop2, ...);

direction/angle 设置渐变方向，默认从上到下；也可以设置角度。

color-stop 设置颜色。

下面的例子展示了从左开始的线性渐变。它从红色开始，过渡到黄色：

/* 示例代码 */
#para{
  background-image: linear-gradient(to right, red , yellow);
}

试一试

径向渐变

径向渐变由其中心定义，如需创建径向渐变，您必须定义至少两个色标。

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

shape 为椭圆形。

size 为最远角，可接收四个值：

closest-side - 最近侧
farthest-side - 最远侧
closest-corner - 最近的角落
farthest-corner - 默认

position 为中心。

试一试，具体示例请查看 MDN CSS gradients

3.5 阴影效果支持

阴影可能是比较常用的一种用来增强页面修饰的手段。在 CSS3 支持阴影效果之前，大部分的解决方案都是通过图片来展现所需要的效果。

在 CSS3 中，与阴影相关的具体属性有 text-shadow 文本阴影和 box-shadow 元素阴影。

文本阴影

text-shadow 属性可以为文本添加阴影。

box-shadow: h-shadow v-shadow blur color;

/* 示例代码 */
h1 {
  box-shadow: 2px 2px 4px #FF0000;
}

试一试

提示：text-shadow 属性可向文本添加一个或多个阴影，该属性值由逗号分隔。

值	描述
h-shadow	必需，水平阴影的位置。允许负值
v-shadow	必需，垂直阴影的位置。允许负值
blur	可选，模糊距离
color	可选，阴影的颜色

元素阴影

box-shadow 属性可以为元素添加阴影。

box-shadow: h-shadow v-shadow blur spread color inset;

/* 示例代码 */
#para {
  box-shadow: 2px 2px 4px 8px #FF0000;
}

提示：box-shadow 属性可向元素添加一个或多个阴影，该属性值由逗号分隔，默认为 outset 外部阴影。

值	描述
h-shadow	必需，水平阴影的位置。允许负值
v-shadow	必需，垂直阴影的位置。允许负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色
inset	可选，将外部阴影 (outset，默认) 改为内部阴影

多重阴影

无论是 text-shadow 还是 box-shadow，都是支持多重阴影的，如下：

/* 示例代码 */
.text-shadow {
    text-shadow: 1px 1px 5px gold, 5px 5px 2px pink, -2px -2px 6px green;
}
.box-shadow {
    box-shadow: 2px 4px 6px pink, -2px -4px 6px green;
}

试一试文字多重阴影

4. 开放字体的支持

以前 CSS3 的版本，网页设计师不得不使用用户计算机上已经安装的字体，使用 CSS3，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。

您所选择的字体在 CSS3 中使用 @font-face 规则进行定义使用。

在使用开放字体之前，我们先了解一下不同的字体格式：

字体格式

TrueType 字体 (TTF)
TrueType 是 1980 年代后期由 Apple 和 Microsoft 开发的字体标准。 TrueType 是 Mac OS 和 Microsoft Windows 操作系统最常用的字体格式。
OpenType 字体 (OTF)
OpenType 是可缩放计算机字体的格式。它基于 TrueType 构建，并且是 Microsoft 的注册商标。今天，OpenType 字体在主要计算机平台上得到普遍使用。
Web 开放字体格式 (WOFF)
WOFF 是用于网页的字体格式。它于 2009 年开发，现已成为 W3C 的推荐标准。 WOFF 本质上是具有压缩和其他元数据的 OpenType 或 TrueType。目标是支持在有带宽限制的网络上从服务器到客户端进行字体分发。
Web 开放字体格式 (WOFF 2.0)
TrueType/OpenType 字体比 WOFF 1.0 提供更好的压缩。
SVG 字体/形状
SVG 字体允许在显示文本时将 SVG 用作字形。 SVG 1.1 规范定义了一个字体模块，该模块允许在 SVG 文档中创建字体。您还可以将 CSS 应用于 SVG 文档，同时 @font-face 规则可以应用于 SVG 文档中的文本。
嵌入式 OpenType 字体 (EOT)
EOT 字体是 Microsoft 设计的 OpenType 字体的紧凑形式，用作网页上的嵌入式字体。

使用字体

在 @font-face 规则中：首先定义字体的名称（例如 myFont），然后指向该字体文件。

提示：字体 URL 始终使用小写字母。大写字母可能会在 IE 中产生意外结果。

如需将字体用于 HTML 元素，请通过 font-family 属性引用字体名称（myFont）：

/* 示例代码 */
@font-face {
  font-family: myFont;
  src: url(sansation_light.woff);
}
div {
  font-family: myFont;
}

下表列出了能够在 @font-face 规则内定义的所有字体描述符（font descriptor）：

描述符	描述
font-family	必需，定义字体名称
src	必需，定义字体文件的 URL
font-stretch	可选，定义应如何拉伸字体，默认值是 "normal"
font-style	可选，定义字体的样式，默认值是 "normal"
font-weight	可选，定义字体的粗细，默认值是 "normal"
unicode-range	可选，定义字体支持的 UNICODE 字符范围，默认值是 "U+0-10FFFF"

5. 媒体查询

CSS2 中引入了 @media 媒体类型规则，它让为不同媒体类型定义不同样式规则成为可能。

例如：您可能有一组用于计算机屏幕的样式规则、一组用于打印机、一组用于手持设备等等。

不幸的是，除了打印媒体类型之外，这些媒体类型从未得到过设备的大规模支持。

CSS3 中引入了媒体查询，扩展了 CSS2 媒体类型的概念：它们并不查找设备类型，而是关注设备的能力。

媒体查询可用于检查许多事情，例如：

视口的宽度和高度
设备的宽度和高度
方向（平板电脑/手机处于横向还是纵向模式）
分辨率

根据不同的媒体类型（设备类型）和条件来区分各种设备（例如：电脑、手机、平板电脑、盲文设备等），并为它们分别定义不同的 CSS 样式。媒体查询能让 CSS 可以更精确的作用于不同的设备或同一设备的不同条件，让所有用户都能得到很好的用户体验。

语法规范

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  /* CSS样式 */
}

用 @media 开头，注意 @ 符号
mediatype 是媒体类型，比如常见的值：
screen - 表示电脑屏幕、平板电脑、智能手机等
print - 表示打印机和打印预览
all - 表示所有设备

示例

当浏览器的宽度为 600px 或更小时，设置样式：

@media screen and (max-width: 600px) {
  /* CSS样式 */
}

当浏览器的宽度为 800px 或更宽时，设置样式：

@media screen and (min-width: 800px) {
  /* CSS样式 */
}

当浏览器的方向处于横屏模式时，设置样式：

@media only screen and (orientation: landscape) {
  /* CSS样式 */
}

当浏览器的宽度介于 600px 和 900px 之间或大于 1100px 时，设置样式：

@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  /* CSS样式 */
}

6. 动画支持

动画使元素逐渐从一种样式变为另一种样式，在 CSS3 中，有如下三个关键字可以用来实现动画效果：

transform，意为变换
transition，意为过渡
animation，意为动画

Transform

transform 意为变换，其可以改变元素的大小、位置、形状等属性。

transform可以分为2D变换和3D变换：

2D变换：二维空间进行变换操作（即只有X轴和Y轴）
3D变换：三维空间进行变换操作（即除了二维的X轴和Y轴之外还有一个Z轴）

2D变换方法

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素，试一试
translateX(n)	定义 2D 转换，沿着 X 轴移动元素
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度，试一试
scaleX(n)	定义 2D 缩放转换，改变元素的宽度
scaleY(n)	定义 2D 缩放转换，改变元素的高度
rotate(angle)	定义 2D 旋转，在参数中规定角度，试一试
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴，试一试
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴

3D变换方法

函数	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵
translate3d(x,y,z)	定义 3D 转化
translateX(n)	定义 3D 转化，仅使用用于 X 轴的值
translateY(n)	定义 3D 转化，仅使用用于 Y 轴的值
translateZ(n)	定义 3D 转化，仅使用用于 Z 轴的值
scale3d(x,y,z)	定义 3D 缩放转换
scaleX(n)	定义 3D 缩放转换，通过给定一个 X 轴的值
scaleY(n)	定义 3D 缩放转换，通过给定一个 Y 轴的值
scaleZ(n)	定义 3D 缩放转换，通过给定一个 Z 轴的值
rotate3d(x,y,z)	定义 3D 旋转
rotateX(x,y,z)	定义沿 X 轴的 3D 旋转，试一试
rotateY(x,y,z)	定义沿 Y 轴的 3D 旋转，试一试
rotateZ(x,y,z)	定义沿 Z 轴的 3D 旋转，试一试
perspective(n)	定义 3D 转换元素的透视视图，试一试

提示：仅仅使用 transform 是无法实现动画效果的。因为 transform 只是对元素进行生硬的变化，这个变化是瞬间的，所以并没有展现一种持续变化的效果。

一般地，我们可以将其与下面即将说到的 transition 搭配使用来得到各种动画效果。

Transition

transition 过渡，允许 CSS 的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变 CSS 的属性值。

简单来说，transition 的含义就是元素某一 CSS 属性的过渡，语法如下：

transition：[ transition-property ] [ transition-duration ] [ transition-timing-function ] [ transition-delay ]

可以看出 transition 是一个复合属性，它可以组合使用，也可以拆成四个子属性使用：

属性	描述	值
transition-property	用于设置需要过渡的 CSS 属性，默认 all	none\|all\|property
transition-duration	用于设置过渡的持续时间，默认 0	试一试
transition-timing-function	用于设置过渡的动画类型，默认 ease	linear\|ease\|ease-in\|ease-out\|ease-in-out\|cubic- bezier(n,n,n,n) 试一试
transition-delay	用于设置过渡的开始延时，默认 0	试一试

Animation

animation 相比 transition 制作动画拥有更高的自定义性，它可以定义每一帧的行为，语法如下：

animation: [ animation-name ] [ animation-duration ] [ animation-timing-function ] [ animation-delay ] [ animation-iteration-count ] [ animation-direction ]

animation 的使用需要先通过 @keyframes 定义动画的各个状态，我们一般称之为关键帧，如下：

@keyframes rainbow {
  0% { background: #c00 }
  50% { background: orange }
  100% { background: yellowgreen }
}
#para {
  animation: rainbow .5s step-end infinite alternate;
}

下表列出了 @keyframes 规则和常用 animation 属性：

属性	描述	值/示例
@keyframes	规定动画模式	试一试
animation-name	规定 @keyframes 动画的名称或样式名，默认 none	keyframename\|none
animation-duration	规定动画完成一个周期应花费的时间，默认 0	试一试
animation-timing-function	规定动画的速度曲线，默认 ease	linear\|ease\|ease-in\|ease-out\|ease-in-out\|cubic- bezier(n,n,n,n) 试一试
animation-delay	规定动画开始的延迟，默认 0	试一试
animation-iteration-count	规定动画应播放的次数，默认 1	n \| infinite 试一试
animation-direction	规定动画是向前播放、向后播放还是交替播放，默认 normal	normal \| reverse \|alternate \| alternate-reverse 试一试