近兩年來，程序員有一句話很流行，“不要重復(fù)制造輪子”，所以出現(xiàn)了許許多多讓我們非常受用的各種框架。Framework在開發(fā)的各個(gè)領(lǐng)域給我們減少了很多工作量。而對(duì)于網(wǎng)頁設(shè)計(jì)師來說，一直以來，缺少這樣的Framework來幫助設(shè)計(jì)師們減輕工作量。

今天給大家推薦一些不錯(cuò)的CSS Framework：

首先是本文的主角：

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

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: “”;}

首先是將絕大部分元素的樣式清零，免得經(jīng)常會(huì)遇到各種各樣的問題。來自于 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;
}

注意兩點(diǎn)，這里定義了背景色和前景色，這是標(biāo)準(zhǔn)要求的，是網(wǎng)頁可用性的一個(gè)基本方面，大家可以執(zhí)行修改。

第二點(diǎn)，就是font-size的問題，為了讓網(wǎng)頁更好的支持網(wǎng)頁縮放功能，應(yīng)該使用em來替換px，這樣會(huì)讓ie6等上古瀏覽器也能良好的支持網(wǎng)頁縮放。瀏覽器的默認(rèn)字體高都是16px，所以未經(jīng)調(diào)整的瀏覽器在顯示1em=16px。換算過來的話也就是說1px=0.0625em，也就是12px=0.75em, 10px=0.625em，通過1px=0.0625em大家可以在CSS編寫時(shí)通過px轉(zhuǎn)換成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;}

提供了一些比較實(shí)用的預(yù)定義類。

print.css

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

/*hide various parts from the site

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

*/

對(duì)于網(wǎng)頁打印來說，我們更需要的是正文內(nèi)容，這樣可以將那些美麗的元素暫時(shí)藏掉。

打包下載： element_css_framework_modify.rar

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

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

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

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

[轉(zhuǎn)] CSS Framework，讓你事半功倍