<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>學習CSS</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
body{
font-size: 12px;
font-family: Arial, sans-serif;
margin: 0px 0px;
padding: 0px 0px;
color: black;
/* url(http: //ww1.sinaimg.cn/bmiddle/8e285f26gw1e5miwz91daj20c822cwm9.jpg);
background-repeat: no-repeat;
background-position: center;
background-position: 20px 30px; 左 頂
background-p_w_upload: fixed;*/
background-color: #ccc;
}
H1 {color: gray;}
* {color: black;｝ /*通用選擇符*/
div * {color: green;}
div OL<LI EM {color: purple;} /*>子選擇符*/
h2 + p {color: silver;} /*相鄰兄弟選擇符*/
a[href="http://www.sina.com"] {color: silver} /*值比對*/
a:link {color:red;text-decoration: none;} /*僞類，定位錨*/
a:active {color: blue;}
a:hover {color: orange;}
a:visited {color: yellow;}
a#sina:visited {color: green;} /*ID選擇符*/
a._sina:visited {color: black;} /*類選擇符*/
h1 em {font-weight: bold; font-size: 18px;} /*父子關系*/
/*樣式使用優先級規則，ID-》類-》簡單選擇符（例H1）*/
h1 { color: gray !important;} /*重要性規則優先級很高，STYLE中的樣式會無效*/
p {color: red;}
p {color: green;}
/*塊級元素：段落，标題，清單，表格，DIV，BODY等元素都是塊級元素，每塊級元素都另起一行顯示.display:block*/
/*内聯元素：如A，EM，SPAN元素都是内聯元素，内聯元素不必新起一行顯示display:inline*/
/*清單項元素：LI元素是清單項元素，具有順序性display:list-item*/
p {display:inline;}
h2 {color: rgb(100%, 50%, 30%);}
h3 {color: rgb(255, 0, 255);}
h4 {color: #c12;} /*#cc1122*/
/*樣式機關常用有em和px。1em=0.5ex; 1em=18磅*/
h5 {font-size: 1em;}
h6 {font-size: 18px;}
p._swidth {text-indent: 26px; width: 500px; display: inline-block; margin: 0px 0px;padding: 0px 0px;}
p._fwidth {text-indent: -26px; text-align: center; vertical-align: middle; text-decoration: underline;}
p._smargin {margin: 0px} /*邊界*/
img._simg {margin: 2px; border:1px solid #ccc; height: 100px;}
div._sbackground {background-color: white; }
div._mmargin {margin: 1px 2px 3px 4px; } /*頂 右 底 左*/
div._spadding {padding: 0px;} /*補白，内邊界*/
div._sfloat {float: right;} /*浮動*/
div._sclear {clear: both;} /*清除浮動*/
div._sclear {clear: none;} /*允許浮動位于兩側*/
ul {
list-style-type: none;
/* list-style-position: inside;*/
list-style-p_w_picpath: url(http://tb1.bdstatic.com/tb/static-frs/img/icon/jing.gif);
/*url(http://s0.hao123img.com/res/img/icons20130131.png) no-repeat 0px -316px;*/
}
li {border:1px solid #bbb; text-indent: -6px;} /*margin-left: -18px; url(http: //tb1.bdstatic.com/tb/static-frs/img/icon/jing.gif) no-repeat*/
div._sposition {position: absolute;} /*static 元素框按普通方式生成，塊級元素生成一個矩形框，它是文檔流的一部分，内聯級框是由一個或多個行框的上下文生成的。這些行框流動于期上級元素中
relative 元素框偏移一定的距離。它的包含塊是未定位元素将占有的區域。元素保留未定位時的形狀，且元素通常占有的空間也被保留。相對定位完成的過程是首先按static方式生成一個元素，然後移動這個元素框。相對定位
absolute 元素框完全從文檔流中消除并根據其包含塊定位。元素在普通文檔流中占用的任何空間都被關閉，就如同元素不存在一樣。絕對定位
fixed 元素的定位方式同absolute一樣，但它的包含塊是視區本身。在螢幕媒體如WEB浏覽器中，元素在文檔滾動時不會在浏覽器視窗中移動。
inherit 這個值從上級元素繼承得到。
*/
div._mposition {
position:fixed;right:0px;bottom:0px;
div._soverflow {overflow: hidden;}
table._table {
width:50%;
border: 1px solid #231;
border-collapse: collapse;
cellspacing: ;
table._table th{
font-size: 12px;
font-weight: bold;
color: red;
table._table td{
</style>
</HEAD>
<BODY>
<h1>ddddddddddddd</h1>
<a href="http://www.sina.com">sina</a>
<h1><a href="http://www.sohu.com" id="sina">sina</a><h1>
<h2><a href="http://www.yahoo.com" class="_sina">sina</a><h2>
<h1><em>你有人有有人</em></h1>
<h1 style="color:black;">你有人有有人</h1>
<p>我有朋人</p>
<span>楊成武樹大根深三七開楊成武樹大根深</span><span>aasdgasdgasdg楊成武樹大根深三七開楊成武樹大根深</span>
<p>楊成武樹大根深三七開楊成武樹大根深</p><p>aasdgasdgasdg楊成武樹大根深三七開楊成武樹大根深</p>
<h2>我有朋人從人人人從</h2>
<h3>我有朋人從人人人從</h3>
<h4>我有朋人從人人人從</h4>
<h5>我有朋人從人人人從</h5>
<h6>我有朋人從人人人從</h6>
<p class="_swidth">我朋有朋有人人要大在在在在在在大 大要要 枯要枯枯我朋有有從在枯末期一枯枯枯楛 楛 枯七楛 基本原理高速度七棋一楛 三大末矼棋末基一三大一樹百獲 一有枝節一樹百獲 一三大</p>
<div class="_sbackground">
<img src="http://ww1.sinaimg.cn/bmiddle/80c4a49ajw1e5mlc08456j20c20h0t9u.jpg" class="_simg" />
</div>
<div class="_sfloat">divwetqwetqwetqweteeeeeeeqtewgdsagadsgsgsdagsd</div>
<div style="clear:both;"></div>
<ul>
<li>你是豬1
<ul>
<li>你是豬11</li>
<li>你是豬12</li>
<li>你是豬13</li>
<li>你是豬14</li>
</ul>
</li>
<li>你是豬3</li>
</ul>
<div class="_mposition">tqwetwqetqwetqwtqwetqwetqwetqew</div>
<div style="clear:both"></div>
<table class="_table" cellspacing="5px" cellpadding="5px">
<colgroup>
<col width="9%">
<col width="13%">
<col width="10%">
</colgroup>
<thead>
<tr>
<th>标題1</th>
<th>标題2</th>
<th>标題3</th>
</tr>
</thead>
<tbody>
<td>aa</td>
<td>bb</td>
<td>cc</td>
<td>dd</td>
<td>ee</td>
<td>ff</td>
</tbody>
</table>
<br/>
<br/>
![CSS的僞元素和僞類的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)