Blueprint CSS框架 用法说明

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

BlueprintisaCSSframework,whichaimstocutdownonyourCSSdevelopmenttime.ItgivesyouasolidCSSfoundationtobuildyourprojectontopof,withaneasy-to-usegrid,sensibletypography,andevenastylesheetforprinting.

官方网站:http://blueprintcss.org/

BlueprintCSS框架将html标签设定为如下情况:

统一重置了43个html标签(html4.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.eventd类,背景颜色为#E5ECF9(浅浅的蓝)

设定tfood为斜体字

设定blockquote,q元素之前和之后的填充内容为空,引用符号也为空;blockquote的外填充为1.5em字体颜色#666666(深灰色),斜体字(中文斜体表现并不好,这个改了斜体不要而用背景色或者字体小一号来表示应该会好点)

设定链接下的图片的border为零;

设定h1至h6不同的字体大小粗细外填充,颜色为#111111(更接近于黑)

设定h1至h6下的图片的外填充为零

设定行内图片元素默认左漂浮,同时给出了一个pimg.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.5em;左外填充,从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顾名思义标识“成功”

相关推荐