學(xué)習(xí)這篇文章之前，請先學(xué)習(xí) CSS設(shè)計徹底研究”視頻教程目錄

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

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

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

* 發(fā)布網(wǎng)站: blueprintcss.googlecode.com
* 郵件討論: groups.google.com/group/blueprintcss
* 官方新聞: bjorkoy.com

這個 CSS 框架將 html 標(biāo)簽設(shè)定為如下情況：

• 統(tǒng)一重置了 43 個 html 標(biāo)簽（html 4.0 標(biāo)簽一共 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 標(biāo)簽的默認(rèn)樣式為：內(nèi)外填充邊框都為零，字體粗細(xì)、字體科族和字體樣式繼承，字體大小百分之百（在中文情況下使用這個還是改固定象素的好），高度以基線對齊；
• 設(shè)定 body 內(nèi)的行高為 1.5 倍；字體大小百分之七十五（在中文情況下使用這個還是改固定象素的好）；字體顏色為 #222222 （接近于黑色）
• 設(shè)定 table 的邊界間距為有間距、間距為零。（用有間距而間距為零的方式，估計只有這樣才能將表格的邊界間距設(shè)的看不到）；下外填充 1.4em ，寬度 100%；
• 設(shè)定 caption, th, td 內(nèi)的元素居左，字體粗細(xì)為普通；caption 的背景色為 #EEEEEE （特淺的灰），th 背景為 #C3D9FF （淺藍(lán)色）內(nèi)的字體為粗體，th, td 的內(nèi)填充為 上4px 右10px 下4px 左5px；
• 設(shè)定 table, td, th 內(nèi)的元素高度居中；
• 設(shè)表格如果需要隔行換色的效果或者某行需要不一樣的顏色，那么已經(jīng)給定了 tr.even td 類，背景顏色為 #E5ECF9 （淺淺的藍(lán)）
• 設(shè)定 tfood 為斜體字
• 設(shè)定 blockquote, q 元素之前和之后的填充內(nèi)容為空，引用符號也為空；blockquote 的外填充為 1.5em 字體顏色 #666666 （深灰色），斜體字（中文斜體表現(xiàn)并不好，這個改了斜體不要而用背景色或者字體小一號來表示應(yīng)該會好點）
• 設(shè)定鏈接下的圖片的 border 為零；
• 設(shè)定 h1 至 h6 不同的字體大小粗細(xì)外填充，顏色為 #111111 （更接近于黑）
• 設(shè)定 h1 至 h6 下的圖片的外填充為零
• 設(shè)定行內(nèi)圖片元素默認(rèn)左漂浮，同時給出了一個 p img.right 的類，以備你需要圖片右漂浮的時候來用（不過很多時候我們需要的是圖片不漂浮，這個需要改或者單獨建立一個類了）；
• 設(shè)定鏈接的顏色為 #000099 （深藍(lán)色）帶下劃線，鼠標(biāo)滑過和焦點狀態(tài)顏色為黑色；
• 設(shè)定 abbr 和 acronym 下邊緣為一象素點線的邊框；
• 設(shè)定 del 刪除字的顏色為 #666666 （中等灰度的灰）；
• 設(shè)定 pre 和 code 內(nèi)地文字顯示為 white-space:pre （就是不換行啦，現(xiàn)在<nobr><wbr><xmp>都不建議用了）；
• 定義了 ul 和 ol 列表前的標(biāo)識為實心小圓點和阿拉伯?dāng)?shù)字。

還有一些各個標(biāo)簽的上右下左的填充、行高、字號大小的設(shè)定不細(xì)說了。

單獨給定了幾個可以根據(jù)實際需要單獨調(diào)用的類：

• .small 小號字；
• .large 大號字；
• .hide 不顯示；
• .quiet 字色為 #666666 （深灰色）；
• .loud 字色為 #000000 （黑色）；
• .highlight 背景色為 #FFFF00 （黃色）；
• .added 背景色為 #006600 （綠色）字色為 #FFFFFF （白色）；
• .removed 背景色為 #990000 （紅色）字色為 #FFFFFF （白色）；
• .first 左邊的內(nèi)外填充都為零；
• .last 右邊的內(nèi)外填充都為零；
• .top 上面的內(nèi)外填充都為零；
• .bottom 下面的內(nèi)外填充都為零。

布局部分 CSS 說明：

• .container 寬度 950 象素，整體居中模式。這個類應(yīng)該是主要用于頁面 body 元素內(nèi)的整體頁面控制的，好像也沒其他用了；
• .showgrid 無用的類，這個是用來演示這個框架的一個輔助，可以將這個類刪除；
• body 元素設(shè)定為上下外填充 1.5em，左右外填充為零。

布局的列寬給出了 24 個不同寬度設(shè)定的數(shù)值：

• div.span-1 至 div.span-24 全部設(shè)定為左漂浮，右外填充 10 象素；
• div.last 設(shè)定右外填充為零象素；
• .span-1 至 .span-24 從寬度 30 象素開始，每 40 象素為一單元增加；
• .span-24 和 div.span-24 右外填充覆蓋上面的設(shè)置，設(shè)置為零。

以上四項綜合理解可以理解為：

• .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 類應(yīng)用于 div 元素，那么這個 div 元素的右外填充將覆蓋成為零。

內(nèi)填充數(shù)值：

• .append-1 至 .append-23 設(shè)置內(nèi)右填充，從 40 像素開始，每 40 像素為一單元增加，.append-23 內(nèi)右填充數(shù)值為 920 像素；
• .prepend-1 至 .prepend-23 設(shè)置內(nèi)左填充，從 40 像素開始，每 40 像素為一單元增加，.prepend-23 內(nèi)左填充數(shù)值為 920 像素。

給定兩個右邊線樣式：

• div.border 設(shè)定右內(nèi)填充 4px ，右外填充 5px ，右邊線 1px 灰色（#EEEEEE）實線；
• div.colborder設(shè)定右內(nèi)填充 24px ，右外填充 25px ，右邊線 1px 灰色（#EEEEEE）實線。

外填充樣式：

• .pull-1 至 .pull-24 設(shè)定左外填充，從負(fù) 40 象素開始到負(fù) 960 象素，每 40 象素為一個單元數(shù)值變化，同時具有左漂浮和相對定位屬性；
• .push-1 至 .push-24 設(shè)定上填充為零，下填充為 1.5 em ；左外填充，從 40 象素開始到 960 象素，每 40 象素為一個單元數(shù)值變化，右外填充，從負(fù) 40 象素開始到負(fù) 960 象素，每 40 象素為一個單元數(shù)值變化，同時具有右漂浮和相對定位屬性。

以上兩項應(yīng)該是這個 CSS 框架中最難理解的部分了，在這里不詳細(xì)說明了，等到寫實際應(yīng)用的時候弄個列子一說就明白作用了；

給定一些其他樣式：

• .box 顧名思義就是一個盒子了，哈，設(shè)定內(nèi)填充 1.5em ，外下填充 1.5em ，背景顏色 #E5ECF9 (淺淺的藍(lán))
• hr 設(shè)定 html 的 <hr /> 橫線樣式為：背景色 #DDDDDD (灰色)，字色 #DDDDDD (灰色)，兩側(cè)不允許有漂浮元素，無漂浮，寬度百分之百，高度 0.1em ，外填充上左右為零，下外填充為 1.5em ，沒有邊框。具體表現(xiàn)出來基本就是一根橫的一象素灰色線了；
• hr.space 這個樣式是用在 <hr /> 標(biāo)簽內(nèi)的，設(shè)定了背景色和字色都為白色。因為是用在 <hr /> 標(biāo)簽內(nèi)，所以它同時具有 <hr /> 的設(shè)定樣式，只是將背景色和字色從灰色覆蓋為白色，所以表現(xiàn)起來其實就是一根橫的一象素白色線。

給定清除浮動樣式：

• .clearfix:after 和 .container:after 設(shè)定 .clearfix 和 .container 之后的表現(xiàn)為：內(nèi)容是“.”(一個小點)，顯示為塊元素，高度為零，兩側(cè)不允許有漂浮元素，可見度屬性(visibility)為隱藏 (注：可見度 visibility 隱藏屬性和 display 隱藏屬性有占位區(qū)別，visibility 隱藏屬性占據(jù)空間位置而 display 隱藏屬性不占據(jù)空間位置)；
• .clearfix 和 .container 設(shè)定顯示樣式為行內(nèi)塊(IE 不完全支持此屬性，目前只是用這個來讓 IE 獲得 hasLayout )；
• * html .clearfix 和 * html .container 設(shè)定在“通配符下的 html 下的.clearfix 和 .container 兩個樣式”屬性高度為 1% (高度為 1% 作用和 zoom:1 的作用是一樣的，IE 在 inline-block 加上 1% 或 zoom:1 獲得類似 table-cell 的屬性，只 IE6 以下識別)；
• .clearfix 和 .container 設(shè)定顯示樣式為塊模式(覆蓋前面指定的行內(nèi)塊模式為塊模式，但 IE 不會讓 hasLayout 消失，目的由此達(dá)到)；
• .clear 設(shè)定為兩側(cè)不允許有漂浮元素。

清除浮動的這三個類中的前兩個比較復(fù)雜，除了清除浮動外還有一些其他的能力，基本上這幾個樣式的內(nèi)容和先后順序和代碼層級設(shè)定完后就能在所有的瀏覽器下清除浮動了(如果某個瀏覽器不支持的話，那么估計也很難支持這個框架中的大部分 CSS 屬性，那么這個框架對這個瀏覽器來說也沒太大的意義了)，具體研究起來就太深了，我是搞不定，不過對我們用的人來說，只要知道你需要清除浮動的時候就用這兩個類就可以了。顧名思義，.clearfix 類一般用在你不介意多加一個或者某些情況下你只能多加一個 div 或其他的 html 標(biāo)簽元素而本身內(nèi)部不包含內(nèi)容的元素身上來清除浮動，.container 類用在你的一個本身內(nèi)部包含內(nèi)容的元素身上來清除浮動。.clear 這個類嘛，沒啥可說的了，就是不允許兩側(cè)有浮動元素。

表單元素部分：

這部分其實沒有太多需要仔細(xì)研究的，大部分指定的是表單元素的一些字體、字號、字色和元素的邊框、邊距、寬、高等。這些就不詳說了，說說可以稍微需要知道一下的。

• 給定了元素的獲得焦點的樣式(一象淺黑邊)，可惜 IE 不支持，所以這個作用不是那么大，畢竟 IE 現(xiàn)在還是占據(jù)市場份額的巨頭；
• 給定了三個類，可以用來標(biāo)識有特殊意義的塊區(qū)：.error, .notice, .success ，都具有不同的背景色和邊框色；
• .error 顧名思義標(biāo)識“錯誤”
• .notice 顧名思義標(biāo)識“提示”
• .success 顧名思義標(biāo)識“成功”

轉(zhuǎn)載于:https://www.cnblogs.com/qinhaijun/archive/2011/08/26/2154328.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。