参考博客：
http://www.cnblogs.com/yuanchenqi/articles/6856399.html
css属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> /*.c1[po*="p"]{*/ /*color: red;*/ /*}*/ /*[po="p1 p"]{*/ /*color: green;*/ /*}*/ /*.c1{*/ /*color: red;*/ /*}*/ /*.btn{*/ /*font-size: 30px;*/ /*}*/ </style> </head> <body> <div po="p1 p" class="c1 btn">p1</div> <!--这个class有两个值，即等于c1又等于btn--> <div po="p2 p" class="c1">p2</div> <div class="c1">p3</div> </body> </html>
css优先级
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> /*div{*/ /*color: red;*/ /*}*/ /*#id1{*/ /*background-color: blueviolet;*/ /*}*/ /*.d2{*/ /*background-color: bisque;*/ /*}*/ /*div{*/ /*background-color: darkblue;*/ /*}*/ /*#id1 .p1{*/ /*color: darkcyan;*/ /*}*/ /*div p{*/ /*color: green;*/ /*}*/ /*.d1 p{*/ /*color: red;*/ /*}*/ /*.p1{*/ /*color: sienna;*/ /*}*/ /*.d1 .p2{*/ /*color: red;*/ /*}*/ .d1 .c2 .p2{ color: green; } .p2{ color: red!important; } </style> </head> <body> <!--<div class="d1 d2" id="id1" style="background-color: green">--> <div class="d1 d2" id="id1"> DIV <p class="p1">PPP</p> <div class="c2"> <div class="c3"> <p class="p2">inner</p> </div> </div> </div> <p>hello</p> <span>span</span> </body> </html>
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
1 内联样式表的权值最高 style=""－－－－－－－－－－－－1000；
2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－－100
3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10
4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－1
按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。
css颜色，文本在标签中的位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> p{ color: blue; /*color: RGB(0,255,0);*/ /*color: RGBA(255,0,0,1);*/ /*R是红色，G是green，B是蓝色，A是透明度*/ /*color: #A1A1A1;*/ opacity:0.9 ; /*此也是个透明度的设置*/ } div{ width: 200px; height: 200px; background-color: gray; text-align: right; /*控制文本在背景的位置，right为右边，还有center，left*/ } </style> </head> <body> <p>hello</p> <div>DIV</div> </body> </html>
背景 属性，图片什么的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 1600px; height: 1600px; /*背景图片相关*/ /*/!*background-image: url("12.jpg");*!/*/ /*/!*background-repeat: no-repeat;*!/*/ /*/!*background-position: 400px 200px;*!/*/ /*/!*background-position: center center;*!/*/ /*把背景图片调整，第一个center水平居中(离左边的距离)，第二个center是距离上边缘的位置*/ background: url("12.jpg") no-repeat 100px 100px ; /*简写的一个全部包括其中，no-repeat不平铺*/ background-color: #2459a2; } </style> </head> <body> <div> </div> </body> </html>
display属性很重要，常用，有四参数
none知道就行了，block设为块标签inline设为内联标签- inline-block此属性重要，能设长宽而且不是块(内联标签不能设长宽，而块标签是独占一行的)