1.CSS简介
Cascading Style Sheet 层叠样式表
主要用来定义页面中的表现，HTML 描述页面中的内容。
CSS的引入
1.外部样式表
2.内部样式表
通过style标签引入
网站有一些样式是很多页面共有的，把共有的样式写到一个文件中，通过外部样式表引入，维护方便。每个页面特有的样式，如果内容较少放到内部样式表中，内容较多时，为了不影响加载放到外部样式表中。
3.内嵌样式
通过标签的 style 属性引入。这种方式使得HTML和CSS杂糅在一起，不利于后期的维护。制作静态页面时，不建议用这种方式引入。做动态效果时，可能会用 js 改变 style 属性引入一些 CSS 样式。
CSS 语法
1.语法
selector｛
property1：value；
property2：value；｝
选择器 属性声明 = 属性名：属性值；
每个属性声明需要用分号分隔。CSS 注释为 /* */，// 在CSS中无效。
2.浏览器私有属性
浏览器厂商会实现一些还没有成为标准的属性，为了区分标准属性，会在属性前加一些私有前缀。
chrome，safari：-webkit- firefox：-moz- IE：-ms- opera：-o-
假如我们要用到这些私有的属性，为了兼容不同的浏览器，需要这样写：
私有属性在前，标准属性在后
3.属性值语法（value） [<length>|<percentage>auto]{1,4}
包括基本元素(<length>)，组合符号(| [])和数量符号({})。
4.基本元素
关键字：auto,solid,bold...
类型：基本类型（<length>,<percentage>,<color>...） ；其他类型（基本类型组合）（<'pading-width'>,<color-stop>...）
符号（/ ，）： 做分隔属性值用。
inherit，initial：每个属性都可取到这两个值，文档中这两个值隐藏。
5.组合符号
空格：<'font-size'> <'font-family'> —— 12px arial
由空格隔开的两个基本元素，表示这两个基本元素必须出现，而且顺序必须一样。
&&：<length>&&<color> —— green 2px
由 && 连接的两个基本元素必须出现，但顺序无关。
||： underline || overline || line-through || blink —— overline underline
由 || 分隔的基本元素至少要出现一个，顺序无关
|：<color>|<transparent> —— orange
由 | 分隔的两个基本元素只能出现一个。
[ ]： bold[ thin || <length>]
[ ] 主要做分组的作用，[ ] 里可看成一个整体，再和外面基本元素进行计算。
6.数量符号
无数量符号：<length> —— 1px
基本元素只能出现一次。
+：<color-stop>[,<color-stop>]+ —— blue,green 50%,gray
基本元素可以出现一次或多次。
？：inset？&& <color> —— inset blue
？表示基本属性可出现可不出现，相当于一个可选值。
{ }：<length>{2,4} —— 1px 2px
{ } 表示基本元素可以出现最少几次和最多几次。
*：<time>[，<time>]* —— 1s，4ms
* 表示基本元素可出现 0 次、1次或多次。
#：<time># —— 2s，4s
# 表示基本元素出现一次或多次，中间需用逗号隔开。
7.属性值例子
padding-top:<length>|<percentage> —— padding-top:1px;
border-width:[<length>|thick|medium|thin]{1,4} —— border-width:2px;
box-shadow:[inset?&&[<length>{2,4}&&<color>?]]#|none ——
box-shadow:3px 3px rgb(50%,50%,50%),red 0 0 4px inset;
8.@规则语法
@标识符 xxx; @标识符 xxx{}
@media：允许在相同样式表为不同媒体设置不同样式。用来做一些响应式布局。设备只有符合@media这个媒体查询条件，样式才能生效。
@keyframe：主要用来描述 CSS 动画一些中间步骤。
@font-face：通过 @font-face 引入外部字体，使页面中字体更加丰富。
2.选择器
selector｛
property1：value；
property2：value；｝
selector:选择器 属性声明 = 属性名：属性值；
选择器可简单理解为：它是一个表达式，通过这个表达式可选中一系列元素，样式会运用到选中的元素上。
选择器可简单分为：简单选择器 伪元素选择器 组合选择器
简单选择器
1.标签选择器 p
p{ color:blue; } 选中段落应用样式
2.类选择器 .className
<p class = "special stress">段落</p> —— .special{color:red;} class的值可以是多个的。
以点 . 开头；className的值为字母，数字，-，_组成；className必须以字母开头；区分大小写；相同的类名在页面中可出现多次。
3.id选择器 #id
<div id="banner">banner</div> —— #banner{color:gray;}
以#开头；id由字母，数字，-，_组成；id必须以字母开头；区分大小写；只出现一次。
4.通配符选择器 *
*｛color:blue;｝ 选择页面所有元素
5.属性选择器 [att]
<input disabled type="text"> —— [disabled]{background-color:#eee;}
选中具有某个属性的元素。
6.属性选择器 [att=val]
<input type="button"> —— [type=button]{color:blue;}
选中属性值是某个特殊值的元素。id选择器是属性选择器的特例。#nav{}==[id=nav]{}
7.属性选择器 [att~=val]
<h2 class="title sports">标题</h2> —— [class~=sports]{color:blue;}
表示属性里包含了这个值的元素，值以空格分隔。
类选择器为这种属性选择器的特例。.sports{}==[class~=sports]{}
8.属性选择题 [ att |= val ]
<p lang="en-us">Hello!</p> —— [lang |= en]{color:red;}
选择 lang 属性（用于声明语言）为 en 或 en- 开头的元素。用的不多，一般在 lang 属性会用到。
9.属性选择器 [att^=val]
<a href="#html">HTML</a> —— [href^="#"]{color:red;}
选择以某个值开头的元素。如果属性值是一个符号，或者里面包含空格，需要加上引号。
10.属性选择器 [att$=val]
<a href="http://xxx.doc">word文档.doc</a> —— [href$=doc]{color:red;}
选择以某个值结尾的元素。
11.属性选择器 [att*=val]
<a href="http://lady.163.com/15.html">网易女人</a> —— [href*="lady.163.com"]{color:pink;}
选中属性值包含某个值的元素。
12.伪类选择器
<a href="http://www.163.com">网易首页</a>
仅用于链接（以冒号开头，选中href有值的a标签）：
a:link{color:gray;} 未访问过的链接的样式
a:visited{color:red;} 用户已访问过的链接的样式
可用于其他元素：
a:hover{color:green;} 鼠标停留在元素上时的样式
a:active{color:orange;} 当用户鼠标点击时的样式
如果这四种状态都想定义，顺序必须为 link-visited-hover-active
input:enabled{color:#ccc;} 元素可用的状态的样式
input:disabled{color:#ddd;} 元素不可用的状态
input:checked{color:red;} 选中的单选框/复选框
li:first-child{color:red;} 选中第一项
li:last-child{color:red;} 选中最后一项
li:nth-child(even){color:red;} 选中偶数项 odd 奇数项
li:nth-child(3n+1){color:red;} n从0开始，选中第3n+1项
li:nth-last-child(3n+1){color:red;} 从最后一项开始，选中第3n+1项
li:only-child{color:red;} 选择每个li元素是它的父级的唯一子元素。
dd:first-of-type{color:red;} 选择第一个这种类型的元素
dt:last-of-type{color:red;} 选择最后一个这种类型的元素
dd:nth-of-type(even){color:red;} 选中为父级的第偶数个的dd元素
dd:nth-last-of-type(2n){color:red;} 选中为父级的倒数第偶数个的dd元素
span:only-of-type{color:red;} 选中父级只有一个某一种类型的元素
不常用伪类：
：empty 选中页面中没有子元素的元素
：root 选中<html></html>根标签
：not() 选中不包含某个选择器的元素，()内为简单选择器
：target 被锚点选中为目标的元素
：lang() 选中lang值为某些特殊值的元素
简单选择器：
tag{} 标签选择器
.className{} 类选择器
#id{} id选择器
*{} 通配符选择器
[att]{} 属性选择器
:link{} 伪类选择器
简单选择器可进行组合：
img[scr$=jpg]{} 选中 img 标签 + src 值为 jpg 结尾的元素
#banner:hover{} 选中 id 为 banner 元素的 hover 状态
其他选择器
伪元素选择器：为了区别伪类选择器，两个冒号开头
p::first-letter{color:red;} 使第一个字母有特殊样式
p::first-line{color:red;} 使第一行有特殊样式
p::before{content="before";} 在元素内容前插入content中的内容
p::after{content="after";} 在元素内容后插入content中的内容
组合选择器分为后代选择器、自选择器和兄弟选择器
.main h2{color:red;} 后代选择器，选择 .main 中所有的 h2（标题一 标题二）
.main>h2{color:red;} 子选择器，选择父级元素是 .main 的 h2 （标题一）
h2+p{color:red;} 相邻兄弟选择器，选中 h2 后面和它紧邻的 p 元素
h2~p{color:red;} 通用兄弟选择器，选中 h2 后面所有的 p 元素
选择器分组：
h1,h2,h3{color:gray;font-family:sans-serif;} 选择所有 h1,h2,h3 元素，统一样式。
继承、优先级、层叠
1.继承
属性继承：在某个元素上的样式，它里面的子元素可以继承到它的样式。
继承属性：color font text-align list-style ...
非继承属性：background border position ...
每个属性都可以取 inherit 和initial 这两值，如果显式用了 inherit 可把非继承属性变为可继承。
2.优先级
优先级高的样式会覆盖掉优先级低的样式。
计算方法：（从上到下权重降低）
1000—— a：行内样式（写在标签style属性里的样式）
100 —— b：ID选择器的数量
10 —— c：类选择器、伪类选择器和属性选择器的数量
1 —— d：标签选择器和伪元素选择器的数量
一个选择器优先级的值：value=a*1000+b*100+c*10+d
3.CSS层叠
元素的相同的属性会被覆盖：高的优先级覆盖低的优先级，后面覆盖前面
元素不同的属性会合并
最后应用的样式有：color：green，text-align：right，font-weight：bold
CSS 改变优先级：改变先后顺序 提升选择器优先级 ｛｝中加上 !important
选择器兼容性说明：主流浏览器基本都支持，IE 低版本有较多的兼容问题。
3.文本
介绍常用文本属性
字体
1.改变文字大小
font-size:<length>|<percentage> 当属性值为2em,200%时参照父元素font-size
2.改变字体
font-family:[<family-name>|<generic-family>]#
<family-name> 指定具体字体名称
<generic-family> 通用名称，serif | sans-serif 代表一类字体，哪一种字体由浏览器决定。
font-family:arial,Verdana,sans-serif; 优先顺序，优先使用arial字体
3.加粗字体
font-weight:normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
绝大多数字体不支持9等，一般情况下只支持 400 和 700
4.倾斜字体
font-style:normal | italic 绝大多数字体有斜体
5.行距
line-height:normal | <number> | <length> | <percentage>
line-height:3em;==line-height:3; 当 line-height 为 number 时，继承是直接继承，line-height 就是3，字体大小改变行高改变。
line-height:300%; 当 line-height 为 percentage 时，先计算再继承，line-height 成为固定值，字体改变行高不变。
6.字体属性缩写
font : [ <font-style> || <font-weight>] ? <font-size> [ / <line-height>] ? <font-family>
font:20px arail,serif
font:italic bold 20px/1.5 arail,serif;
7.改变文字颜色
color:red; #ff0000 rgb(255,0,0) rgba(255,0,0,1) rgba(255,0,0,0.5)
rgba(0,0,0,0)==transparent 全透明
对齐方式
1.文字对齐
text-align:left | right | center | justify
文字居左对齐、居右对齐、居中、两端对齐（自动处理空格）
2.图像垂直对齐
vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>
默认为 baseline ,父元素的基线；top 为当前行最高点；text-top 为文本最高点；percentage 参照行高；sub 为下标；super 为上标；<length> 20px 以基线为起点往上移动 20px,负数则往下移动。
3.首行缩进
text-indent:<length>|<percentage>
text-indent:2em; 缩进两个字，可为负值表示反方向缩进
text-indent:20%; 参照物为容器（浏览器）宽度
text-indent:-9999px; 隐藏文字
格式处理
1.white-space
white-space:normal | nowrap | pre | pre-wrap | pre-line
normal（把连续空格和换行当作一个空格）；pre（有多少空格都承认，回车也承认，不自动卷绕） ；pre-wrap（自动卷绕，承认空格回车）；nowrap（不卷绕） ；pre-line（合并空格，保留换行）
2.让长单词自动换行
word-wrap:normal | break-word
3.让单词的任意两个字母可分开
word-break:normal | keep-all | break-all
文本修饰
1.文字阴影
text-shadow:none | [<length>{2,3}&&<color>?]#
text-shadow:1px 2px 3px #f00;
x 轴偏移方向 y轴偏移方向 阴影模糊半径 阴影颜色（不写默认为文字颜色）
2.文字标注
text-decoration:none | [underline || overline || line-through ]
高级设置
1.文字的...效果
text-overflow:clip | ellipsis 一定要配合 overflow 和 white-space 属性使用
text-overflow:ellipsis;
overflow:hidden; 溢出时截掉
white-space:nowrap; 不自动换行（卷绕）
2.定义鼠标的形状
cursor:[<url>,]*[auto | default | none | help | pointer | zoom-in | zoom-out | move]
url 可自定义形状，可写多个；auto 为自动处理；default 为普通光标；none 消失；help 为带问号的箭头；pointer 为手型；zoom-in 放大；zoom-out 缩小；move 为移动符号
3.强制继承
color:inherit; 强制改成父元素的值
font-size:inherit; font-family:inherit; font-weight:inherit; font-style:inherit;
line-height:inherit; text-decoration:inherit; text-align:inherit; text-indent:inherit;
white-space:inherit; word-wrap:inherit; word-break:inherit; text-shadow:inherit;
4.盒模型
CSS 盒模型：content=width*height内容 padding内边距 border边框 margin边距
border，padding，margin都有 top，right，bottom，left四部分。
width：<length> | <percentage> 一般情况下只给块级元素设置宽度，当为百分比时，父元素宽度为参照物。max-width min-width 可设置
height： <length> | <percentage> 一般情况下只给块级元素设置宽度，当为百分比时，父元素宽度为参照物。max-height min-height 可设置
padding：[<length> | <percentage>] {1,4} 内边距 TRBL 上右下左 顺时针设置内边距
padding 的值的缩写：
padding:20px; == padding:20px 20px 20px 20px;
padding:20px 10px; == padding:20px 10px 20px 10px;
padding:20px 10px 30px; == padding:20px 10px 30px 10px;
对面相等，后者省略；4 面相等，只设一个。
margin：[<length>|<percentage>]{1,4} 外边距 TRBL，值缩写与 padding 相同。
margin 合并：毗邻的两个兄弟元素之间的外边距会合并，父元素和其第一个（最后一个）子元素也会发生外边距合并现象。空的块级元素上下外边距合并。
水平居中：margin:0 auto; 浏览器自动平分多余空间使块级元素水平居中。
border：[<border-width>||<border-style>||<border-color>] 边框
border-width:<length>{1,4} 宽度
border-style:[ solid | dashed | dotted ]{1,4} 边框样式
border-color:[<color> | transparent ]{1,4} 默认为字体颜色
border-radius:[<length>|<percentage>]{1,4}[/[<length>|<percentage>]{1,4}]? 圆角边框
x 方向半径 y 方向半径 左上角-右上角-右下角-左下角 border-top-left-radius:5px;
overflow:visible | hidden | scroll | auto 设置盒子中内容超出该如何显示
默认为 visible，超出部分仍然显示 hidden：超出部分隐藏
scroll：出现水平滚动条和垂直滚动条
auto：内容未超出时无滚动条，超出盒子时显示垂直滚动条
overflow-x,overflow-y 设置水平滚动条和垂直滚动条
box-sizing:content-box | border-box 设置width和height指定宽高的区域
默认为内容区 conent-box，border-box 为外边框区。
box-shadow:none | <shadow>[,<shadow>]* 阴影
<shadow>:inset?&&<length>{2,4}&&<color>?
box-shadow:4px 6px 3px 3px red; 外阴影
水平偏移{向右) 垂直偏移(向下) 模糊半径(1.5px模糊) 阴影大小 阴影颜色(默认为文字颜色)
box-shadow:inset 0px 0px 5px red; 内阴影
box-shadow:3px 3px 5px 2px，inset 0px 0px 5px red; 多阴影
阴影不占空间，起到修饰效果
outline:[<outline-width>||<outline-style>||<outline-color>] 轮廓（border外）
outline-width:<length>
outline-style:solid | dashed | dotted
outline-color:<color>| invert(和当前背景色相反，仅IE及OPera有效)
关于CSS属性的浏览器兼容性，可以通过caniuse查询。
border-radius ie8及以下不支持
box-sizing ie7及以下不支持
box-shadow ie8及以下不支持
outline ie7及以下不支持
5.背景
background-color:<color> 背景颜色
background-image:<bg-image>[,<bg-image>]* 设置背景图片
<bg-image> = <image> | none
引入image方法：url("http:..163.com/images/x.png")
先写的图片在上层，后引入在下层，背景颜色在最后一层
background-repeat:<repeat-style>[,<repeat-style>]* 平铺背景图片
<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}
{1,2}:当有两个值时，第一个表示x轴方向，第二个表示y轴方向
repeat-x | repeat-y 只沿 x 轴（y轴）平铺
space：在图片之间留空隙使得图片正好容下
round：平铺时图片会进行伸缩，完整展现图片
sapce 与 round 效果
background-attachment:<attachment>[,<attachment>]* 页面滚动时背景的状态
<attachment> = scroll | fixed | local 默认为scroll，背景不随内容滚动；local 背景随内容滚动；fixed较少使用。
background-position:<positon>[,<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>]?]
background-position: 10px 20px ; 默认为 0 0，x轴向右偏移10px,y轴向下偏移20px。只有一个值时为 x 轴方向偏移，y 轴默认为 50%，容器的50%处。
linear-gradient() 线性渐变
[ [<angle>|to <side-or-corner>,]?<color-stop>[,<color-stop>]+
<side-or-corner> = [ left | right ] || [ top || bottom ] 默认值为bottom
<color-stop> = <color>[ <percentage> | <length> ]
background-image: linear-gradient(red,blue 20px,red 40px);
background-image: repeating-linear-gradient(red,blue 20px,red 40px); 重复渐变
radial-gradient() 镜像渐变（圆沿半径方向从内向外渐变）
[ [circle || <length>] [at <position>]?, |
[ellipse || [<lengrh> | <percentage>]{1,2} ] [at <position>]?, |
[ [circle | ellipse] || <extent-keyword>] [at <position>]?,| at <position>,
]? <color-stop>[,<color-stop>]+
<extent-keyword> = closest-side | farthest-side | closest-corner | farthest-corner
background: radial-gradient(red,blue);
background-image: repeating-radial-gradient(red,blue 20px,red 40px);
background-origin:<box>[,<box>]* 决定背景图片的坐标区域
<box>:border-box | padding-box | content-box 默认值为padding-box
background-clip:<box>[,<box>]* 裁剪背景图平铺区域
默认值为 border-box
background-size:<bg-size>[,<bg-size>]* 改变背景图大小
<bg-size> = [<length> | <percentage> | auto]{1,2} | cover | contain 默认宽高为原始大小
cover 图片宽高不小于容器，让图片撑满容器
contain 图片宽高不大于容器，以最大形状完整的显示在容器里
cover 和 contain 效果
background:[<bg-layer>,]* <final-bg-layer>
<bg-layer> = <bg-image> || <position> [ /<bg-size>]? || <repeat-style> || <attachment> || <box> || <box> 前一个 box 为 background-origin，后一个为 background-clip。
<final-bg-layer> = <bg-layer> || <'background-color'> 如果给背景加上颜色一定要出现在最后一层
background:url(red.png) 0 0 / 20px 20px no-repeat ,
url(blue.png) 50% 50% / contain no-repeat content-box
green;
content-box 为background-origin 也为 background-clip green 为背景色
背景的补充说明
本节所讲语法和案例，均以W3规范为准，所有案例在webkit内核的高版本浏览器（如chrome）中测试通过。
部分语法和案例在低版本浏览器（如IE6、IE7、IE8等）中不支持，比如：多背景图、渐变背景、background-size、background-origin、background-clip等。
网友评论