Blueprint（一）摘要

Blueprint CSS是一个CSS框架 ，其目的是减少你 的CSS 开 发时间了。 它给你的CSS了坚实的基础，具有易于使用的网格的基础上最高的项 目，合理的排版，甚至打印样式表 。

这个Blueprint 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，左右外填充为零。

 

布局的列宽(fantaxy注释：整个框架的核心） 给出了 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 顾名思义标识“成功”

学习笔记

CSS 对于任何一个网站来说都是不同的(当然这里排除那些克隆网站、抄袭网站等网站)，那么既然这样，框架对于网站来说有什么意义呢？
就我目前的认识和理解，框架对于一个网站来说的意义就在于布局。因为按照目前的情况来说，Web 标准的要求中很大的一个难点在于布局部分的代码，这样说是因为比如就算我们做 Web 标准做的不好，做的不够标准，只是形似而不是神似，只是表面上标准了可实际上离标准还差的远，但是如果在浏览器里看起来没问题我们就可以说是没问题，可是 如果布局做的不好，在浏览器里走形，那么即便代码做的再标准又如何呢？所以布局是 Web 标准的重中之重，自然也就 CSS 框架的主要要解决的部分了（个人愚见，大家多探讨，共同学习共同进步）。
网站布局部分的问题解决了，那么其他的细节问题就可以自定义 CSS 来做个性化的问题了。
Blueprint CSS Framework 的布局部分 CSS 给定了一些基本的东西，我们运用得当的话，可以演变出很多很多的布局，只要你的要求不是太怪，应该都能满足。
在 CSS 框架的模式下，拼合使用 class 是不可避免的，这里用避免这个词是因为我提倡尽量不使用拼合 class 的方式来使用 CSS 。拼合使用的优点缺点都有很多，目前为止还没有定论，等以后我再来仔细研究一下这个问题来写它一篇。

 

Blueprint布局概述：

可以实现宽度为 950 象素的整体居中的布局（这个布局模式应该是这个 CSS 框架中最主要或者最有可能多的用到的一个了），在这个模式下，实现布局我们只需要简单的计算所采用的 CSS 类的名字中包含的数值就可以实现，而不用计算复杂的宽度；
如果需要一行三列等分的布局，那么只要 24÷3＝8 ，好了，三个 div 的 class 类的名字就是 span-8

这个框架巧妙的把页面划分为24个column，每个column宽度为30px，中间的margin宽度为10px。这样，整体页面的宽度便为 30 * 24 + 10 * 23 = 950 px，刚好符合大多数显示器1024*768（宽屏为1024*800）最佳分辨率下页面的最佳宽度。这样，在定义分栏的时候，便可以用column span-n 这样的class快速定义宽度，当然前提条件是美工的设计尽量让分栏的宽度等于 30 * n + 10 * (n-1) = 40 * n - 10 这样的整数宽度。当然，我们也可以修改默认配置文件，让column的宽度不等于30px，修改方法也是相当的灵活，还有一些热心的开发者做出的快速工具 替你完成配置文件的修改。
你没看错， css也可以做框架，
当你在页面导入它后， 只要将最顶端的div class设为container, 如果你需要一个固定宽度的框，就用span-1做为div的class, 以此类推 直至span-24， span之间为10px的间隔， 如果你需要更多间隔就加prepend-1或者 append-1。 这样你就可以完全忘掉table了。

 

http://hi.baidu.com/aqy106/blog/item/7002b98f83f96ff7513d9240.html