css学习
<!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-attachment: 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-image: 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;
border: 1px solid #231;
}
table._table td{
font-size: 12px;
border: 1px solid #231;
}
</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">我朋有朋有人人要大在在在在在在大 大要要 枯要枯枯我朋有有从在枯末期一枯枯枯�� �� 枯七�� 基本原理高速度七棋一�� 三大末�M棋末基一三大一树百获 一有枝节一树百获 一三大</p>
<p class="_swidth">我朋有朋有人人要大在在在在在在大 大要要 枯要枯枯我朋有有从在枯末期一枯枯枯�� �� 枯七�� 基本原理高速度七棋一�� 三大末�M棋末基一三大一树百获 一有枝节一树百获 一三大</p>
<div class="_sbackground">
<img src=\'#\'" //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>
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
</tr>
<tr>
<td>dd</td>
<td>ee</td>
<td>ff</td>
</tr>
</tbody>
</table>
<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>