CSS 架構二月二十一日升級到 0.7.1 版本了。經過這麼長時間的這幾次版本升級，終於把按功能不同 CSS 規則在不同的 CSS 檔案中的模式改為單一檔案的模式了，所以感覺 Blueprint CSS 架構現在是一個可以用到實際項目中的 CSS 架構了。
這個 CSS 架構將 html 標籤設定為如下情況：
- 統一重設了 43 個 html 標籤（html 4.0 標籤一共 91 個）的屬性，（html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td）。
- 重設 html 標籤的預設樣式為：內外填充邊框都為零，字型粗細、字型科族和字型樣式繼承，字型大小百分之百（在中文情況下使用這個還是改固定象素的好），高度以基準對齊；
- 設定 body 內的行高為 1.5 倍；字型大小百分之七十五（在中文情況下使用這個還是改固定象素的好）；字型顏色為 #222222 （接近於黑色）
- 設定 table 的邊界間距為有間距、間距為零。（用有間距而間距為零的方式，估計只有這樣才能將表格的邊界間距設的看不到）；下外填充 1.4em ，寬度 100%；
- 設定 caption, th, td 內的元素居左，字型粗細為普通；caption 的背景色為 #EEEEEE （特淺的灰），th 背景為 #C3D9FF （淺藍色）內的字型為粗體，th, td 的內填充為 上4px 右10px 下4px 左5px；
- 設定 table, td, th 內的元素高度置中；
- 設表格如果需要隔行換色的效果或者某行需要不一樣的顏色，那麼已經給定了 tr.even td 類，背景顏色為 #E5ECF9 （淺淺的藍）
- 設定 tfood 為斜體字
- 設定 blockquote, q 元素之前和之後的填充內容為空白，引用符號也為空白；blockquote 的外填充為 1.5em 字型顏色 #666666 （深灰色），斜體字（中文斜體表現並不好，這個改了斜體不要而用背景色或者字型小一號來表示應該會好點）
- 設定連結下的圖片的 border 為零；
- 設定 h1 至 h6 不同的字型大小粗細外填充，顏色為 #111111 （更接近於黑）
- 設定 h1 至 h6 下的圖片的外填充為零
- 設定行內圖片元素預設左漂浮，同時給出了一個 p img.right 的類，以備你需要圖片右漂浮的時候來用（不過很多時候我們需要的是圖片不漂浮，這個需要改或者單獨建立一個類了）；
- 設定連結的顏色為 #000099 （深藍色）帶底線，滑鼠滑過和焦點狀態顏色為黑色；
- 設定 abbr 和 acronym 下邊緣為一象素點線的邊框；
- 設定 del 刪除字的顏色為 #666666 （中等灰階的灰）；
- 設定 pre 和 code 內地文字顯示為 white-space:pre （就是不換行啦，現在<nobr><wbr><xmp>都不建議用了）；
定義了 ul 和 ol 列表前的標識為實心小圓點和阿拉伯數字。
- 還有一些各個標籤的上右下左的填充、行高、字型大小大小的設定不細說了。
單獨給定了幾個可以根據實際需要單獨調用的類：
- .small 小號字；
- .large 大號字；
- .hide 不顯示；
- .quiet 字色為 #666666 （深灰色）；
- .loud 字色為 #000000 （黑色）；
- .highlight 背景色為 #FFFF00 （黃色）；
- .added 背景色為 #006600 （綠色）字色為 #FFFFFF （白色）；
- .removed 背景色為 #990000 （紅色）字色為 #FFFFFF （白色）；
- .first 左邊的內外填充都為零；
- .last 右邊的內外填充都為零；
- .top 上面的內外填充都為零；
- .bottom 下面的內外填充都為零。
布局部分 CSS 說明：
- .container 寬度 950 象素，整體置中模式。這個類應該是主要用於頁面 body 元素內的整體頁面控制的，好像也沒其他用了；
- .showgrid 無用的類，這個是用來示範這個架構的一個輔助，可以將這個類刪除；
- body 元素設定為上下外填充 1.5em，左右外填充為零。
布局的列寬給出了 24 個不同寬度設定的數值：
- div.span-1 至 div.span-24 全部設定為左漂浮，右外填充 10 象素；
- div.last 設定右外填充為零象素；
- .span-1 至 .span-24 從寬度 30 象素開始，每 40 象素為一單元增加；
- .span-24 和 div.span-24 右外填充覆蓋上面的設定，設定為零。
以上四項綜合理解可以理解為：
- .span-1 至 .span-23 如果用於 div 元素，那麼這個 div 具有的屬性是左漂浮，右外填充 10 象素，寬度各自；
- .span-1 至 .span-23 如果如果用於其他元素，那麼就只具有寬度屬性而不具有漂浮屬性也沒有右外填充；
- .span-24 是個特殊一點的樣式，如果用於 div 元素，那麼寬度為 950 象素，左漂浮，右外填充為零；
- .span-24 是個特殊一點的樣式，如果用於其他元素，那麼寬度為 950 象素，無漂浮，右外填充為零；
- div.last 這個類在 CSS 檔案中的位置在 div.span-1 至 div.span-24 的後面，所以如果 .last 類應用於 div 元素，那麼這個 div 元素的右外填充將覆蓋成為零。
內填充數值：
- .append-1 至 .append-23 設定內右填充，從 40 像素開始，每 40 像素為一單元增加，.append-23 內右填充數值為 920 像素；
- .prepend-1 至 .prepend-23 設定內左填充，從 40 像素開始，每 40 像素為一單元增加，.prepend-23 內左填充數值為 920 像素。
給定兩個右邊線樣式：
- div.border 設定右內填充 4px ，右外填充 5px ，右邊線 1px 灰色（#EEEEEE）實線；
- div.colborder設定右內填充 24px ，右外填充 25px ，右邊線 1px 灰色（#EEEEEE）實線。
外填充樣式：
- .pull-1 至 .pull-24 設定左外填充，從負 40 象素開始到負 960 象素，每 40 象素為一個單元數值變化，同時具有左漂浮和相對定位屬性；
- .push-1 至 .push-24 設定上填充為零，下填充為 1.5 em ；左外填充，從 40 象素開始到 960 象素，每 40 象素為一個單元數值變化，右外填充，從負 40 象素開始到負 960 象素，每 40 象素為一個單元數值變化，同時具有右漂浮和相對定位屬性。
以上兩項應該是這個 CSS 架構中最難理解的部分了，在這裡不詳細說明了，等到寫實際應用的時候弄個列子一說就明白作用了；
給定一些其他樣式：
- .box 顧名思義就是一個盒子了，哈，設定內填充 1.5em ，外下填充 1.5em ，背景顏色 #E5ECF9 (淺淺的藍)
hr 設定 html 的 <hr /> 橫線樣式為：背景色 #DDDDDD (灰色)，字色 #DDDDDD (灰色)，兩側不允許有漂浮元素，無漂浮，寬度百分之百，高度 0.1em ，外填充上左右為零，下外填充為 1.5em ，沒有邊框。具體表現出來基本就是一根橫的一象素灰色線了；
- hr.space 這個樣式是用在 <hr /> 標籤內的，設定了背景色和字色都為白色。因為是用在 <hr /> 標籤內，所以它同時具有 <hr /> 的設定樣式，只是將背景色和字色從灰色覆蓋為白色，所以表現起來其實就是一根橫的一象素白色線。
給定清除浮動樣式：
- .clearfix:after 和 .container:after 設定 .clearfix 和 .container 之後的表現為：內容是“.”(一個小點)，顯示為塊元素，高度為零，兩側不允許有漂浮元素，可見度屬性(visibility)為隱藏 (註：可見度 visibility 隱藏屬性和 display 隱藏屬性有佔位區別，visibility 隱藏屬性佔據空間位置而 display 隱藏屬性不佔據空間位置)；
- .clearfix 和 .container 設定顯示樣式為行內塊(IE 不完全支援此屬性，目前只是用這個來讓 IE 獲得 hasLayout )；
* html .clearfix 和 * html .container 設定在“萬用字元下的 html 下的.clearfix 和 .container 兩個樣式”屬性高度為 1% (高度為 1% 作用和 zoom:1 的作用是一樣的，IE 在 inline-block 加上 1% 或 zoom:1 獲得類似 table-cell 的屬性，只 IE6 以下識別)；
- .clearfix 和 .container 設定顯示樣式為塊模式(覆蓋前面指定的行內塊模式為塊模式，但 IE 不會讓 hasLayout 消失，目的由此達到)；
- .clear 設定為兩側不允許有漂浮元素。
清除浮動的這三個類中的前兩個比較複雜，除了清除浮動外還有一些其他的能力，基本上這幾個樣式的內容和先後順序和代碼層級設定完後就能在所有的瀏覽器下清除浮動了(如果某個瀏覽器不支援的話，那麼估計也很難支援這個架構中的大部分 CSS 屬性，那麼這個架構對這個瀏覽器來說也沒太大的意義了)，具體研究起來就太深了，我是搞不定，不過對我們用的人來說，只要知道你需要清除浮動的時候就用這兩個類就可以了。顧名思義，.clearfix 類一般用在你不介意多加一個或者某些情況下你只能多加一個 div 或其他的 html 標籤元素而本身內部不包含內容的元素身上來清除浮動，.container 類用在你的一個本身內部包含內容的元素身上來清除浮動。.clear 這個類嘛，沒啥可說的了，就是不允許兩側有浮動元素。
表單元素部分：
這部分其實沒有太多需要仔細研究的，大部分指定的是表單元素的一些字型、字型大小、字色和元素的邊框、邊距、寬、高等。這些就不詳說了，說說可以稍微需要知道一下的。
給定了元素的獲得焦點的樣式(一象淺黑邊)，可惜 IE 不支援，所以這個作用不是那麼大，畢竟 IE 現在還是佔據市場份額的巨頭；
給定了三個類，可以用來標識有特殊意義的塊區：.error, .notice, .success ，都具有不同的背景色和邊框色；
- .error 顧名思義標識“錯誤”
- .notice 顧名思義標識“提示”
- .success 顧名思義標識“成功”
blueprint視覺化檢視 - boks 下載
blueprint css frameworks下載
