學習這篇文章之前，請先學習 CSS設計徹底研究”視頻教程目錄

http://learning.artech.cn/20070430.css-reserch-content-table.html

對 CSS盒子模型 有一個徹底的了解。

Blueprint CSS 框架二月二十一日升級到 0.7.1 版本了。經過這么長時間的這幾次版本升級，終于把按功能不同 CSS 規則在不同的 CSS 文件中的模式改為單一文件的模式了，所以感覺 Blueprint CSS 框架現在是一個可以用到實際項目中的 CSS 框架了。

* 發布網站: blueprintcss.googlecode.com
* 郵件討論: groups.google.com/group/blueprintcss
* 官方新聞: bjorkoy.com

這個 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 顧名思義標識“成功”

轉載于:https://www.cnblogs.com/qinhaijun/archive/2011/08/26/2154328.html

總結

以上是生活随笔為你收集整理的Blueprint CSS Framework 学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。