Css（实现了页面和样式的彻底分离）
写入样式表的三种方式：
内联样式表，嵌入样式表，外部样式表。
内联样式表的优先级高于嵌入样式表。嵌入式样式表的优先级大于外部样式表
样式表的选择器（通过选择器帮我们获得页面上要获得样式的元素）
写什么标签就拿到了什么标签。（当页面中所有标签都用同一种样式的时候用html选择器）
什么时候用id选择器什么时候用类选择器：
当同一个页面中某些元素显示同一个样式的时候一般用类选择器，id选择器一般是唯一的。
Css当中属性非常多，大体上可以分为以下几类：字体，背景，文本，位置，布局，边缘，列表。
下面是一些关于样式表的例子：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title><meta charset="utf-8" /> <!--外部样式表--> <link href="test.css" rel="stylesheet" type="text/css" /> <!--嵌入样式表--> <style type="text/css"> p { background-color:yellow; font-size:xx-small; } </style></head><body> <p style="background:red;font-size:xx-large">今天天气好晴朗，处处好风光</p> <!--内联样式表--> <p>今天天气好晴朗，处处好风光</p> <p>今天天气好晴朗，处处好风光</p> <p>今天天气好晴朗，处处好风光</p> <p>今天天气好晴朗，处处好风光</p> <h1>呵呵</h1> <tt>窗前明月光，你是第上传</tt></body></html>
选择器的分类：
class类选择器，HTML选择器，ID选择器，关联选择器,伪元素选择器，组合选择器。
下面是class类选择器的例子：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title><meta charset="utf-8" /> <style type="text/css"> p.pp1 { background-color:red; } tt.tt1 { background-color:yellow; } </style></head><body> <p style="background:red;font-size:xx-large">今天天气好晴朗，处处好风光</p> <!--内联样式表--> <p class="pp1">今天天气好晴朗，处处好风光</p> <p class="pp1">今天天气好晴朗，处处好风光</p> <p>今天天气好晴朗，处处好风光</p> <p>今天天气好晴朗，处处好风光</p> <h1>呵呵</h1> <tt class="tt1">窗前明月光，你是第上传</tt></body></html>
HTML选择器：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title><meta charset="utf-8" /> <style> </style></head><body> <p style="background:red;font-size:xx-large">今天天气好晴朗，处处好风光</p> <!--内联样式表--> <p>今天天气好晴朗，处处好风光</p> <p>今天天气好晴朗，处处好风光</p> <p>今天天气好晴朗，处处好风光</p> <p>今天天气好晴朗，处处好风光</p> <h1>呵呵</h1> <tt>窗前明月光，你是第上传</tt></body></html>
ID选择器：
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> #p1 { background-color:black; } #p2 { background-color:blue; } </style> <meta charset="utf-8" /></head><body> <p id="p1">今天天气很好</p> <p id="p1">今天天气很好</p> <p id="p2">今天天气很好</p> <p id="p3">今天天气很好</p> <p id="p4">今天天气很好</p></body></html>
关联选择器：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title><meta charset="utf-8" /> <style type="text/css"> p em { background-color:red; } </style></head><body> <p><em>今天天气好晴朗，处处好风光</em></p> <em>haha</em> <em>haha</em> <em>haha</em> <em>haha</em> <p>今天天气好晴朗，处处好风光</p> <p>今天天气好晴朗，处处好风光</p> <p>今天天气好晴朗，处处好风光</p> <h1>呵呵</h1> <tt>窗前明月光，你是第上传</tt></body></html>
伪元素选择器：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title><meta charset="utf-8" /> <!--伪元素选择器是对同一个html元素的各种状态和其所在的部分内容的一种定义形式,例如,对于超链接标签的正常状态,访问过的状态,选中的状态,光标移到超链接上的状态--> <style type="text/css"> a:active { text-decoration:none; } a:hover { font-size:xx-large; } p::first-line { font-size:xx-small; } p::first-letter { background-color:red; } </style></head><body> <p>晋太原中，武陵人捕鱼为业，缘溪行<br /> 晋太原中，武陵人捕鱼为业，缘溪行</p> <a href="#">超链接</a></body></html>
组合选择器：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title><meta charset="utf-8" /> <style type="text/css"> h1,h2,td { background-color:yellow; } </style></head><body> <h1>我是一个大标题</h1> <h2>我是一个二号标题</h2> <table border="1px" cellpadding="0px" cellspacing="0px"> <tr> <td>粉刷本领强</td> <td>粉刷本领强</td> <td>粉刷本领强</td> <td>粉刷本领强</td> </tr> <tr> <td>粉刷本领强</td> <td>粉刷本领强</td> <td>粉刷本领强</td> <td>粉刷本领强</td> </tr> <tr> <td>粉刷本领强</td> <td>粉刷本领强</td> <td>粉刷本领强</td> <td>粉刷本领强</td> </tr> <tr> <td>粉刷本领强</td> <td>粉刷本领强</td> <td>粉刷本领强</td> <td>粉刷本领强</td> </tr> </table></body></html>
2.关于文档流：什么是文档流？就是html会将控件从上到下排列，不会出现覆盖的情况。
当用css给div设定位置并把position设置为：absolute时，就可以将div设置在需要固定的位置，使其摆脱文档流的束缚。
其中 z-index是元素在页面中的第多少层，越大越在上面，相当于ps中图层的概念。
下面是一个小例子：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title><meta charset="utf-8" /> <style type="text/css"> div { height:300px; width:300px; } div.div1 { background-color:rebeccapurple; top:100px; left:130px; position:absolute;/*绝对定位，定在哪儿就在哪儿，脱离文档流的限制*/ z-index:3;/*确定显示在哪一层*/ } div.div2 { background-color:green; top:110px; left:140px; position:absolute; z-index:2; } div.div3 { background-color:yellow; top:120px; left:150px; position:absolute; z-index:1; } </style></head><body><div class="div1"></div> <div class="div2"></div> <div class="div3"></div></body></html>
效果如图所示：
在很多网页中会弹出那种恭喜你，被QQ抽中中奖的广告的弹窗怎么实现的呢？用css也能轻松实现。
下面是一个小例子：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title><meta charset="utf-8" /> <style type="text/css"> .div1 { right:0px; bottom:0px; position:fixed;/*absolte当页面拉动时跟着动，fixed是页面拉动的时候不动*/ height:300px; width:300px; background-color:red; } </style></head><body> <div class="div1"></div><br /> <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /></body></html>
其中，position的fixed的意思是把那个div窗体固定在某一位置的意思。即使页面上下拉动，它也始终固定在一个地方。
下面是运行效果：
今天就先总结到这里！88
还没有人抢沙发呢~