Blueprint CSS Framework 学习笔记－概述

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 顾名思义标识“成功”