1、概述
层叠样式表（Cascading Style Sheet，CSS），CSS用于定义HTML内容在浏览器内的显示样式。
CSS的引入：
外部样式表：link标签，href属性中是CSS文件的URL地址。当样式是许多页面公有的，把公有样式写在一个或多个文件中，通过外部样式表引入，便于维护。单个页面的样式但内容比较多，也用外部样式表。
<head>
<link rel=”stylesheet” href=”base.css”>
</head>
内部样式表：style标签。单个页面的特有样式，且样式比较少，放在内部样式表。
<head>
<style>
body{background-color:red;}
p{margin-left:20px;}
</style>
</head>
内嵌样式：标签的style属性。使HTML和CSS混杂在一起，不利于后期维护。做静态页面时，不建议用内嵌样式引入。做动态效果时，可能会用js来改变style属性，引入CSS样式。
<p style=”color:red;margin-left:20px;”> this is a paragraph<p>2、规则语法
2.1 普通规则
select{
property1:value;
property2:value;
…
}
select表示选择器，{}中是语法声明块，选择器和语法声明块称为一个CSS规则。语法声明块中均是属性声明，格式“属性名:属性值;”，用;分隔。
属性值包括基本元素、组合符号、数量符号。
基本元素包括：关键字（auto solid bold…）；类型（基本类型<length><percentage> <color>…其它类型<'padding-width'><color-stop>），<'padding-width'>这种类型跟属性同名，需要加引号;符号（/,）分隔属性值；inherit和initial（每个属性值都有这两个值，在文档中隐藏）。
符号 |
描述 |
|
组合符号 |
空格 |
必须出现，且顺序一致 |
&& |
必须出现，但不要求顺序 |
|
|| |
至少出现一个，不要求顺序 |
|
| |
只能出现其中一个 |
|
[] |
分组，将其中内容看成整体 |
|
数量符号 |
无 |
只能出现一次 |
+ |
一次或多次 |
|
# |
一次或多次，用,隔开 |
|
* |
零次、一次或多次 |
|
{2,4} |
至少2次，最多4次 |
|
? |
可选 |
2.2 @规则
@标识符 xxx;
@标识符 xxx{属性声明块}
常用@规则：
@media主要用来做响应式的布局，设备只有符合@media媒体查询条件里面的样式，才能生效。
@keyframes描述CSS动画的一些中间步骤。
@font-face引入外部字体，使页面中字体更加丰富。
@import@charset @namespace @page @supports @document浏览器很少用到，且支持不是特别好。
2.3 浏览器私有属性
浏览器厂商会实现一些还没有成为标准的属性，在属性前添加私有前缀。chrome,safari（-webkit-）、firefox（-moz-）、IE（-ms-）、opera（-o-）。为了兼容不同浏览器，格式如下：
.pic{
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);/*私有属性写在前面*/
transform:rotate(-3deg);/*标准属性写在后面*/
}3、选择器
3.1 简单选择器
在属性声明块前面的部分称为选择器。简单理解为一个表达式，通过表达式可以选中一系列的元素，这些样式会运用到选中的元素上去。
选择器 |
符号 |
示例 |
描述 |
通配符选择器 |
* |
*{color:red;} |
页面中所有元素 |
标签选择器 |
标签名E |
p{color:red;} |
标签与选择器相同的元素 |
类选择器 |
.类名 |
.special{color:red;} |
一个class可以有多个属性值 |
id选择器 |
#id名 |
#banner{color:red;} |
|
属性选择器 |
E[att] |
[disabled]{color:red;} |
针对特定属性 |
E[att=val] |
[type=”button”]{color:red;} |
针对特定的属性值 |
|
E[att~=val] |
[class~=special]{color:red;} |
class属性中包含special |
|
E[att|=val] |
[lang|=en]{color:red;} |
以en/en-开头 |
|
E[att^=val] |
[href^=”#”]{color:red;} |
以某些值开头 |
|
E[att$=val] |
[href$=pdf]{color:red;} |
以某些值结尾 |
|
E[att*=val] |
[href*=”.com”]{color:red;} |
包含某些值 |
注：属性值是符号或包含空格要用""；类选择器和id选择器是属性选择器的特例，如.sports{}==[class~=sports]{}、#nav{}==[id=nav]{}
分类 |
伪类选择器 |
示例 |
描述 |
链接等 UI |
:link |
a:link{} |
设置链接样式，与a标签选择器的区别，要求href必须有值。（只用于链接） |
:visited |
a:visited{} |
访问过的链接样式（只用于链接） |
|
:hover |
a:hover{} |
鼠标移上去的样式 |
|
:active |
a:active{} |
鼠标点击但未弹起的样式 |
|
:target |
h3:target{} |
通过锚点跳转到该指定位置的样式 |
|
:focus |
input:focus{} |
获得焦点时的样式 |
|
可用性 |
:ebabled |
input:enabled{} |
一个元素可用状态的样式 |
:disabled |
input:disabled{} |
一个元素不可用状态的样式 |
|
:checked |
input:checked{} |
单复选框等被选中则改变样式 |
|
元素 的项 |
:first-child |
li:first-child{} |
第一项，或:last-child最后一项 |
:nth-child() |
li:nth-child(even){} |
偶数项，odd或3n+1或:nth-last-child() |
|
:only-child |
:only-child{} |
选中只有一个子元素的列表 |
|
元素中 某类项 |
:first-of-type |
dd:first-of-type{} |
选中第一个该类型元素，或:last-of-type |
:nth-of-type() |
dd:nth-of-type(even){} |
偶数项，或:nth-last-of-type() |
|
:only-of-type |
span:only-of-type{} |
只有一个<span></span>子元素 |
|
不常用 伪类 |
:empty |
|
页面中没有子元素的元素 |
:root |
|
根标签 |
|
:not() |
|
不包含某选择器的元素 |
|
:target |
|
被锚点选中为目标的目标元素 |
|
:lang() |
|
lang值是某些特殊值的元素 |
first-child匹配某父类元素的第一个子元素，且必须是冒号之前的类型，first-of-type匹配某父类元素的第一个该类型子元素。
用于链接必须是这个顺序:link :visited :hover :active。
简单选择器可以进行组合，选中同时满足的元素，如img[src$=jpg]{} #banner:hover{}。
3.2 伪元素选择器
::first-letter{} 第一个字符
::first-line{}第一行
::before{content:”在元素前面插入引号中内容”;}
::after{content:”在元素后面插入引号中内容”;}
::selection{}为选中元素设置样式
3.3 组合选择器
后代选择器.main h2{}
子选择器.main>h2{} .main下面第一级的h2元素
兄弟选择器 h2+p{} p前面紧邻有h2
h2~p{}只要p前面有h2
.main>*li .main所有子元素的后代元素li
选择器分组，当几种选择器效果相同，用,把选择器隔开，后面跟语法声明块。
3.4 继承
某个元素的子元素可以继承它的样式。自动继承的属性color、font相关、text相关、list-style等，不能自动继承background、border、position等。看文档中Inherited是yes还是no判断是否自动继承，设置inherit属性，可以把非继承变为继承。
3.5 优先级（CSS级联Cascading）
CSS优先级的计算方法，将权重相加。
a=行内样式style，1000
b=id选择器，100
c=类、伪类和属性选择器，10
d=标签选择器和伪元素选择器，1
CSS层叠，相同属性优先级高覆盖低、后面覆盖前面，不同属性合并。
改变优先级，改变先后顺序、添加选择器提升优先级、!important 加在属性值后面（不能被其它规则覆盖）。
4、文本
4.1 文字效果
名称 |
格式 |
例子 |
字号 |
font-size:<length>|<percentage> |<absolute-size>|<relative-size> |
font-size:12px; 或2em; 200%; |
字体 |
font-family:[<family-name>|<generic-family>]# <generic-family>=serif|san-serif|monospace|cursive|fantasy |
font-family:arial; font-family:arial, sans-serif; |
加粗 |
font-weight:normal|bold |bolder|lighter|100|200|300|400|500|600|700|800|900 |
font-weight:bold一般只支持400(normal)700(bold) |
斜体 |
font-style:normal|italic|oblique |
italic斜体，oblique该 字体没有斜体则强制倾斜 |
行高 |
line-height:normal|<number>|<length>|<percentage> |
默认约1.14，比字号稍大 文字垂直居中 |
缩写 |
font:[[<font-style>||<font-variant>||font-weight|| <font-stretch>]?<font-size>[/<line-height>]?<font-family>]| caption|icon|menu|message-box|small-caption|status-bar |
font:30px/2 “Consolas”,monospace; 必须有size、family，顺序 |
颜色 |
color:red; color:#ff0000; color: rgb(255,255,0); color:rgba(255,255,0,1) |
颜色名称；三个十六进制的两位数表示RGB； α通道，透明度，0~1； 0全透明transparent； |
generic-family每一个都代表一类字体，具体选择哪种字体，由浏览器或系统指定。font通常设置在body元素中，可继承。
英文字体有五大类：serif 在字母主要笔画的末端有装饰
如果字体名称中有空格,用单引号或双引号括起来。font-family值可以用,隔开，添加备选字体，当浏览器不支持前面的字体时，可以使用后面的。
4.2 对齐方式
text-align可继承，vertical-align不可继承。
名称 |
格式 |
例子 |
左右对齐 |
text-align:left|right|center|justify |
justify两端对齐 |
上下对齐 不可继承 |
vertical-align:baseline|sub|super| top|text-top|middle|button|text-bottom| <percentage>|<length> |
20px 以baseline为起点，往上 百分比参照line-height top行高最高点 text-top文字最高点 |
首行缩进 |
text-indent:<length>|<percentage> |
2em两个文字大小 20%以容器为参照 设置负的极大值，隐藏文字。 |
4.3 格式处理
white-space:normal|no-wrap|pre|pre-wrap|pre-line
normal换行、空格、Tab被合并为一个空格，卷绕
no-wrap换行、空格、Tab被合并为一个空格，不卷绕，太长也不换行
pre按原样显示，不卷绕
pre-wrap按原样显示，卷绕。最常用。
pre-line合并空白保留换行，卷绕
word-wrap:normal|break-word
允许长单词自动换行
word-break:normal|keep-all|break-all
一个单词也能被打断、换行break-all
text-overflow:ellipsis/*如果文字太长，后面加…*/
overflow:hidden; /*溢出截掉*/
white-space:no-wrap;/*不换行*/
text-overflow默认为clip。
4.4 文字效果
text-shadow:none|[<length>{2,3}&&<color>?]#
阴影。3px5px 5px rgba(0,255,0,0.5)向 x、y、z方向偏移，右、下、模糊（里）。颜色不写阴影则为文字颜色。
可以做出很多不同效果：0px -1px 0px #000000,0px 1px 3px #606060; 黑、灰，像刻进去。
text-decoration:none|[underline||overline||line-through]
下划线、上划线、删除线。
4.5 高级设置
cursor:[<url>,]*[auto|default|none|help|pointer|zoom-in|zoom-out|move]
定义鼠标形状，只列出了常用的属性值。url自定义形状图片；auto自动；default默认；none消失；鼠标形状
cursor:url(xx.cur),pointer;假如url图片访问失败，pointer起作用，url可以有多个。
5、盒模型
每个HTML元素就像位于各自的盒子中。
width:<length>|<percentage>|auto
height:<length>|<percentage>|auto
盒模型大小。默认情况下，一个盒子的大小刚好容纳下其中的内容，并随着内容的变化而变化。如果自定义盒子大小，用到width和height。百分比的参照物是外部盒模型。
min-width,max-width,min-height,max-height
指定一个盒子在浏览器窗口较窄或较宽时显示的最小宽度和最大宽度。
padding:[<length>|<percentage>]{1,4}
padding-top:[<length>|<percentage>]
padding-right:[<length>|<percentage>]
padding-bottom:[<length>|<percentage>]
padding-left:[<length>|<percentage>]
内边距。指定元素内容和边框保持多大距离。可以一次设置四个值，也可以分别设置。值缩写：从top开始顺时针旋转top right bottom left。
padding:20px; == padding:20px 20px 20px20px;
padding:20px 10px; == padding:20px 10px20px 10px;
padding:20px 10px 30px; == padding: 20px10px 30px 10px;
margin:[<length>|<percentage>|auto]{1,4}
外边距折叠（Collapsing margins）：相邻元素的外边距合并，父元素与子元素的外边距合并，取最大值。
水平居中，margin:0 auto;。
分别设置与padding相似。
对于inline元素，默认只有左右外边距。
border:<border-width>||<border-style>||<boder-color>
border-width:[<length>|thin|medium|thick]{1,4}
border-style:[solid|dashed|dotted|double|…]{1,4}
border-color:[<color>|transparent]{1,4}
边框。默认中等边框、元素字体颜色。分别设置与padding相似。
border-radius:[<length>|<percentage>]{1,4}[/<length>|<percentage>]{1,4}?
圆角。分别对应四个x方向和四个y方向。border-radius:10px;四个角均是半径为10px的圆角。border-radius:0px 5px10px 15px/20px 15px 10px 5px;四个不同的角。也可以分别设置每个角，border-top-left-radius:10px;。
overflow:visible|hidden|scroll|auto
overflow-x overflow-y
溢出。
box-sizing:content-box|border-box
width和height指定的区域，是否包含padding和border。
box-shadow:none|<shadow>[,<shadow>]*
<shadow>:inset?&&<length>{2,4}&&<color>?
阴影。不占空间。
box-shadow:4px 6px 3px 3px red;有一个红色相同大小盒子在后面，分别对应水平偏移、垂直偏移、模糊半径、阴影大小、颜色。水平偏移和垂直偏移可以有负值，模糊半径是在偏移的外边缘分别向外向内有1.5px的模糊，模糊半径和阴影大小可以不写，color默认为文字颜色。
outline:<outline-width>||<outline-style>||<outline-color>
outline-width:<length>|thin|medium|thick
outline-style:solid|dashed|dotted|…
outline-color:<color>|invert
轮廓，与周围内容背景相同时，用于区分。在border以外，与border相似，但不占空间，且没有四个方向，不能单独设置。
6、背景
6.1 基础
background-color:<color>
背景颜色，默认透明transparent。颜色速查手册：http://how2j.cn/k/html/html-font/644.html#step2089
background-image:<bg-image>[,<bg-image>]*
<bg-image>=<image>|none
背景图片。url(“http://163.com/images/x.png”)绝对地址；url(“/images/x.png”)相对根路径的地址；url(“../image/x.png”)父目录下。用单引号或不写引号都可以。
background-image:url(red.png),url(blue.png);background-color:green; 同时添加了背景图片和颜色，此时，先写的图片在上层，后写的在下层，背景色始终在底层。
background-repeat:<repeat-style>[,<repeat-style>]*
<repeat-style>=repeat-x|repeat-y|[repeat|space|round|no-repeat]{1,2}
图片重复方式，默认repeat。repeat沿x、y轴平铺；space每张图片之间留空隙，使平铺正好能容下，不会有半张；round平铺同时伸缩，使正好铺满；两个值时，一个x轴平铺形式，一个y轴，用空格隔开。与背景图片相对应，如果比background-image少，则后面图片也遵循前面的规则。
background-attachment:<attachment>[,<attachment>]*
<attachment>=scroll|fixed|local
scroll默认，背景不随内容的滚动而滚动；local背景随内容一起动；fixed几乎不用，相对的是整个窗口。也可以写多个，与图片一一对应。
background-position:<position>[,<position>]*
<position>=[left|center|right|top|bottom|<percentage>|<length>]|
[left|center|right|<percentage>|<length>] [top|center|bottom|<percentage>|<length>]|
[center|[left|right][<percentage>|<length>]?]&&[center|[top|bottom][<percentage>|<length>]?]
图片位置。一个值时，另一个值默认center；用空格空开两个指标，对应x、y轴；关键词加值对应x、y轴。
0 0;默认
10px20px;
20%50%; 图片的20% 50%同时是整个容器的20% 50%，两点重合。
right10px top 20px; right、top只是参照物。
0-100px; 截出一张图片。
background-size:<bg-size>[,<bg-size>]*
<bg-size>=[<length>|<percentage>|auto]{1,2}|cover|contain
图片大小。20px 20px 50% 50% auto cover contain对应下面的图。
6.2 渐变
linear-gradient()
[[<angle>|to<side-or-corner>],]?<color-stop>[,<colorstop>]+
<side-or-corner>=[left|right]||[top|bottom]
<color-stop>=<color>[<percentage>|<length>]
线性渐变。一个角度或者到一个边的方向，一些颜色的断点。默认to bottom，角度0相当于to top。
background-image:linear-gradient(red,blue);
(toright bottom,red,blue); (45deg,red,blue); (red,green 20%,blue);
radial-gradient()
[[circle||<length>][at<position>]?,|
[ellipse||[<length>|<percentage>]{2}] [at <position>]?,|
[[circle|ellipse]||<extent-keyword>][at<position>]?,|at <position>,]?
<color-stop>[,<color-stop>]+
<extend-keyword>=closest-side|farthest-side|closest-corner|farthest-corner
径向渐变。（圆、半径、圆心所在位置）（椭圆、2个半径、位置）（圆或椭圆、关键字、圆心位置）
background-image:radial-gradient(red,blue);
(closest-side,red,blue); (circle,red,blue);
(circle100px,red,blue); (100px 50px,red,blue); (100px 50px at 0 0,red,blue);
没设置半径则默认farthest-corner，圆或椭圆要经过这个点。椭圆半径比是图形长宽比，经过最远点，确定唯一椭圆。
background-image:repeating-linear-gradient(red,blue 20px,red 40px);
background-image:repeating-radial-gradient(red,blue 20px,red 40px);
6.3 盒模型中的背景
background-origin:<box>[,<box>]*
<box>=border-box|padding-box|content-box
背景图片0 0坐标的区域。默认background-origin:padding-box;。
background-clip:<box>[,<box>]*
默认background-clip:border-box;区域以padding-box为0 0，向四周铺展。
设置background-origin:content-box;如下面的图。
6.4 background
background:[<bg-layer>,]*<final-bg-layer>
<bg-layer>=<bg-image>||<position>[/<bg-size>]?||<repeat-style>||
<attachment>||<box>||<box>
<final-bg-layer>=<bg-layer>||<’background-color’>
图片层，可以有多个。<position>和<bg-size>之间需要/，因为二者的值可能分不清。两个<box>分别对应background-origin和background-clip，如果只出现一个<box>，则既是origin又是clip。
给背景加颜色，放在底层。
background:
url(reg.png)0 0/20px 20px no-repeat,
url(blue.png)50% 50%/contain no-repeat content-box green;
