一、CSS：学名层叠样式表（Cading Style Sheets）是一种用来表现HTML或者Xml等文件的样式的计算机语言。让Html看起来更加美观。
语法：标签内定义style
css位置：为了提高样式的重用，css样式一般推荐的head标签位置或单独文件引用。
二、Css选择器：class属性值可以重复。
1、标签选择器，不常用。缺点：对所有匹配的标签都应用该样式。
2、id选择器：通过id属性值进行匹配。不常用。缺点：因为id值的唯一性，导致只能应用在匹配的一个标签内。
3、class选择器：根据class属性值进行匹配样式。比较常用。
4、层级选择器：注意用空格来表示层级。比较常用。场景：当一个标签内嵌套标签。对内层标签进行样式定义的时候。
5、组合选择器。当多个标签要应用同一个样式的时候可以使用组合选择器。比较常用。语法：用逗号来表示多个class。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择器</title> <!--<link rel="stylesheet" href="comm.css">--> <!--<style>--> <!--/*标签选择器*/--> <!--div{background-color: blue;color: black;}--> <!--</style>--> <style> div{ color: green; } #i1{ font-size: 56px; } .c1{ background-color: black; } .c2 div p .c3{ /*层级选择器*/ background-color: yellow; color: blueviolet; } .c4,.c5,.c6{ /*组合选择器*/ color: green; } </style> </head> <body> <div style="background-color: red;color: yellow;">我是CSS</div> <div style="background-color: red;color: yellow;">我是第二个CSS</div> <div style="background-color: red;color: yellow;">我是第三个CSS</div> <div>我自己没有定义，我遵循广域的</div> <div id="i1">我用的是id选择器</div> <div class="c1">我是class选择器</div> <div class="c2"> <div> <p> <span>呵呵</span> <a class="c3">我是用的层级选择器</a> </p> </div> </div> <div class="c4">我是c4组合选择器</div> <div class="c5">我是c5组合选择器</div> <div class="c6">我是c6组合选择器</div> </body> </html>
三、样式：
注意：html有宽度，可以是100%也可以是20%等。子标签可以占有父标签的宽度比。因为内容多少高度就多少，是由内容来确定。所以没有高度百分比。
背景颜色可以是由具体的英文和rgb18进制来代替，也可以用rgb（三个参数）来表示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ height: 48px; background-color: blue; color: red; position: fixed; left: 10px; right: 10px; top:0; } .pg-body{ height: 5000px; background-color: white; margin-top: 50px; } </style> </head> <body> <div class="pg-header">头部</div> <div class="pg-body"> <div style="border: 1px solid red;">边框</div> <div style="height: 50px; 80%; border: 1px solid red; font-size: 16px; text-align: center; line-height: 20px; font-weight: bold; ">呵呵</div> <div style="position: relative; 500px; height: 200px; border: solid red;margin: 0 auto;"> <div style="position: absolute; left: 0; top: -10px; 50px; height: 20px; background-color: green"></div> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .img1{ background-image: url("1.gif"); height: 500px; width: 1000px; background-repeat: no-repeat; } </style> <style> .img2{ background-image: url("2.gif"); height: 150px; width: 50px; background-position: 62px 149px; } </style> </head> <body> <div class="img1">下雨了，该回家了</div> <div class="img2">指定显示</div> </body> </html>
通过移动图片的位置来呈现图片的部位，而不是移动页面。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide { display: none; } .mode { width: 400px; height: 300px; background-color: red; position: fixed; top: 50%; left:50%; margin-left: -200px; margin-top: -150px; z-index: 9; } .shadow { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: black; /*background-color: rgba(0,0,0,0.6);*/ opacity: 0.4; z-index: 1; } </style> </head> <body> <input type="button" value="test"/> <div class="shadow">大暗黑天</div> <div class="hide">对话框</div> <div class="mode"> <input type="button" value="text"/> <input type="button" value="test"> </div> <div style="height: 2000px;">en</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 70px; border: 1px">hehe</div> </body> <body> <div style=" 500px; height: 500px; border: 1px solid red;"> <div style=" 20%; background-color: aqua; float: right">我飘到哪里了</div> <div style=" 30%; background-color: blue; float: right;">咱俩还在一起吗</div> <div style=" 60%; background-color: yellowgreen; float: right;">你俩分开了</div> <div style="clear: both;">呵呵</div> </div> </body> <body> <div style="height: 1000px; background-color: yellow;">呵呵</div> <div style="position: fixed;right: 100px; top: 100px;">我是fixed</div> <div style="position: absolute;left: 100px; top: 100px;">我是absolute</div> <div style="position: relative;left: 100px; bottom: 100px;">我是relative</div> </body> <body> <div style="height: 500px; 400px; border: 1px solid red; position: relative"> <div style="height: 200px; 200px; border: 1px solid yellowgreen;"> <div style="position: absolute; bottom: 0; right: 10px;">我是position与relative的结合</div> </div> </div> </body> </html>
display：none 隐藏标签，并把标签占有位置去掉
display：block 让内联标签可以像块级标签一样占一行。
position：1、fixed，固定到窗口的位置，页面滚动时，也不改变在窗口的位置。2、absolute：可以固定到一个位置，但是页面滚动，其位置也滚动。3、relative：和absolute一起使用。可以固定到父标签的框内的相对位置，而不是窗口的相对位置。 absolute和relative一起使用，无论他们之间嵌套了多少层标签，都是从内往外找，直到匹配。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="z-index: 10; position: fixed; top: 50%; left: 50%; margin-left: -250px; margin-top: -200px; background-color: white; height: 400px; 500px;"> <input type="text" name="user"/> <input type="password" name="pwd"/> </div> <div style="z-index: 9; position: fixed; background-color: wheat; top: 0; bottom: 0; left: 0; right: 0; opacity: 0.5;"> </div> <div style=" z-index:8; height: 5000px; background-color: blue">呵呵</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ position: fixed; right:0; left:0; top:0; height: 48px; background-color: red; line-height: 48px; } .pg-body{ margin-top: 50px; } .w{ width: 980px; margin:0 auto; } .pg-header .menu{ display: inline-block; padding:0 10px 0 10px; color: white; } /*当鼠标移动到当前标签上时，配置生效？*/ .pg-header .menu:hover{ background-color: green; } </style> </head> <body> <div class="pg-header"> <div class="w"> <a class="menu">全部</a> <a class="menu">42区</a> <a class="menu">段子</a> </div> </div> <div class="pg-body"> <div class="w">呵呵</div> </div> <div style="height: 200px; 300px; overflow:auto;"> <img src="2.jpg"> </div> <hr/> <div style="height: 35px; 400px; position: relative;"> <input type="text" style="height: 35px; 370px; padding-right: 30px;" /> <span style="position: absolute; right: 6px; top: 10px;background-image: url(2.jpg); height: 16px; 16px; display: inline-block;"></span> </div> </body> </html>
更多：http://www.cnblogs.com/evilliu/p/5760232.html