css 框架（CSS Framework）

就像其他语言一样，Framework 这个词也同样流行于 CSS，在很多地方我们已经感受到了 framework 在产品开发中提供的便捷和优秀的解决方案，帮助设计师们减轻工作量。

其实google一下已经有了很多 CSS 框架，都可以直接拿来用。但是本文之指意在让大家认识CSS framework 是怎么回事。

第一，reset 部分常常像这样：

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}

 
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}

blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}

ins{text-decoration:none}
del{text-decoration:line-through}
table{border-collapse:collapse;border-spacing:0}

首先是将绝大部分浏览器解析有争议元素的样式清零，免得经常会遇到各种各样的问题。
vertical-align: baseline ; 这个设置让所有的靠底线排列。包括上标和下标。以确切的垂直偏移。

再者设置字体:

body{font:13px/1.5 'Helvetica Neue',Arial,'Liberation Sans',FreeSans,sans-serif}

a:focus{outline:1px dotted}
h1{font-size:25px}
h2{font-size:23px}

h3{font-size:21px}
h4{font-size:19px}
h5{font-size:17px}
h6{font-size:15px}

font:13px/1.5; 意思是字号13px，行高1.5倍。

font-size的问题，为了让网页更好的支持网页缩放功能，应该使用em来替换px，这样会让ie6等神级浏览器也能良好的支持网页缩放。浏览器的默认字体高都是16px，所以未经调整的浏览器在显示1em=16px。换算过来的话也就是说1px=0.0625em，也就是12px =0.75em, 10px=0.625em，通过1px=0.0625em大家可以在CSS编写时通过px转换成em。

最后就是页面设置了：

body { text-align:center;}
/*让body内所有元素居中对齐*/

.wrapper{margin-left:auto;margin-right:auto;  text-align:left;}
/*居中层，text-align:left;内部元素排列还原*/

.left {float:left;}
.right {float:right;}
hr{border:0 #ccc solid;border-top-width:1px;clear:both;height:0}

/*清除浮动*/
.w960 {width:960px;}

.w960 {width:960px;}，就像这个属性一样，你可以定义很多这样的属性，只要你的网页里需要的宽度都可以定于一个。

在后面的网页结构里我会详细讲解这个框架的应用。

css 框架（CSS Framework）

Jquery Plugins

CSS Examples

CSS 教程