之前一直没有系统的学习过CSS，这个也是我的一个失误，说实在之前一直没有把它放在眼里，一直在做后台的开发，对前台的js,css,html并不是十分的了解。
这几天抽出一点时间来做个总结，(边学边总结)
学习路径为：http://www.w3cfuns.com/portal.php?mod=topic&topicid=13
博主总结的相当到位，一天时间把上面的东西全看完了，很精彩！
下面是我自己的初步总结，之后在实践中补充好了(自我总结，并非帮助文档，这个只是对于我个人来说，并不希望大家看到，因为可能对大家无用)。
在WEB2.0中，CSS的职责主要是表现，结构交给HTML4，行为交给JS.
1.在首先定义CSS文件时，请确定CSS内容的命名规则，这个需要根据HTML结构来进行定义，别的不说，只要能够清楚表达，不用来回翻看HTML与CSS文件即可。
2.为了页面能够具有更好的兼容性，所以在设计表现的时候，首先要对标签重置，IE与FF不同。
body,div,p,ul,li,dl,dt,dd,h1,a{margin:0; padding:0;} 3.在载入图片时，如果图片比较大或者加载速度慢，会给用户一种突兀的感觉，怎么办呢。先加载一个小的文件，之后再加载一个大的文件。
html{background:url(../images/bg.gif) repeat-x;}
body{background:url(../images/clouds.gif) repeat-x;} 4.让页面内容居中，并最好设置显示内容的宽度：
#header,#banner,#content,#footer{width:1000px; margin:0 auto;} 5.内边距设置：
padding-top:45px;
6.网页里所有能够点击的链接图片，全部都有一个宽度为2px的紫色边框，去掉
img{ border:none; }
7.如果页面中有可点击的图片链接时，想都不要想，就这么处理:否则后患无穷；代码如：
在这里我们更需要它的块状元素的属性，所以我们将身为内联元素的img标签转化为块状元素，用“display:block; ”。
既然第三层的img转化为块状元素，根据W3C规范，内联元素是不能包含块状元素的，所以我们还必须把第二层的链接a，也要转化为块状元素，还是用“display:block; ”。
/* width height 根据图片的大小
#logo{display:block; width:220px; height:54px; float:left; background:#991616;}
#logo img{display:block;} 8.两个块状元素默认是不能在同一行出现的，为了解决这个问题：
float:left;9.为了解决自身高度不能够自适应内部元素的高度:
overflow:hidden;10.为了解决用左侧浮动来实现2栏效果，在存在外边距的情况下就会出现IE6的双倍边距Bug：
display:inline;11.发现效果图内的链接是红色的，鼠标移上去会出现下划线，为实现这个效果就需要对标题h1内的链接a的样式进行定义：
#leftArticle h1 a{color:#900; text-decoration:none;}
#leftArticle h1 a:hover{text-decoration:underline;} 12.垂直居中：
line-height13. footer是一个颜色为#393838灰色块，与上部的content距离是10px，自身高度是70px，文字颜色为灰白色(#ccc)且水平居中,文字与footer顶部的距离为18px，行距也是18px
#footer{
background:#393838;
height:52px;
line-height:18px;
margin-top:10px;
padding-top:18px;
text-align:center;
color:#ccc;
font-size:12px;
} 14.页面内的英文的字体全部是“宋体”，不是十分的美观，不如英文常用的字体verdana，那我们就给整个页面内的文字字体设置首选字体为“verdana”，只需要在body的样式里，加入“font-family”就可以了
body{
background:url(../images/clouds.gif) repeat-x;
padding-top:45px;
font-family:Verdana, Geneva, sans-serif;
}
评论