1.嵌入式
3.行内式(主要用于JS控制元素的样式)：style="color:red;"
1.通配符*{设置全局}2.html标签选择器（多个标签时用，隔开）；
5.后代选择器(子子孙孙都选择){选择器1选择器2}
6.子选择器选择器1>选择器2
7.相连兄弟(同级相连的元素一个)+
8.相连兄弟们(同级所有的元素)~
9.伪类:link（未访问的样式）:visited已访问的样式:hover鼠标悬停的样式:active点击时的样式。
优先级：id>class>标签
100101（权重）复合使用时，权重相加大的优先级高
font-size字体大小
font-family字体系列（宋体等）
font-weight字体粗细normalbold100~900400=normal700=bold
font-style字体风格normalitalic(倾斜)
font-variant字体的变形small-caps(小型大写字母)
font简写(要求至少给出字体大小/字体系列)例如：font:15px微软雅黑;
font:[<字体加粗>|<字体风格>|<字体变形>]<字体大小>[/行高]<字体系列>必须按顺序！！否则不会执行
background-color背景颜色（三种方式,1.单词2.#fff0003.rgb(255,255,255)4.rgba,a透明度（0-1）
background-image背景图片:url('./imgs...');css引入文件，都是相对于css自己本身
background-repeat:重复方式no-repeat（不重复）|repeat-x|repeat-y|repeatbackground-position背景位置（leftcenterright水平方向///topcenterbottom垂直方向）例子：background-position:7px(X)-45px
text-indent首行缩进px
text-align文字对齐leftrightcenter
line-height行高pxem%（每行的间距）以字的中间为基线，是基线与间的距离
text-decoration文字修饰(underline下划线/overline上划线/line-through删除线/none隐藏下划线)
text-shadow文字阴影(:5px5px5px#f00;水平阴影位置垂直阴影位置模糊距离阴影的颜色)
white-space:nowrap强制不换行word-wrap:break-word;word-break:normal自动换行（用边框属性绘制三角形，边框本质是梯形）边框属性border-width边框四边的宽度px
border-style边框的样式solid(单线)double(双线)dashed（虚线）
border-color边框颜色
单独设置某条边的边框需要加入-top等关键字
border简写形式border:widthstylecolor;例子：border:1pxsolid#666
box-shadow边框阴影水平位置x/垂直位置y/模糊距离10px/阴影大小10px/阴影颜色
border-radius边框圆角px/%
border-collapse:collapse;合并表格内外边距
list-style-type设置列表的格式为none.也就是没有格式.
list-style列表样式类型none(无样式)去列表的点
disc(默认值实心点)circle圆圈decimal数字lower-roman小写罗马..等list-style-position列表样式位置inside(在内)outside(在外)比如说圆点或者方点
list-style-image列表样式图片:url('./....');
timing-function(变换的速率)(ease逐渐变慢/linear匀速/ease-in加速/ease-out减速/ease-in-out加速然后减速)
例：.box2:hover{background:orange;transition:background3sease-out;}
transition:all.2slinear（平滑过渡）
例:rotate(30deg)rotateX(30deg)rotateY(30deg)
.rotate{width:400px;margin:50pxauto;transition:transform0.5slinear;(把transform当做属性值用)}
.rotate:hover{transform:rotate(60deg);}
例:skew(30deg);skewX(30deg);skewY(30deg);
例:scale(1.5);scale(2,1.5);
4.translate(移动)translateX/translateY/translate(X,Y)
例:translate(100px,20px)
5.matrix矩阵变形
opacity:0-1(透明-不透明);
1.background:-webkit-gradient(linear,00,0100%,from(red),to(blue));
2.background-image:-webkit-gradient(
linear,/*渐变类型：线性渐变*/
10%10%,/*分别对应X,Y方向渐变起始位置*/
100%100%,/*分别对应X,Y方向渐变终止位置*/
color-stop(0.14,rgb(255,0,0)),/*渐变颜色位置，及颜色*/
color-stop(0.5,rgb(255,255,0)),/*渐变颜色位置，及颜色*/
color-stop(1,rgb(0,0,255))/*渐变颜色位置，及颜色*/);
需要@keyframes配合animation一起来使用
Animation：
Animation-name：动画的名称
Animation-timing-function：动画的类型，类型与过渡的类型。
animation-iteration-count：执行动画的次数，infinite,无限次
animation-direction：执行方向，奇数次向右执行，偶数次向前执行
@keyframs动画的名称{
0%{
属性
}
100%{
animation:changcolor3sease1s2alternate;
@keyframeschangcolor{
background:green;
50%{
background:blue;
background:pink;
浮动了就不是块级元素了，不占一行。只是改变了文档流的显示，没有脱离文档流（块浮起来了，文字却依然在外面）。
网页的层次是：定位>浮动>块级元素，定位在最高层。
1.不要给父元素设height（宽一般设置，因为具体布局时需要考虑尺寸），只要设置了，子元素是无法改变父元素设置好的宽高的。
2.父、子元素都浮动或者都不浮动，在第一条的前提下，都可以撑开父元素。
3.父元素浮动，子元素不浮动，可以撑开（但是子依然是块）。
4.父元素不浮动，子元素浮动，不可以撑开（虽然子元素还在父里，但一种是块，一种是浮动了，不属于同类）。要想撑开，必须清除浮动。
定位：绝对定位，脱离文档流，不保留位置，普通文档流其不存在；
绝对定位需要一个参照物，不然就是根据body的位置定位了；
相对定位，不脱离文档流，保留位置，它的参照物是自己，自己设置了position：relative这个属性，top,left才会生效（left:10px;现在这块左边10px是原来的位置）
定位：只有父元素也定位，子元素定位才会相对父元素定位置，否则是相对页面定位，父子元素可以一个相对一个绝对。
兼容性处理
l全局CSS设置
l常用兼容性技巧
lCSSHACK
1、清除所有的标记的内外边距
body,ul,li,a,img,p,input{margin:0;padding:0;}
2、去除项目符号或编号前面的符号
ul,ol,li{list-style:none;}
3、全局链接效果
a:link,a:visited{color:#444;text-decoration:none;}
a:hover{color:red;}
4、网页中所有的文字大小颜色
body{font-size:12px;font-family:宋体;color:#ccc;}
5、去除图片的链接边框线
img{border:0;}
6、全局的类样式
@font-face{font-family:'dqz';src:url('iconfont.ttf');}（这是图形字体，需要加载）
.fone{font-family:'dqz';}（在html里加class=“fone”就可以使用）
.fl{float:left;}
.fr{float:right;}
.cl{clear:both;}
.mt_10{margin-left:50px}
.bgr{background-color:red;}
.ccc{background-color:#ccc;}
1、实现所有浏览器主页居中
Firefox下主页居中代码：.box{margin:0pxauto}
IE5.5下主页居中代码：body{text-align:center;}
将以上两种代码，合在一齐书写：
2、单行文本上下居中
h1{
height:30px;
line-height:30px;
3、在IE6下，左右margin会加倍，应该是IE6下的一个bug
提示：排版时，能使用padding解决的，坚决不用margin。如果实在想用的话，就使用其中一边。
解决的方案：使用display:inline;
针对不同浏览器，书写不同的CSS代码的过程，称为“CSSHACK”。
也就是说：写一个CSS代码，让IE6识别，其它浏览器不识别。
下面，针对不同浏览器，有几个符号：
这些符号是在CSS属性的前面加的，用于分辨不同的浏览器版本。
l“*”IE6和IE7都识别。如：.box{*background-color:red;}
l“_”只有IE6识别。如：.box{_background-color:green;}
使用CSSHACK来处理IE6下，左右margin加倍的问题
注意：CSSHACK不是W3C的标准，因此，我们尽量少用。如果你调试兼容性，调试不好时，可以偶尔用一下。
其他注意：
1.html代码前必须写//否则iemargin:0auto不会居中2.解决ie文本框不垂直居中line-height后面加\9line-height:25px\93.CSS禁止Chrome谷歌浏览器激活输入框后自动添加橘黄色边框.className:focus{outline:none}||{outline:BlueSolid4px;}4.要使得子盒子位于父盒子处于绝对居中方案一(推荐):设置父盒子{position:realtive;}设置子盒子{margin:auto;postion:absolute;left:0;right:0;top:0;bottom:0;}附录：1.CSSCascadingStyleSheets层叠样式表。CSS是给HTML标记加的样式；JS是给HTML标记加的行为。HTML标记是最先出现的
2.注意：id属性一般是给JS使用的，不是让你来加样式的。class属性只能给CSS用，不能给JS用的。
id选择器的名称，必须以“#”开头，后跟HTML标记的id属性的值。
3.浮动出现的意义其实只是用来让文字环绕图片而已，仅此而已.
4.list-style：none(去掉各种项目符号)行高等于盒子高度（上下居中）
5.我们所说的width和height属性，它们指内容的宽度和高度，不含内、外边距、边框线。
6.浮动就是将块级元素霸占一行的特性取消，脱离原来的文本流。
7.CSS属性继承：外层元素的样式，会被内层元素进行继承。多个外层元素的样式，最终都会“叠加”到内层元素上。
8.cursor：网页中光标的类型，取值：text(文本)help(帮助)、wait(等待)、pointer(手形)等
10.上下两个块元素，如果每一个元素都指定了四个外边距，那么上下相邻的那个外边距会发生合并的现象，合并后取其中较大的外边距。
11.浮动的元素，不再占空间了，并且，浮动元素的层级要高于普通元素
12.CSS属性继承：外层元素的样式，会被内层元素进行继承。多个外层元素的样式，最终都会“叠加”到内层元素上。
13.单个选择器的优先级：行内样式>id选择器>class选择器>标签选择器
14.同一个class属性，可以指定多个类名样式，多个类样式之间用空格隔开。
15.兼容性调试，主要调试IE8、IE7、IE6、Firefox。
伪元素选择器
s1:firsh-child第一个子元素
s1:last-child最后一个子元素
s1:nth-child(num)匹配父元素的第n个子元素s1.
num从1开始也可以是公式例:2n2n-1奇偶数even(偶数)odd(奇数)
s1:nth-last-child(num)匹配父元素的倒数第n个子元素s1.
s1:nth-of-type(num)匹配同类型中的第n个同级兄弟元素s1
s1:nth-last-of-type(num)匹配同类型中的倒数第n个同级兄弟元素s1