!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0px; padding: 0px;}/*设置页面边界为0*/
#div1{width: 100px; height: 100px; background-color: gold;}/*id选择器*/
div{border: 1px solid black; width: 100px;height: 100px;
border-radius: 7px;}/*标签选择器 圆角效果*/
.class1{background-color: fuchsia;}/*class选择器*/
.class2,.class3{background-color: blue;}/*并列选择器*/
.class3:hover{ cursor: pointer;
transform: rotate(45deg); transition: 5s;
border-radius: 7px;}/*鼠标指上去旋转45度;hover鼠标指上的效果
cursor:pointer;鼠标指向变小手 transition过渡效果 */
a:visited{color: #000000;}/*被访问过还是黑色*/
a{color: #000000;}/*访问与否都是黑色*/
a{text-decoration: none;}/*去掉下划线*/
.class2:hover{
cursor: pointer;
background-color: rgba(0,255,0,0.5);
/*阴影*/
box-shadow:5px 5px 0px black;
/*文字阴影*/
text-shadow: 2px 2px 2px red;}
/*可以选择的属性:
* background-color: rgba(255,0,0,0.5);背景颜色加半透明
* background-image:url(路径)=背景图片;
* background-attachment:scroll背景随字体滚动--fixed背景不滚动;
* background-repeat:no-repeat,不平铺;repeat,平铺;repeat-x,横向平铺;repeat-y,纵向平铺
* background-position:center;背景图居中设置前必须不平铺
* background-position:right top;背景图放右上角方位自己选
* background-position:left 100px top 100px;离左上各100像素可以是负数
* font-family:"新宋体";设置字体 font-size:10px;字体大小 font-weight:bold和normal加粗和正常
* font-style:italic和normal倾斜和正常
* color:颜色;
* text-decoration:underline下划线,overline上划线,line-through删除线,none去掉
* text-align:center居中对齐,left左对齐,right右对齐
* line-height:10px;行高
* vartical-align:mlddle居中对齐,top顶部对齐,bottom底部对齐---设置行高后用
* text-indent:10px;首行缩进
* border:1px solid blue; 四边框,1像素宽,实线,蓝色
* border-top:上边框 bottom下 left左 right右
* margin:1px外边框其他同上 padding:1px;内容与边框距离其他同上
*
*
*
*/
</style>
</head>
<body>
<div id="div1">锄禾日当午</div>
<div class="class1">汗滴禾下土</div>
<div class="class2">谁知盘中餐</div>
<div class="class3">粒粒皆辛苦</div>
<a href="http://www.baidu.com">超链接</a>
</body>
</html>
原文：http://www.cnblogs.com/buzhiheyan/p/7658750.html