###CSS Cascading Style Sheets 层叠样式表
----
####css书写格式
```
<style>
选择器{
属性名：属性值；
}
</style>
```
注意点：
1.style标签必须放入head里
2.{}包括起来的内容是一个声明块，里面是一条条css声明
----
####font属性
1.font-style:*normal*/italic;
作用：设置文字倾斜与否
注意点：
1.*星号包括的为默认值*
2.font-weight:*normal*/bold/thiner/bolder/100...900;
作用：设置文字是否加粗
3.font-size；*medium*/small/large/smaller/larger/px/em/%;
作用：设置文字大小
注意点：
1.chrome浏览器最小文字大小12px
4.font-varient:*normal*/small-caps; 小型大写字母
5.font-family:本地字库;
作用：设置文字字体类型
注意点：
1.开发中常用的英文字体：Arial, Times New Roman.
2.开发中常用的中文字体：宋体，黑体，微软雅黑
3.字体可以写多个，浏览器从左往右去找，找到就不再继续往下找
4.在一个网页中同时设置中,英文字体时，需要把英文字体写前面，中文字体写后面
5.中文字体必须加括号，英文字体可以加，最好加上。
6.font连写：
font:[font-style font-weight font-varient] font-size[/line-height] font-family;
注意点：
1.前三个可以任意次序，任意个数出现
2.font-size和font-family必须有，而且顺序固定，font-family在最后
3.font-size后面还可以设置line-height
----
####text属性
1.text-decoration:*none*/underline/throughline/overline;
作用:为文本添加装饰
注意点：a标签的text-decoration默认为underline
2.text-align:*left*/center/right/justify(两端对齐);
作用:为文本/内容设置在容器中水平居中
3.text-indent:2em;
作用：设置文本缩进
注意点：
1.这个属性一般取值2em，且只对一段文本的首行生效。使缩进2个字符。
2.取值为正，向右缩进，取值为负，向左缩进。
4.text-transform:*none*/uppercase/lowercase/captialize;
作用：设置英文文本的显示大小写状态
5.letter-spacing:px/em; 字符间距
6.word-spacing:px/em; 单词间距
7.扩展：
文本溢出显示省略号：
前提条件：盒子固定高宽
1.white-space:nowrap;
2.overflow:hidden;
3.text-overflow:ellipse;
----
####color属性
1.keywords red green blue black white
2.rgb(0,0,0) (255,0,0) (0,255,0) (0,0,255) (0,0,0) (255,255,255)
3.rgba(0,0,0,0) 第四个参数透明度，0完全透明，1完全不透明
4.十六进制：#000000 / #000
----
####selector
基本选择器：
1.标签选择器 ：html标签
注意：标签选择器会选中一个页面上所有的该标签
2.ID选择器：#id ，id一般是给js用的，如果只是为了加样式，尽量用类选择器
3.类选择器：.className
4.祖先后代选择器：ancestor descendant
注意：祖先后代元素不已定都是p，可以是Id,类，其它关系型选择器同理
5.直接后代选择器：father>son，ie6及以下不支持
6.兄弟元素选择器：brother +/~ siblings
注意：直接兄弟即后面一个，+ ，后面所有兄弟 ~
7.交集选择器：selector1selector2...
8.并机选择器：selector1,selector2,...
9.通配符选择器： *
序选择器：
不区分类型
1.:first-child 选中同级别第一个标签
2.:last-child 选中同级别最后一个标签
3.:nth-child(n) 选中同级别的第n个标签，n从1开始计数
4.:only-child 选中同级别中仅有的那个标签
5.:nth-last-child(n) 倒序选中同级别第n个标签
区分类型
1.:first-of-type 选中同级别中同类型的第一个标签
2.:last-of-type 选中同级别中同类型的最后一个标签
3.:nth-of-type(n) 选中同级别中同类型的第n个标签
4.:only-of-type 选中同级别中唯一类型的那个标签
5.：nth-last-of-type(n) 倒序选中同级别中的第n个标签
其它用法
1.:nth-child(odd) 选中同级别中的奇数项标签
2.:nth-child(even) 选中同级别中的偶数项标签
3.:nth-child(xn+y) 自定义选中同级别中第xn+y项标签,n从0开始计数
如：x=2,y=1：则选中同级别中所有奇数项标签
4.:nth-of-type(odd) 选中同级别中同类型的奇数项标签
5.nth-of-type(even) 选中同级别中同类型的偶数项标签
6.:nth-of-type(2n+1) 自定义选中同级别中同类型的第xn+y项标签，n从0开始计数
7.:not() 否定伪类选择器，选中不符合它规则的所有标签
属性选择器
1.[attr] 选中有attr属性的所有标签
2.[attr="val"] 选中有attr属性且值为val的所有标签
3.[attr^="val"] 选中有attr属性且值以val开头的所有标签
4.[attr$="val"] 选中有attr属性且值以val结尾的所有标签
5.[attr*="val"] 选中有attr属性且值中包含val子串的所有标签
伪类选择器 描述元素在某一时刻的某种状态
链接伪类：
:link a标签未被访问时的状态
:visited a标签已被访问过的状态
通用伪类：
:hover 鼠标移入/移出元素时的状态
:active 元素被点击按下时的状态
表单伪类：
:focus 当文本框获取焦点时的状态
:checked 当单选框/复选框被选中时的状态
:enabled 当表单元素可用时的状态
:disabled 当表单元素不可用时的状态
伪元素选择器
::selection 匹配当前元素中被用户选中或是处于高亮的部分
注意点： ::-moz-selection firefox兼容写法
::before 匹配当前元素的最前部
::after 匹配当前元素的最后部
::first-letter 匹配当前元素的第一个字符
::first-line 匹配当前元素的首行文本
注意：
1.伪类，伪元素选择器都是属于css的范畴，不在dom树中
2.在开发中，一般先写a标签样式，再写a的伪类样式，
a的盒子属性一般都放在a的css里，a的color/text-/font-一般都写在伪类css里
----
####css三大特性
1.继承性
定义：给父元素设置属性后，子元素也具有该属性就是继承性
注意点：
1.不止是子元素可以继承，所有后代元素都可以继承
2.不是所有属性都能继承，只有color/font-/text-/line-开头的属性才能被继承
3.特殊之处在于：a标签的color和text-decoration是不能继承的，h标签的文字大小也是不能继承的
4.继承性通常用于设置网页的共性信息，例如：文字颜色，字体大小，字体类型等
2.层叠性
层叠性是css处理冲突的一种能力，只有多个选择器选中了同一个标签，并且设置了相同的属性时，才会发生层叠。
3.优先级
当多个选择器选中了同一个标签，并且设置了相同的属性时，如何层叠就由优先级来决定
1.间接选中
即继承时，听离得近的祖先元素的
2.直接选中
1.选择器相同时：谁写在后面听谁的
2.选择器不同时：比较权重，谁的权重大听谁的
id>类>标签>通配符>继承>浏览器默认
注意点：
1. !important
此语句用于提升当前属性的优先级至最高，一定要写在要提升权重的属性后面,分号前面。一般情况下，能不用尽量不用它
2. 权重计算规则
1.先比较id选择器个数，id多的权重高，相同则比较类选择器个数
2.类选择器个数多的权重高，相同则比较标签选择器个数
3.标签选择器个数多的权重高，相同则不再进行比较，此时谁写在后面就听谁的
----
####div/span标签
html分类：
容器级标签：可以嵌套所有的标签
文本级标签：只能嵌套 超链接/图片/文字
注意: p是文本级标签
css分类：
块级元素：独占一行，宽度继承父元素，设置了宽高就用设置的宽高
行内元素：不独占一行，宽高被内容撑开，不能设置宽高
行内块级元素：不独占一行，又可以设置宽高
div:一般用于配合css完成网页的基本布局
span:一般用于配合css修改网页中的一些局部信息
----
####display：css元素显示模式切换
display:*none*/block/inline/inline-block;
拓展：
display:none;元素从页面中消失,并且不保留元素位置
visibility:visible;元素可见性，默认可见
visibility:hidden;元素在页面中不可见，但保留元素的位置
----
####background
1.background-color:keywords/rgb()/rgba()/#000000/#000;
2.background-image:url();
注意点：
1.图片地址可以是本地地址，也可以是网络地址
2.图片如果比元素大小大，会只显示元素大小的部分，图片如果比元素小，会重复平铺。
3.网页中每包含一张图片，就会向服务器请求一次，图片过多会加大服务器压力及网页访问速度降低
3.background-repeat:*repeat*/repeat-x/repeat-y/norepeat;
注意点：
1.在开发中，经常会截取某个背景图片的1单位像素的小图片，水平平铺实现背景图片效果，这样减小服务器压力，提高网页访问速度。
4.background-position:*0 0*/offsetX offsetY;
注意点：
1.此属性依赖于background-repeat,只有当repeat取值 norepeat时才有意义。
2.取值可以是px,%,keywords
3.取值百分比时，参照于 背景区域大小减去图片本身大小，也可以为负值
4.如果背景颜色和图片同时存在，图片会覆盖背景色
5.background-attachment:*scroll*/fixed;
6.background:color image repeat position attachment;
注意点：
背景连写不分次序，不限个数。
7.background-size:
作用：设置背景图片的大小
取值：
keywords:
-cover; 宽高都等比拉伸直到都完全覆盖住元素背景区域大小
-contain; 宽高都等比拉伸直到图片宽度=元素背景区域大小 或 图片高度=元素背景区域大小
-auto; 等比拉伸，配合px/%一起使用
px/%:
-xpx ypx; 背景图片高宽固定大小，可能使图片变形
-xpx auto; 背景图片宽度固定，高度自适应
-auto ypx; 背景图片高度固定，宽度自适应
-x% y%; 背景图片宽高参照于元素背景区域大小拉伸
-x% auto; 背景图片宽度参照元素背景区域大小，高度自适应
-auto y%; 背景图片高度参照元素背景区域大小，宽度自适应
8.background-origin:
作用：设置背景图片的起始位置
取值：
-padding-box; 背景图片默认就是从padding-box开始绘制的
-border-box; 设置背景图片的起始位置从border-box开始
-content-box; 设置背景图片的起始位置从content-box开始
注意点：
无论背景图片是从哪里开始绘制，默认都是在盒子的border-box结束绘制即因为background-clip：控制背景区域的裁切位置(包括起始位置与终结位置)的默认值是border-box.
9.background-clip:
作用：设置背景区域的开始与终止裁切的位置（设置背景区域大小）
取值：
-border-box; 默认值
-padding-box;
-content-box;
拓展：
1.背景图片和插入图片有什么区别？
1.背景图片不在结构中占位置，img标签会在html结构中占位
2.背景图片有定位属性，可以很方便控制图片显示的位置，插入图片么有定位，控制图片位置不太方便
3.背景图片语义弱，插入图片语义强，如果想要让图片被搜索引擎收录最好使用插入图片。
2.css精灵图sprite
在开发中，为了减少请求次数，降低服务器压力，会使用图像合成技术制作雪碧图/精灵图，它是专门用于背景图片的。
3.多重背景图片
1.同一个元素可以设置多个背景图片，需要在background-image的取值上，写多个url()地址，每一个url间用逗号隔开。
2.多重背景图片的覆盖规则：前面的会盖住后面的。
3.编写多重背景图片时，尽量不使用背景连写属性，拆分来写比较合适。
4.开发中一般遇到一张图片是有多张图片合成时，一般都是给div设置背景图片,然后使用background-positon调节背景图片位置，嵌套子div，同理操作，设置div同宽高即可
----
#### 渐变
渐变是背景图片background-image的一种取值函数
####线性渐变 linear-gradient
background:linear-gradient(方向，颜色1开始位置，颜色1，颜色2开始位置,颜色2)
方向：关键字 to+*bottom*/top/right/left; 或 ndeg;
例如：background-image:linear-gradient(45deg, red 0%, blue 100%);
####径向渐变 radial-gradient
background:radial-gradient(扩散范围即半径，圆心位置，color1,color2)
例如：background-image: radial-gradient(50px at right bottom ,red, blue);
径向渐变的原点取值：at +关键字，或 px值
在既设置扩散范围，又设置渐变原点时，把扩散范围写在前面
####box盒模型
盒子模型：
1.定义：
这是一个形象的比喻，html的所有标签都是盒子（文本级盒子，容器级盒子）
2.组成部分：
margin + border + padding + content
3.注意点：
1.文本级盒子（行内元素）不可以设置高宽，但同样有border,margin.padding，只是设置它们的垂直方向的padding/margin时，可以设置但是没有效果。
border边框
1.定义：
边框就是环绕在标签宽度和高度周围的线条
2.边框属性连写：
1.按属性类型：
border-style: top right bottom left;
border-width: top right bottom left;
border-color: top right bottom left;
注意点：
省略规则：
1个参数，上下左右值都一样；
2个参数，下同上值，左同右值；
3个参数，左同右值；
2.按边框方位：
border-top: width style color;
border-right: width style color;
border-bottom: width style color;
border-left: width style color;
注意点：
1.color可省略，默认为黑色；
2.width可省略，默认1px;
3.style不可省略，省略时相当于border:none;
3.简写(同时设置四条边)：
border: width style color;
3.单独设置边框：
border-top/right/bottom/left-width/style/color: ;
4.border-radius边框圆角：
1.作用：
将直角的边框变为圆角的边框
2.格式：
1.整体设置
border:左上 右上 右下 左下;
border:50%;圆形
2.单独设置
border-top-left-radius:
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius:
3.系统绘制圆角原理：
首先根据设定的值x,y定位到圆心，然后然后以设定值从x-->y画圆弧
4.注意点：
1.连写时当省略了某一个角的值之后, 系统会自动参考对角的值
2.连写时当只设置了一个值的时候, 其它三个角都会参考这个值
3.单独设置时省略掉y的值，只写一个值时，第二个值等于第一个值。
4.当边框圆角的值 > 边框宽度的时候, 外边框和内边框都会变成圆角
当边框圆角的值 <= 边框宽度的时候, 外边框是圆角, 内边框是直角
5.值的类型可以设置：px/%;
5.border-image边框图片：
1.属性：
border-image-source:url();
指定边框图片的图片路径
1.如果只通过source指定了哪一张图片作为边框的图片,默认情况下会将图片放到边框的四个顶点
2.如果设置了边框图片,那么就不会显示边框颜色,边框图片的优先级高于边框颜色
border-image-slice:上横 右竖 下横 左竖 [fill]；
指定边框图片的裁切方式
注意：不带单位，切九宫格
border-image-width:
告诉浏览器边框图片显示的宽度, 并不是指定边框的宽度
注意：
1.如果通过border-image-width指定了边框图片的宽度,那么默认的边框宽度就会失效
2.通常省略。默认等于元素边框的值
border-image-repeat:*stretch*/repeat/round;
告诉浏览器除了边框图片四个角以外的图片如何填充, 默认是拉伸
border-image；source slice width repeat fill;
2.应用：滑动门解决
margin外边距：
1.定义：
标签与标签之间的距离就是外边距
2.margin连写
margin:top right bottom left;
注意点：和border省略取值一样规则
3.margin单独设置
margin-top:
margin-right:
margin-bottom:
margin-left:
4.注意点：
1.默认下元素没有margin,即margin的默认值为0。
2.元素的垂直方向margin会有合并现象，以较大的外边距为准，水平方向则相加
3.给子元素设置外边距会影响到父元素，让父元素被顶下来。解决办法为给父元素加一个边框。
4.一般情况下：解决父子盒子间的距离首先考虑使用padding，margin本质上是为了解决同级(兄弟)盒子间的距离而设计的
5.margin区域没有背景色，元素背景区域默认是从padding-box开始的，到border-box结束
6.在嵌套关系盒子中，amrgin取auto时，变为自动计算合适的值,给两边都平均分配，因此在设置块元素水平居中时可以：margin:0 auto;
padding内边距：
1.定义：
元素边框到元素内容区之间的区域就是内边距
2.padding连写：
padding:top/right/bottom/left; 省略规则同border
3.padding单独设置：
padding-top:
padding-right:
padding-bottom:
padding-left:
4.注意点：
1.默认下元素没有padding,即值为0，给元素设置了padding后，盒子会变大
2.默认情况下，背景颜色和背景图片都是从padding开始绘制的，即背景区域大小的定义默认为background-origin:padding-box;
content内容区：
元素的width就是content的width,
元素的height就是content的height;
注意点：
1.元素的宽度=border-left-width+padding-left+width+padding-right +border-right-width;
2.元素的高度=border-top-width+padding-top+height+padding-bottom+border-bottom-width;
3.元素空间的宽度=margin-left+border-left-width+padding-left+width+padding-right +border-right-width+margin-right;
4.元素空间的高度=margin-top+border-top-width+padding-top+height+padding-bottom+border-bottom-width+margin-bottom;
box-sizing属性
1.定义：
因为给元素设置padding和border都会使元素的宽高发生改变，为了不让盒子变大，影响到整体的布局，因此CSS3定义了这个属性来解决
2.取值：
1.content-box 默认取值
2.border-box
3.注意点：
当取值border-box时，边框或内边距发生改变也不会影响整个元素的宽高，此时元素的宽=width,元素的高=height
line-height行高
1.定义：
在CSS中，所有的行都有行高，控制每一行内的*内容*(a/img/text)的高度就是行高
2.注意点：
1.行高不是盒子的高度，盒子高指的是元素的高度，行高指的是每行内容的高度，当盒子只包含一行文字时，盒子高可以用行高来设定，此时盒子高=行高。当有多行文本时，盒子高就大于行高了，是它的几倍。
2.行高默认是盒子中文字大小的1.2倍。
3.*一个盒子不设置高度，而设置行高一样可以撑起盒子的高度。*，实际上，不设置容器的高度，靠内容把它撑开时，就是由行高撑起的高度。
4.文字默认是在行高内垂直居中的，图片默认是在行高内对齐文字的基线
4.因为文字默认是在一行内垂直居中的，因此可以得出以下规律：
1. 一个盒子内只有一行文本时，设置行高等于容器的高度即可以使单行文本垂直居中。
2.如果一个盒子内有多行文本，此时只能通过padding来让文字在容器内垂直居中。
3.一个盒子内有一张图片，因为图片是对准于一行文字的基线的，所以会产生图片底部不能紧密贴合盒子的现象。此时设置vertical-align:bottom;可以让对齐方式改为对准整行的底部即可。
vertical-align 设置垂直居中:
1.作用：
用来指定行内元素的垂直对齐方式。使行内元素盒模型与其行内元素容器垂直对齐。例如，用于垂直对齐一行文本的内的图片<img>
2.取值：
相对于父元素的值：些值使元素相对其父元素垂直对齐
-baseline; 使元素的基线与父元素的基线对齐
-sub; 使元素的基线与父元素的下标基线对齐。
-super; 使元素的基线与父元素的上标基线对齐。
-text-top; 使元素的顶部与父元素的字体顶部对齐。
-text-bottom; 使元素的底部与父元素的字体底部对齐。
-middle; 使元素的中部与父元素的基线加上父元素x-height的一半对齐。
相对于行的值：
-top; 使元素及其后代元素的顶部与整行的顶部对齐。
-bottom; 使元素及其后代元素的底部与整行的底部对齐。
3.注意点：
1.只对行内元素、表格单元格元素生效：不能用它垂直对齐块级元素。
opacity 透明度：
1.作用：
设置元素的透明度
2.注意点：
1.默认值 1.0，不透明， 值越小越透明。0为完全不透明
2.设置给当前元素后，它包含的子元素也都会获得opacity属性
3.该属性适用于所有元素，块级/行内块级/行内元素
4. filter:alpha(opacity=50); 兼容IE8及以下
box-shadow 盒模型阴影：
1.格式：
box-shadow: offsetX offsetY blur [spread color inset/outset];
2.注意点：
1.后面三个参数可以省略
2.默认值：spread=0；color=文字颜色；outset外阴影
3.offsetX/offsetY的取值：px/%都可以，可正也可负
text-shadow 文字阴影：
1.格式：
text-shadow: offsetX offsetY blur [color];
2.注意点：
1.参数比盒阴影少了spread inset/outset，其它都一样
拓展：
1.margin:0 auto; 与 text-algin有什么区别？
margin:0 auto是在嵌套盒子中让子盒子自身水平居中的
text-algin是让盒子中的内容(文本级：a/文字/img等)水平居中的
2.为什么要清除默认边距？
因为浏览器预设了默认的标签样式，而各个浏览器设置不同，会影响用户体验。所以要清除之。
方法：
1.http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css
2. *{margin:0;padding:0}
3.在开发中，如果一个盒子中的内容是文字，一般情况下以盒子的左内边距为基准，因为有边的内边距会存在误差。
为什么会存在误差？因为如果盒子右侧空间当不足以放下一个字符时，文字就会默认换行到下一行显示，所以右侧有可能会出现误差。
盒子顶部的内边距并不是边框到文字顶部的距离，而是边框到行高顶部的距离。
----
