近兩年來，程序員有一句話很流行，“不要重復制造輪子”，所以出現了許許多多讓我們非常受用的各種框架。Framework在開發的各個領域給我們減少了很多工作量。而對于網頁設計師來說，一直以來，缺少這樣的Framework來幫助設計師們減輕工作量。

今天給大家推薦一些不錯的CSS Framework：

首先是本文的主角：

這是一個非常輕量級而且很少侵入性的框架（這話怎么看都不是網頁設計師能熟悉的，:-) ），換句話來說，這是一個很底層的CSS Framework，并沒有替你實現任何布局，也沒有提供很多好看的模板。它只是幫你把一些最基本的事情做掉了，剩下的交給自己來了。非常適合那些具有一定開發經驗的網頁設計師使用。我做了一些中文化修改，大家如果發現問題，可以聯系我。

reset.css

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,dd, dl, dt,
li, ol, ul,fieldset, form, label, legend,
table, caption, tbody, tfoot, thead,
tr, th, td {
margin: 0;padding: 0;border: 0;
font-weight: inherit;font-style: inherit;
font-size: 100%;line-height: 1;
font-family: inherit;
text-align: left;vertical-align: baseline;

}

a img, :link img, :visited img {border: 0;}

table {border-collapse: collapse;border-spacing: 0;}

ol, ul {list-style: none;}

q:before, q:after,blockquote:before, blockquote:after {content: “”;}

首先是將絕大部分元素的樣式清零，免得經常會遇到各種各樣的問題。來自于 Eric 的一篇文章 。

global.css

body{background-color:#FFFFFF;}
body, p, td, th, li
{
font-family: “宋體”,verdana,helvetica,sans-serif;
font-size:0.875em;
line-height:1.5em;
color:#000000;
}

注意兩點，這里定義了背景色和前景色，這是標準要求的，是網頁可用性的一個基本方面，大家可以執行修改。

第二點，就是font-size的問題，為了讓網頁更好的支持網頁縮放功能，應該使用em來替換px，這樣會讓ie6等上古瀏覽器也能良好的支持網頁縮放。瀏覽器的默認字體高都是16px，所以未經調整的瀏覽器在顯示1em=16px。換算過來的話也就是說1px=0.0625em，也就是12px=0.75em, 10px=0.625em，通過1px=0.0625em大家可以在CSS編寫時通過px轉換成em。

/* Standard Definitions
—————————————-*/
.left {float:left;}
.right {float:right;}
.clearIt {clear:both;}
/* =10px */
.small {font-size:.625em;}
/* =14px */
.large {font-size:0.875em;}
/* =16px */
.larger {font-size:1em;}
.soft {color:#D3D3D3;}
.hide {display:none;}
p.last {margin-bottom:0px;}

提供了一些比較實用的預定義類。

print.css

感謝 Hartija Css Print Framework 提供，這里面有個非常好的idea，我們來看一下，大大提高了打印效果：

/*hide various parts from the site

#header, #footer, #navigation, #rightSideBar, #leftSideBar
{display:none;}

*/

對于網頁打印來說，我們更需要的是正文內容，這樣可以將那些美麗的元素暫時藏掉。

打包下載： element_css_framework_modify.rar

//———————————————————————

下面介紹些其他出色的框架：

更多請參看： http://webtecker.com/2008/04/17/list-of-css-frameworks/

本文來源： http://www.1x3x.net/blog/web-design/2008/04/css-framework.html

[轉] CSS Framework，讓你事半功倍