下面列距一些css3的入门级的常用属性：

先看一下html文件

<link rel="stylesheet" type="text/css" href="my_css.css" /> 先在head标签里声明引用的css文件 

然后看看body里的标签，很简单，一堆<p><ul><><li>

<body>
<p id="p1">生如夏花<p>
<p id="p2">死如秋叶<p>
<p id="p3">on my way<p>
<p id="p4">静静的村庄飘着白的雪</p>
<p id="p5">阴霾的天空鸽子飞翔</p>
<p id="p6">白桦树刻着那两个名字</p>
<p id="p7">他们发誓相爱用尽这一生</p>
<p id="p8">有一天战火烧到了家乡</p>
<p id="p9">小伙子拿起枪奔赴边疆</p>
<ul id="u01">
<li>实心圆</li>
</ul>
<ul id="u02">
<li>空心圆</li>
</ul>
<ul >
<li>不设置css属性</li>
</ul>
<ul id="u03">
<li>图片做列表符号</li>
</ul>
<ul id="u04">
<li>list-style-position:outside</li>
</ul>
<ul id="u05">
<li>list-style-position:outside</li>
</ul>
<p class="page01">闪起来</p>
<p class="page02">那些花儿</p>
<p class="page03">圣诞快乐</p>
<p class="page04">这里显示首行缩进这里显示首行缩进这里显示首行缩进这里显示首行缩进这里显示首行缩进这里显示首行缩进这里显示首行缩进这里显示首行缩进</p>
<p class="page05">control控kongzhi制English汉间距</p>
<p class="page06">All全部 in all全部 is 全部all we are结束</p>
<p class="page07">像一阵风掠过我身边当你错身而过的瞬间</p>
<p class="page08">忽然间，想要去很远</br></br></p>
<p class="page09">float属性设置</p>
<p class="p_font">与其苟延残喘 不如从容燃烧</p>
</body>

上面的大部分标签基本都设定了 id属性 或者是 class属性

然后我们本文的重点就来了，对应css文件中的属性设置：

@charset "gbk2312";
/*某句无效果可能是由于上一句有bug导致影响到下一句。如 @charset "gbk2312"  缺少“;”将影响到p1的属性*/
#p1{font-size:40px;color:red}/*设置字体颜色及字体大小*/
#p2{font-size:xx-large;color:#aa0000}/*设置字体颜色及大小的另一种属性值*/
/*
xx-small   =9px
x-small    =11px
small      =13px
medium     =16px
large      =19px
x-large    =23px
xx-large   =27px
*/
#p3{font-size:x-large;color:#a00}/*颜色值的简写*/
#p4{font-size:40px;font-family:"字体1","字体2","黑体"}/*优先级依次降低，如果第一个字体不存在则用第二个...*/
#p5{font-style:oblique}/*normal/italic/oblique三种属性值 正常 倾斜 加深倾斜（基本看不出来）*/
#p6{font-weight:bold}/*bolder/bold/normal/100-900*/
#p7{text-align:center}/*水平对齐方式left/right/center/justify（两端对齐中文不起作用）
/*#p8{vertical-align:middle}*/
#p9{line-height:inherit}
/*行高：属性可以是：1.line-height可以被定义为：body{line-height:normal;}
2.line-height可以被定义为：body{line-height:inherit;}
3.line-height可以使用一个百分比的值body{line-height:120%;}
4.line-height可以被定义为一个长度值(px,em等) body{line-height:25px;}
5.line-height也可以被定义为纯数字， body{line-height:1.2}*/
/*u01-u05是列表的样式（ul   ol 标签）*/
#u01{list-style-type:disc}
#u02{list-style-type:circle}
#u03{list-style-image:url(a.jpg)}
#u04{list-style-position:inside}
#u05{list-style-position:outside}
.page01{text-decoration:line-through}/*文本修饰*/
/*none:没有修饰  underline:添加下划线  overline:添加上划线  line-through:添加删除线 blink：闪烁（高版本不支持）*/
.page02{width:50px;height:100px;border:10px dashed red}
/*边框设置border：边框border:线型（solid/dashed/dotted/double）   粗细（数值+单位） 颜色*/
.page03{width:100px;border-top:solid 3px #0000aa}/*单边框设置（border-top  border-right  border-left  border-bottom）*/
.page04{text-indent:20px}/*首行缩进*/
.page05{letter-spacing:30px}/*字间距*/
.page06{word-spacing:100px}/*词间距*/
.page07{background-color:gray}/*背景颜色（高亮）*/
.page08{background-image:url(a.jpg);color:#aa0000;background-repeat:no-repeat;font-size:100px;background-position:100px 50px}
/*上面属性分别是：背景图 字体颜色 平铺效果 字体大小 背景偏移量*/
/*background-position:left/center/right/数值     top/center/bottom/数值;*/
.page09{float:right}/*浮动属性（none left right）常用在图文混排中规划图片位置
.p_font{font:italic bold  small-caps 120px/1.5em "黑体","仿宋"}/*<span style="color:#ff6666;">font的缩写*/

 


记录一种font的简写： 

.font{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:arial,verdana;
}
可简写为：.font{font:italic small-caps bold 12px/1.5em "黑体","仿宋";} 这里需要注意的是 font-size和line-height合并为一个属性，且必须存在，否则其他设置将失效。