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

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

對(duì) CSS盒子模型 有一個(gè)徹底的了解。

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

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

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

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

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

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

• .small 小號(hào)字；
• .large 大號(hào)字；
• .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 象素，整體居中模式。這個(gè)類應(yīng)該是主要用于頁面 body 元素內(nèi)的整體頁面控制的，好像也沒其他用了；
• .showgrid 無用的類，這個(gè)是用來演示這個(gè)框架的一個(gè)輔助，可以將這個(gè)類刪除；
• body 元素設(shè)定為上下外填充 1.5em，左右外填充為零。

布局的列寬給出了 24 個(gè)不同寬度設(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è)置為零。

以上四項(xiàng)綜合理解可以理解為：

• .span-1 至 .span-23 如果用于 div 元素，那么這個(gè) div 具有的屬性是左漂浮，右外填充 10 象素，寬度各自；
• .span-1 至 .span-23 如果如果用于其他元素，那么就只具有寬度屬性而不具有漂浮屬性也沒有右外填充；
• .span-24 是個(gè)特殊一點(diǎn)的樣式，如果用于 div 元素，那么寬度為 950 象素，左漂浮，右外填充為零；
• .span-24 是個(gè)特殊一點(diǎn)的樣式，如果用于其他元素，那么寬度為 950 象素，無漂浮，右外填充為零；
• div.last 這個(gè)類在 CSS 文件中的位置在 div.span-1 至 div.span-24 的后面，所以如果 .last 類應(yīng)用于 div 元素，那么這個(gè) 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 像素。

給定兩個(gè)右邊線樣式：

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

外填充樣式：

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

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

給定一些其他樣式：

• .box 顧名思義就是一個(gè)盒子了，哈，設(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 這個(gè)樣式是用在 <hr /> 標(biāo)簽內(nèi)的，設(shè)定了背景色和字色都為白色。因?yàn)槭怯迷?<hr /> 標(biāo)簽內(nèi)，所以它同時(shí)具有 <hr /> 的設(shè)定樣式，只是將背景色和字色從灰色覆蓋為白色，所以表現(xiàn)起來其實(shí)就是一根橫的一象素白色線。

給定清除浮動(dòng)樣式：

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

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

表單元素部分：

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

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

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

總結(jié)

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

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