blue print css - 技术教程

这是我的新宠。曾经960也是这么风光一段时间，不过是时候见异思迁了！没办法，这是活在前沿的ruby人的生活态度。用古人的一名话讲，这叫做“流水不腐，户枢不螻”！

当然并不是960不好，但其内蕴就是这么多，再深挖也挖不出什么！YUI看来也只个很好的选择，什么负边距，液体布局，可变字体都是值得借镜的。然后能力有限，想一口吃成胖子是不可能。因此我的目光还是停留在blueprint吧，下个驿站再选YUI。

blueprint/src/reset.css: 基本已经总结出最佳实践的reset方案，为页面元素重置默认值，消除各游览器的差异。
blueprint/src/grid.css: 使用网格设计能提升可用性和可访问性。目前960与blueprint都是固态网格，缺乏像Veerle’s Blog能自适应宽度的液体效果，不过这也足够支撑起最复杂的布局。
blueprint/src/typography.css: 关于排版的css，包含了一些非常精妙的文字排版样式。
blueprint/src/forms.css: 包含了一些表单样式。
blueprint/src/print.css: 很多时候我们没有考虑到用户的打印样式，很多无用的图片，广告都是用户所不希望打印，所以需要重新设置打印样式。
blueprint/src/ie.css: 包含了ie6和ie7的许多css hack。

下面遂个介绍一下。

reset.css

重置。

没有什么好说的。

默认行高为1.5。表格的border是分开的。

typography.css

排版。基本是用于块元素。进行大手笔的设计。

字体的单位是em，这比960有进步。其实里面许多样式都是属于重置范畴，只不过大把大把地运用em这个相对单位。

强制背景为白色，这点令我很不爽！

提供了几个好用的类。
: 基于表格的斑马线tr.even td {background:#e5ecf9;}灰蓝色。; 缩小.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}; 放大.large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}; 隐藏.hide {display:none;}; 恬静.quiet {color:#666;}近似薄纱的浅黑色。; 喧哗.loud {color:#000;}深黑色。; 高亮.highlight {background:#ff0;}不用说都是黄色（黄褪技术源远流长啊）！; 增加.added {background:#060;color:#fff;}草绿色，可以联想一下春天到来时万物复苏。; 移除.removed {background:#900;color:#fff;}砖红色，秋天的颜色，野火烧后的硬泥。; .first {margin-left:0;padding-left:0;}清除左边的空隙。; .last {margin-right:0;padding-right:0;}清除右边的空隙。; .top {margin-top:0;padding-top:0;}清除上边的空隙。; .bottom {margin-bottom:0;padding-bottom:0;}清除下边的空隙。

forms.css

组件（widget），多务于内联元素，对细节处进行精雕细琢。

对表单的文本域，按钮，下拉选择框，单选铵扭等元素进行设置。

还提供了三种样式：.error，.notice， .success，恰恰是flash的三种状态。

grid.css

网格，真正用于布局的东西

首先提供了个container类把所有东西都包起来，为950px。

从span-1到span-24，宽度依次递增40px，最小的span为30px，最大的span-24为950，都向左浮动，换言之，他们即是块元素也能并列放置。最大能把页面分割成24列。除了span-24，其他的都有右边界，为10px。

以上是全局范围，在文本域与多行文本框中，也一样分为24列。最小为18px(十八周岁，成年的年龄)，然后又40px往上加就是！与上面的.column类不同，它们左右都有空隙，边框为1px，内补丁为5px，即为12px。

还提供了23个后缀（append），让它的可见区往右边增加40*（2-x）px！23个前缀（prepend），从左边扩大可见区。24的pull，利用负边距技术，将目标整体往屏幕左边移动。功能相仿的24个push，移到右边，但保留原来移到的空间。

既然有column，便有gutter，可惜这是CSS3的。blueprint是统一把右边界，右边框与右补丁并成一条槽。

div.border {padding-right:4px;margin-right:5px;border-right:1px solid #eee;}
div.colborder {padding-right:24px;margin-right:25px;border-right:1px solid #eee;}

最后提供了一盒子类与两个经典清除浮动类。

ie.css

大量的hack，主要为IE5的怪异盒子模型擦屁股！

img { -ms-interpolation-mode: bicubic; }

IE7的私有属性-ms-interpolation-mode，用于解决缩放图片失真问题

其实IE的BUG挺多的，这个CSS也不全面，比起YUI差很多。如高度自适应问题（外围的div不能完全把里面的div框住），光一个height:1%显然是不够的。

.self_adaption { 
overflow:auto;/*非IE与IE7*/
 _height:1%;/*IE6*/
}

跨游览器的最小高度实现

.min_height{
 background:#ccc;
 min-height:100px; 
 height:auto !important; 
 height:100px; 
 overflow:visible;
}

在IE6下的最小宽度及最大宽度最好使用expression解决，例如： #id{_width:expression(document.body.clientWidth>1024?”700px”:”auto”);} li 元素中包含img 元素时，IE下img会多出5像素空白(现在发现，只要包含块级样式元素都出现这问题)。

解决方法一：使 li 浮动，并设置 img 为块级元素；
解决方法一：设置 ul 的 font-size:0；
解决方法一：设置 img 的 vertical-align: bottom；
解决方法一：设置 img 的 margin-bottom: -5px。

个人推荐方法三。

在表格中实现折行。

#table {
table-layout: fixed; /*相关资料*/
}
#table td{
word-break:break-all; /*相关资料*/
word-wrap: break-word;/*相关资料*/
}

一个在IE和Firefox都可以完美解决页面强制换行问题的解决方案，用到nowrap属性。

IE浮动边界BUG，也就是著名的双倍margin BUG。

出现条件:在一个容器中，如其内部的一系列容器以浮动形式排列，当我为这一浮动容器设置佐边距(margin-left)时，该死IE6竟然会将第一个浮动容器的左边距自动double(双倍)，真是匪夷所思。

解决方法:将浮动容器的display属性定为inline。

引51js.com超版aoao的一句话

我现在一般只要出现float 后面就一定跟display:inline;

在YUI会将虚线框outline设成none，说是影响美观。最近看了一篇《页面的易用性：为什么要去掉链接周围的虚线框？》，决定再也不做这种傻事了！

button.css

按钮

这里所说的铵钮可不是<input type=”button” value=”普通按钮”/>，<input type=”submit” value=”提交”/>，<input type=”reset” value=”重置”/>这三种由input元素生成的按钮，而是被遗忘了的button元素所生成的按钮。想实现上述三个的功能，只需要把button type设置成相应属性就成了！

为什么需要button元素呢？根据W3C的定义，button元素就是为了解决跨浏览器表现上的差异才应运而生。

Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to “image”, but the BUTTON element type allows content.

而且button元素在css的制定上远远比input人性化多了！

用法

	<button type="submit" class="button positive">
	  <img src="css/blueprint/plugins/buttons/icons/tick.png" alt=""/> Save
	</button>

	<a class="button" href="/password/reset/">
	  <img src="css/blueprint/plugins/buttons/icons/key.png" alt=""/> Change Password
	</a>

	<a href="#" class="button negative">
	  <img src="css/blueprint/plugins/buttons/icons/cross.png" alt=""/> Cancel
	</a>

link-icons.css

顾名思义，为链接提供icon

用了CSS2的属性选择符，一看IE6就没戏。如：

/* External links */
a[href^="http:"]          { background-image: url(icons/external.png); } /*href^="http:"指以"http:"开头*/
a[href^="mailto:"]        { background-image: url(icons/email.png); }
a[href^="http:"]:visited  { background-image: url(icons/visited.png); }

/* Files */
a[href$=".pdf"] { background-image: url(icons/pdf.png); }  /*href$="http:"指以".pdf"结尾。*/
a[href$=".doc"] { background-image: url(icons/doc.png); }  
a[href$=".xls"] { background-image: url(icons/xls.png); }  
 
/* Misc */
a[href$=".rss"], 
a[href$=".rdf"]  { background-image: url(icons/feed.png); }
a[href^="aim:"] { background-image: url(icons/im.png); }

顺便一提，这部分东西完全就抄Elements（另一个CSS框架）！

fancy_type.css

一些漂亮的字体段落设定。偶是中文，没戏！

rtl.css

从右到左的阅读风格！没用！

一些实践！

分栏（Columns）的实现

blueprint定义了.column , .span-x ,.last ，两者结合来实现分栏功能。其中：.column定义栏目的float属性；.span-x定义栏目宽度；.last将margin-right置为0px。

.column {
float: left;
margin-right: 10px;
padding: 0;
}
/* Use these classes to set how wide a column should be. */
.span-1   { width: 30px; }
.span-2   { width: 70px; }
.span-3   { width: 110px; }
.span-4   { width: 150px; }
...
.span-8   { width: 310px; }
.span-9   { width: 350px; }
.span-10  { width: 390px; }
...
.span-23  { width: 910px; }
.span-24  { width: 950px; margin: 0; }
.span-25  { width: 200px; }/*自定义的类，但违背原blueprint的计算公式*/
.span-26 { width: 1150px; margin: 0; }/*自定义的类，用于宽屏，显然950px实在太小气了一些！*/
/* The last element in a multi-column block needs this class. */
.last     { margin-right: 0; }

三栏的实现：1+16+4.last=24这种通过简单的计算就可以设计出分栏布局的思想是来自960的！

<divclass="container">
<divclass="column span-24">
Header
</div>
<divclass="column span-4">
Left sidebar
</div>
<divclass="column span-16">
Main content
</div>
<divclass="column span-4 last">
Right sidebar
</div>
</div>

四栏的实现：4+3+15+4.last=26

<div class="container">
<div class="column span-26">
Header
</div>
<div class="column span-4">
Left sidebar
</div>
<div class="column span-3 ">
Main content 0
</div>
<div class="column span-15">
Main content  1
</div>
<div class="column span-4 last">
Right sidebar
</div>
</div>

注意把.container中的width(定义了整个页面的width)修改为1150px

空白栏目的实现：

对于多栏目（例如5栏目），其中有空白栏目（例如左右两栏目为空白），可以使用.append-x和.prepend-x来填充。

其中.append-x在栏目后（padding-right）添加空白栏目，.prepend-x在栏目前（padding-left）添加空白栏目。

通用的容器定义

/* A container should group all your columns. */
.container {
text-align: left;
position: relative;
padding: 0;
margin: 0 auto;/* Centers layout */
width: 1150px;/* Total width */
}

另一个例子

<div class="container showgrid">
    <div class="span-24">
        头部页眉
    </div>
    <div class="span-4">
        左边侧栏
    </div>

    <div class="span-16">
        <div class="span-8">
            居中行1-1
        </div>
        <div class="span-4">
            居中行1-2
        </div>
        <div class="span-4 last">
            居中行1-3
        </div>
        <div class="span-16 last">
            正文内容
        </div>
    </div>

    <div class="span-4 last">
        右边侧栏
    </div>
    <div class="span-24">
        页脚
    </div>
</div>