CSS Framework 960 Grid System (收)

文章目錄

• Containers(容器)
• Grids (網格)/ Columns(列)
• Margins
• Styling(添加樣式)

CSS架構 ：960 Grid System  官網：http://960.gs/

 什麼是架構？架構是一種你能夠使用在你的web項目中概念上的結構。CSS架構一般是CSS檔案的集合，包括基本風格的字型排版，表單樣式，表格版面配置等等，比如：

    * typography.css 字型排版規則
    * grid.css 表格版面配置
    * layout.css 布局
    * form.css 表單
    * general.css CSS常規設定

下面是一些不錯的CSS架構，推薦。

Blueprint CSS

Blueprint是一個CSS架構，它的目標是減少你的CSS開發時間。它提供給你強大的CSS基礎來建立你的項目，包括便於使用的grid，有效字型排版，以及可列印的stylesheet .

960 Grid System

 一、960的奧妙

      從數學著手： 960可以分解為2的6次方乘以3和5, 這使得960可以分割成以下寬度的整數倍：

2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40,48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480

共26種（26 = 7 * 2 * 2 – 2, 減去2是去掉1和960自身），我們標記為：

N(960) = N(2^6 * 3 * 5) = 26

根據上面的演算法，可以得到：

N(360) = N(2^3 * 3^2 * 5) = 22N(480) = N(2^5 * 3 * 5) = 22N(720) = N(2^4 * 3^2 * 5) = 28N(750) = N(2 * 3 * 5^3) = 14N(800) = N(2^5 * 5^2) = 16N(960) = N(2^6 * 3 * 5) = 26N(1000) = N(2^3 * 5^3) = 14N(1024) = N(2^10) = 9N(1440) = N(2^6 * 3^2 * 5) = 34N(1920) = N(2^7 * 3 * 5) = 30

從上述演算法我們可以得出以下結論：

要使得N(width)最大，width的取值有兩個系列： A系列： …, 320, 720, 1440, … B系列： …, 480, 960, 1920, … N越大，可組合的寬度值就越多。

      目前絕大多數顯示器都支援 1024 x 768 及其以上解析度，而960恰好是1024 x 768 解析度下最靈活也是最合適的尺寸，這些條件決定了960成了目前設計中最完美的尺寸。（PS：此部分內容大多摘自：960 Grid System 研究）

二、960網格系統簡介

本質：

960 Grid System 是一套基於寬度為 960px CSS 架構，它為網頁布局提供了通用的尺寸設定，它提供了兩種不同的尺寸布局：12列和16列，它們可以獨立使用，也可以一起使用。

尺寸：

12列的布局，將總寬分成12份，每份的寬度是60px，而16列的布局分成16份，每份的寬度是40px，每部分左右邊距都是10px，從而每列產生20px的空隙。

目的：

該系統以快速原型開發為出發點，但同時也能很好地整合到生產環境中去。它同時提供了列印布局、設計布局和一個能提供一致尺寸的 CSS 檔案。

 960 Grid System是一個非常棒的布局輔助設計系統，以960PX為基準寬度提供了12列和16列兩種配置模式（PS：目前官方已經提供了24列的配置模式，相信作者以後還會提供更多的配置模式）。

      1：alpha與omega

      960 Grid System的布局寬度為960PX，但由於每列左右均由10PX的margin（外補丁），因此內容寬度實際為940px。

/*alpha：用於清除左邊10px的marginomega：用於清除右邊10px的margin*/

      PS：從作者取alpha與omega這兩個名字可以想象一下或許作者很熱愛希臘文化。alpha（α）在希臘字母表裡，它是第一個字母，讀作“阿爾法”（阿拉法），代表開始；omega（γ）在希臘字母表裡，它是最後一個字母，讀作“歐美噶”（俄梅嘎），代表終了。

     2：prefix_XX與suffix_xx

/*用於在每個單元網格的前面或後面添加空白的列（欄）*//*用法：<div class="prefix_15 grid_1">IT北瓜</div>*/

      3：clear與hr

/*用於清除層的浮動*//*用法：<div class="clear"></div>*//*但假如你查看過官網首頁的原始碼你會發現，作者用的是<hr />*//*用法：可參考官網首頁的原始碼<hr />*/

     4：push_xx與pull_xx

/*這是2009-06-29更新新增的類，用於重新定製布局順序*//*用法：引用官網首頁原始碼*/<h1 class="grid_4 push_4">    960 Grid System</h1><!-- end .grid_4.push_4 --><p id="description" class="grid_4 pull_4">    <a href="files/960_download.zip">Download</a> &larr; Templates for <a href="http://www.adobe.com/products/fireworks/">Fireworks</a>, <a href="http://www.adobe.com/products/indesign/">InDesign</a>, <a href="http://www.inkscape.org/">Inkscape</a>, <a href="http://www.adobe.com/products/illustrator/">Illustrator</a>, <a href="http://www.omnigroup.com/applications/omnigraffle/">OmniGraffle</a>, <a href="http://www.adobe.com/products/photoshop/">Photoshop</a>, <a href="http://office.microsoft.com/en-us/visio/default.aspx">Visio</a>, <a href="http://www.microsoft.com/expression/products/Design_Overview.aspx">Expression Design</a>. Sketch PDF. CSS code. The 960.css file is 5.4 KB. View <a href="http://bitbucket.org/nathansmith/960-grid-system/">repository</a>.</p><!-- end #description.grid_4.pull_4 --><hr /><div class="grid_6">    <p>        <a href="http://www.spry-soft.com/grids/"><img src="img/tool_css.gif" alt="Custom CSS generator" width="460" height="60" /></a>    </p></div><!-- end .grid_6 --><div class="grid_6">    <p>        <a href="http://gridder.andreehansson.se/"><img src="img/tool_bookmark.gif" alt="Grid overlay bookmark" width="460" height="60" /></a>    </p></div><!-- end .grid_6 -->

      5：container_xx與grid_xx

/*這是該系統最基本最重要的用法，其中xx代表列數*//*用法：*/<div class="container_12">    <div id="sidebar" class="grid_2">sidebar</div>    <div id="content" class="grid_10">        <div id="main_content" class="grid_6 alpha">main content</div>        <div id="photos" class="grid_2">photo’s</div>        <div id="advertisements" class="grid_2 omega">advertisement</div>        <div class="clear"></div>    </div>    <div class="clear"></div></div>

以上轉載自IT北瓜

連結地址: http://imleeo.com/special-series/960-grid-system-introduction.html

首先，你需要學習關於”如何讓架構工作”。你可以通過自己的嘗試來學習，不過我仍然會在這裡為大家進行講解，那就開始吧。

不要編輯960.css

先說一點需要注意的:不要編輯960.css檔案，如果你修改了它，那麼你今後將無法更新這個架構。

讀取網格

在我們使用外部檔案中的CSS代碼之前，首先要在我們的HTML檔案中調用它們。像這樣調用:

<link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/reset.css” />
<link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/960.css” />
<link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/text.css” />

當我們調用好它們以後，我們要調用自己的CSS檔案了。例如，你也許會將你的CSS檔案命名為style.css或site.css或者其它什麼的。這樣調用它:

<link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/style.css” />

Containers(容器)

在960架構中，你可以選擇兩種類名為.container_12 和 .container_16的容器。這兩種容器都是960px的寬度(這就是為什麼叫做960 grid),但他們的不同之處是它們包含不同數量的列。顧名思義，.container_12的容器被分為12列，而 .container_16被分為16列。這兩種960px寬的容器都是水平置中的。

Grids (網格)/ Columns(列)

你可以選擇很多種不同的列寬組合，不過在這兩種容器中是有所不同的。你可以通過開啟960.css來瞭解這些寬度，但這對於設計一個網站並沒有什麼必要。在這裡暴風彬彬將一個很有用的技巧讓你使用架構更加容易。

例如:如果你想在你的容器中僅使用兩列(分別是主內容區/側邊欄)，你可以這樣做:

<div class=”container_12″>
<div class=”grid_4″>sidebar</div>
<div class=”grid_8″>main content</div>
</div>

看到上面的代碼你也許已經明白，不過我還是要講一下。也就是說你在container_12這個容器中使用了grid_4和grid_8兩列，4+8恰好等於12！明白了嗎？使用網格系統的好處之一就是你不用去計算沒列的寬度到底是多少，省去了很多運算。

下面讓我們看看如何編寫四列布局:

<div class=”container_12″>
<div class=”grid_2″>sidebar</div>
<div class=”grid_6″>main content</div>
<div class=”grid_2″>photo’s</div>
<div class=”grid_2″>advertisement</div>
</div>

正如你看到的，這個系統工作得很好。如果你嘗試使用你的瀏覽器讀取他的話，你會發現有一些不對勁的地方。不過不要緊，那正是我們下一個話題要討論的。

Margins

預設情況下，每列之間都會存在一些margin。每個grid_(這裡插入數值)類都有10px的左margin和右margin。也就是說兩列之間的margin值是20px。

20px的margin能讓布局保持應有的留白並看上去更平滑，這也是我喜歡960 grid System的原因之一。

在上面的例子中，我們將它使用瀏覽器讀取時出現了一些問題，現在我們來修複它。

問題在於每個列都包含左margin和右margin，但是最左面的列不應該有左margin，最右面的列不應該有右margin。(夠羅嗦！)下面是解決方案:

<div class=”container_12″>
<div class=”grid_2 alpha”>sidebar</div>
<div class=”grid_6″>main content</div>
<div class=”grid_2″>photo’s</div>
<div class=”grid_2 omega”>advertisement</div>
</div>

你僅需添加alpha類來去除左margin，添加omega類去除右margin。好了，現在我們的布局已經可以完美在瀏覽器中對齊了。(是的，包括IE6)

Styling(添加樣式)

事實上，你已經掌握了如何使用960架構建立基本的網格布局了。不過你也許還想為自己的布局添加一些樣式。

<div class=”container_12″>
<div id=”sidebar” class=”grid_2 alpha”>sidebar</div>
<div id=”content” class=”grid_6″>main content</div>
<div id=”photos” class=”grid_2″>photo’s</div>
<div id=”advertisements” class=”grid_2 omega”>advertisement</div>
</div>

由於CSS使用優先順序的形式來覺得如何解釋樣式，而id要比class的優先順序高。這樣我們就可以在我們的獨立CSS檔案中以id選擇符建立個人化的樣式了。如果湊巧有的樣式屬性與960相同但值又不同，瀏覽器會優先選擇你的CSS檔案中的樣式。當然，如果您感興趣，也可以看看上面的執行個體添加樣式後的實際效果。

英文原文:960 CSS Framework – Learn the Basics

本架構代碼適用於所有由yahoo評為A級（A-grade）的瀏覽器，yahoo對瀏覽器的評定情況如所示。