资源描述:
《blueprint css 笔记》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、BlueprintCSS笔记2010年02月23日星期二09:40BlueprintCSS是一个CSS框架,其目的是减少你的CSS开发时间了。它给你的CSS了坚实的基础,具有易于使用的网格的基础上最高的项目,合理的排版,甚至打印样式表。这个BlueprintCSS框BlueprintCSS是一个CSS框架,其目的是减少你的CSS开发时间了。它给你的CSS了坚实的基础,具有易于使用的网格的基础上最高的项目,合理的排版,甚至打印样式表。这个BlueprintCSS框架将html标签设定为如下情况:统一重置了43个html标签(html4.0标签
2、一共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标签的默认样式为:内外填充边框都为零,字体粗细、字体科族和字体样式继承,字体大小百分之百(在中文情况下使用这个还
3、是改固定象素的好),高度以基线对齐;设定body内的行高为1.5倍;字体大小百分之七十五(在中文情况下使用这个还是改固定象素的好);字体颜色为#222222(接近于黑色)设定table的边界间距为有间距、间距为零。(用有间距而间距为零的方式,估计只有这样才能将表格的边界间距设的看不到);下外填充1.4em,宽度100%;设定caption,th,td内的元素居左,字体粗细为普通;caption的背景色为#EEEEEE(特浅的灰),th背景为#C3D9FF(浅蓝色)内的字体为粗体,th,td的内填充为上4px右10px下4px左5px;设定t
4、able,td,th内的元素高度居中;设表格如果需要隔行换色的效果或者某行需要不一样的颜色,那么已经给定了tr.eventd类,背景颜色为#E5ECF9(浅浅的蓝)设定tfood为斜体字设定blockquote,q元素之前和之后的填充内容为空,引用符号也为空;blockquote的外填充为1.5em字体颜色#666666(深灰色),斜体字(中文斜体表现并不好,这个改了斜体不要而用背景色或者字体小一号来表示应该会好点)设定链接下的图片的border为零;设定h1至h6不同的字体大小粗细外填充,颜色为#111111(更接近于黑)设定h1至h6下
5、的图片的外填充为零设定行内图片元素默认左漂浮,同时给出了一个pimg.right的类,以备你需要图片右漂浮的时候来用(不过很多时候我们需要的是图片不漂浮,这个需要改或者单独建立一个类了);设定链接的颜色为#000099(深蓝色)带下划线,鼠标滑过和焦点状态颜色为黑色;设定abbr和acronym下边缘为一象素点线的边框;设定del删除字的颜色为#666666(中等灰度的灰);设定pre和code内地文字显示为white-space:pre(就是不换行啦,现在都不建议用了);定义了ul和ol列表前的标识为实心小
6、圆点和阿拉伯数字。还有一些各个标签的上右下左的填充、行高、字号大小的设定不细说了。单独给定了几个可以根据实际需要单独调用的类:.small小号字;.large大号字;.hide不显示;.quiet字色为#666666(深灰色);.loud字色为#000000(黑色);.highlight背景色为#FFFF00(黄色);.added背景色为#006600(绿色)字色为#FFFFFF(白色);.removed背景色为#990000(红色)字色为#FFFFFF(白色);.first左边的内外填充都为零;.last右边的内外填充都为零;.top上面
7、的内外填充都为零;.bottom下面的内外填充都为零。布局部分CSS说明:.container宽度950象素,整体居中模式。这个类应该是主要用于页面body元素内的整体页面控制的,好像也没其他用了;.showgrid无用的类,这个是用来演示这个框架的一个辅助,可以将这个类删除;body元素设定为上下外填充1.5em,左右外填充为零。布局的列宽给出了24个不同宽度设定的数值:div.span-1至div.span-24全部设定为左漂浮,右外填充10象素;div.last设定右外填充为零象素;.span-1至.span-24从宽度30象素开始,
8、每40象素为一单元增加;.span-24和div.span-24右外填充覆盖上面的设置,设置为零。以上四项综合理解可以理解为:.span-1至.span-23如果用于div元素,