2009年2月24日，Safari 4.0 beta版正式发布，Safari从它的3.2版本开始就已经支持所有的CSS选择器(包括最新的CSS3)。不过为了方便大家的工作，下面提供了最新版本的CSS选择器浏览器支持情况，其中包括最新的CSS3和Safari 4.0 Beta的支持情况。感谢Estelle Weyl的总结。

注:

• 绿色 / √  表示目前支持。
• 橙色/ Δ   表示浏览器部分支持当前CSS选择器。
• 红色/ Χ   表示浏览器完全不支持。

点击上图查看清晰大图

点击上图查看清晰大图

演示
声明：本教程只是将英文原版的翻译了过来。


第一步：将三个js文件和一个css文件包含在你要实现的页面中。
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="javascript/lightwindow.js"></script>
<link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" />

第二步：在超链接<a>(hyperlink)标签里，你可以改变如下属性。
params="lightwindow_width=516,lightwindow_height=530,lightwindow_show_images=2"

可选属性如下：
lightwindow_width              // 窗口的宽度
lightwindow_height             // 窗口的高度
lightwindow_show_images        // 在一个画廊里一次性要展示的图片的数量,默认是 1, 这很方便声明不管你是在设置前还是在设置后
lightwindow_top                // 设置窗口距顶部的整数距离
lightwindow_left               // 设置窗口距左边的整数距离
lightwindow_type               // 指定窗口要指定的数据类型, external, image, media, inline
lightwindow_loading_animation // Set to false to opt to not fade out the Loading Cover（缓冲条动画的相关设置）
lightwindow_iframe_embed       // 嵌入一个媒体到框架内，而不是嵌入到一个div标签内
lightwindow_form               // 表单的名字

要实例化任何一个窗口，仅仅是在超链接内加入一个"lightwindow"类，再为这个类做一再相关的设置
例如：<a href="http://www.foo.com/bar.jpg class="lightwindow">foo da bar</a>
即在foo da bar这个超链接内加入了一个lightwindow类，使得通过点击它可以调出一个lightwindow来显示那幅jpg图片。

不同的媒体类型：
Movie
<a href="http://images.apple.com/movies/newline/the_number_23/the_number_23-tlr1_h.640.mov" class="lightwindow" params="lightwindow_width=640,lightwindow_height=290" >链接名称</a>

SWF
<a href="gallery/header.swf?You-could-put-a-GET-string-here-for-your-flashvars" class="lightwindow" params="lightwindow_width=800,lightwindow_height=345" title="Preview: Doesn't your masthead look perdy?" >链接名称</a>

PDF
<a href="http://www.ready.gov/business/_downloads/sampleplan.pdf" class="lightwindow">Link Name</a>
如果要使该媒体类型得到正常显示，你的电脑里要装有pdf阅读器。或者你可以使用Flash Paper代替。


External (i.e. A Website)
该类型是一个扩展类型，窗口显示的是一个网页，所以在属性中我们又加入了title和caption用来说明该网页。
<a href="http://www.rubyonrails.com/" class="lightwindow" title="Ruby on Rails" caption="One of my favorites, and really it should be one of yours.">链接名称</a>


Images
画廊用到了一个rel标签，格式为：画廊名[类名]。图片在页面中显示的位置会依此来判断。

single image
<a href="images/image-5.jpg" class="lightwindow" title="What is this Plant?" author="Unknown" caption="Whatever it is, it is still a pretty cool picture. .">链接名称</a>

a gallery
<a href="gallery/0-sushi.jpg" class="lightwindow" rel="/\\:;*?<>'”|&#[Sushi]" title="Left Behind" caption="Look's super tasty!" author="Unknown">image #1</a>

<a href="gallery/1-sushi.jpg" class="lightwindow" rel="/\\:;*?<>'”|&#[Sushi]" title="Beware of warewolves..." caption="I shouldn't be doing this when I am hungry" author="Unknown">image #2</a>

<a href="gallery/2-sushi.jpg" class="lightwindow" rel="/\\:;*?<>'”|&#[Sushi]" title="That was good!" caption="Take that sushi!" author="Unknown">image #3</a>


下面是一个实例：
如果你只想实例化一个窗口，我们就可以使用函数createWindow(id)。
你可以使用作者创建的myLightWindow对象，当然你也可以使用你自己创建的对象。
代码如下：
<a href="http://stickmanlabs.com/images/kevin_vegas.jpg" id="sample-link">链接名称</a>
<script type="text/javascript">    
    myLightWindow.createWindow('sample-link');
</script>

创建生成一个窗口，使用javascript
在使用作者创建的myLightWindow对象下，你可以使用activateWindow函数
myLightWindow.activateWindow({
    href:'http://stickmanlabs.com/images/kevin_vegas.jpg',
    title:'Waiting for the show to start in Las Vegas',
    author:'Jazzmatt',
    caption:'Mmmmm Margaritas! And yes , this is me...',
    left: 300
});
你也可以设置更多的选项，如下：
href              //窗口链接的位置
title             //窗口的标题
author            //窗口的作者
caption           //窗口的说明文字
rel               //设置rel标签
top               //窗口的顶部位置
left              //窗口的左边位置
type              //窗口要展现的媒体类型
showImages        //图片的数量
height            //窗口的高度
width             //窗口的宽度
loadingAnimation //缓冲动画设置
iframeEmbed       //嵌入媒体到一个框架内而不是一个div内
form              //表单的名称


Local Page
这个页面会自适应内容的大小，除非你设置的窗口的大小不足够大或者你在属性里设置了不同的大小。
<a href="blank.html" class="lightwindow">链接名称</a>

Inline Content
正在加载的library将会寻找一个容器，隐藏它只是引用它的内容到新窗口。
<a href="#id-of-container" class="lightwindow" >链接名称</a>

Forms
表单有一些麻烦，我们需要先创建一个本地页面
<a href="blank.html" class="lightwindow" > 链接名称</a>
现在在那个表单页，提交按钮需要定义一个动作。

Submit form Button Sample
下面为你展示了如何表单创建一个提交按钮
<a href="hello.php" params="lightwindow_form=sample-form" class="lightwindow_action" rel="submitForm"><button>Submit</button></a>

Close Button Sample
下面为你展示了如何创建一个取消按钮。
<a href="#" class="lightwindow_action" rel="deactivate">Cancel</a>

Iframe Calls
Iframe calls非常通用，你所作的就是在函数调用之前加入以下代码：
<a href="http://www.stickmanlabs.com" class="lightwindow_iframe_link" ><strong>Open a LightWindow from an iframe!</strong></a>
<script type="text/javascript">     var links = $$('.lightwindow_iframe_link');     links.each(function(link) {         Event.observe(link, 'click', function() {parent.myLightWindow.activate(null, link);}, false);         link.onclick = function() {return false;};     });        
</script>


开始！Actions的学习
Configuration Options（设置选项）
下面是一些你可能设置的选项，以及它们可能的默认值如下：
//The resize speed 0-10
resizeSpeed : 8,
contentOffset: {
    height:20,
    width :20
},
//Default sizes for each type
dimensions :{
    image: {height:250, width:250},
    page : {height:250, width:250},
    inline:{height:250, width:250},
    media:{height:250, width:250},
    external:{height:250, width:250},
    titleHeight:25
},
//The class names to look for to create a LightWindow or an action
classNames:{
   standard : 'lightwindow',
   action: 'lightwindow_action'
},
//The file types resepctive to their actions
fileTypes:{
page : ['asp', 'aspx', 'cgi', 'htm', 'html', 'pl', 'php4', 'php3', 'php', 'php5', 'phtml', 'rhtml', 'shtml', 'txt', 'vbs', 'rb'],    
media : ['aif', 'aiff', 'asf', 'avi', 'divx', 'm1v', 'm2a', 'm2v', 'm3u', 'mid', 'midi', 'mov', 'moov', 'movie', 'mp2', 'mp3', 'mpa', 'mpa', 'mpe', 'mpeg', 'mpg', 'mpg', 'mpga', 'pps', 'qt', 'rm', 'ram', 'swf', 'viv', 'vivo', 'wav'],    
image : ['bmp', 'gif', 'jpg', 'png', 'tiff']
},
//Mime types for the file types
mimeTypes:{
avi:'video/avi',
aif:'audio/aiff',
aiff : 'audio/aiff',    
gif : 'image/gif',    
bmp : 'image/bmp',    
jpeg : 'image/jpeg',    
m1v : 'video/mpeg',    
m2a : 'audio/mpeg',    
m2v : 'video/mpeg',    
m3u : 'audio/x-mpequrl',    
mid : 'audio/x-midi',    
midi : 'audio/x-midi',    
mjpg : 'video/x-motion-jpeg',    
moov : 'video/quicktime',    
mov : 'video/quicktime',    
movie : 'video/x-sgi-movie',    
mp2 : 'audio/mpeg',    
mp3 : 'audio/mpeg3',    
mpa : 'audio/mpeg',    
mpa : 'video/mpeg',    
mpe : 'video/mpeg',    
mpeg : 'video/mpeg',    
mpg : 'audio/mpeg',    
mpg : 'video/mpeg',    
mpga : 'audio/mpeg',    
pdf : 'application/pdf',      
png : 'image/png',    
pps : 'application/mspowerpoint',    
qt : 'video/quicktime',    
ram : 'audio/x-pn-realaudio-plugin',    
rm : 'application/vnd.rn-realmedia',  

swf    : 'application/x-shockwave-flash',    
tiff : 'image/tiff',    
viv : 'video/vivo',    
vivo : 'video/vivo',  
wav : 'audio/wav',
wmv : 'video/x-ms-wmv'        
},
//ActiveX Classids for file types
classids:{
mov : 'clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B',    
swf : 'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000',    
wmv : 'clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6'
},
//The plugin sources for the file types
codebases:{
mov : 'http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0',    
swf : 'http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0',    
wmv : 'http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715'
},
// The default padding for the viewport when a window is to fit the browser
viewportPadding : 10,
// What files types should the EOLAS Fix be applied to
EOLASFix : 'swf,wmv,fla,flv',
// What are our overlay images and default opacity, the preset has to be prebuilt for firefox as we cannot use an opacity setting
overlay : {    
opacity : 0.7,    
image : 'images/black.png',    
presetImage : 'images/black-70.png'
},

解压后，把proxool-0.9.0RC2.jar放到工程的lib文件夹里面。
proxool是一个非常强大的连接池工具包，我觉得相比dbcp、c3p0这两个连接池包都要好用，我用loadrunner测试过，这三个连接池的从性能上排名如下：proxool>c3p0>dbcp，特别是dbcp在大并发的情况下总是出现各种异常。详细关于dbcp的介绍请参考dbcp用户指南，dbcp实现参考tvjody.javaeye.com/admin/show/117225。

下面是实现proxool的几种方式：

JDBC连接方法：

首先建一个proxool的配置文件proxool.xml

　　1、基本概念及原理

　　由上面的分析可以看出，问题的根源就在于对数据库连接资源的低效管理。我们知道，对于共享资源，有一个很著名的设计模式：资源池 (Resource Pool)。该模式正是为了解决资源的频繁分配?释放所造成的问题。为解决上述问题，可以采用数据库连接池技术。数据库连接池的基本思想就是为数据库连接建立一个“缓冲池”。预先在缓冲池中放入一定数量的连接，当需要建立数据库连接时，只需从“缓冲池”中取出一个，使用完毕之后再放回去。我们可以通过设定连接池最大连接数来防止系统无尽的与数据库连接。更为重要的是我们可以通过连接池的管理机制监视数据库的连接的数量?使用情况，为系统开发?测试及性能调整提供依据。

　　2、服务器自带的连接池

　　JDBC的API中没有提供连接池的方法。一些大型的WEB应用服务器如BEA的WebLogic和IBM的WebSphere等提供了连接池的机制，但是必须有其第三方的专用类方法支持连接池的用法。

　　连接池关键问题分析

　　1、并发问题

　　为了使连接管理服务具有最大的通用性，必须考虑多线程环境，即并发问题。这个问题相对比较好解决，因为Java语言自身提供了对并发管理的支持，使用synchronized关键字即可确保线程是同步的。使用方法为直接在类方法前面加上synchronized关键字，如：

　　public synchronized Connection getConnection()

　　2、多数据库服务器和多用户

　　对于大型的企业级应用，常常需要同时连接不同的数据库(如连接Oracle和Sybase)。如何连接不同的数据库呢?我们采用的策略是：设计一个符合单例模式的连接池管理类，在连接池管理类的唯一实例被创建时读取一个资源文件，其中资源文件中存放着多个数据库的url地址()?用户名()?密码()等信息。如 tx.url=172.21.15.123：5000/tx_it，tx.user=yang，tx.password=yang321。根据资源文件提供的信息，创建多个连接池类的实例，每一个实例都是一个特定数据库的连接池。连接池管理类实例为每个连接池实例取一个名字，通过不同的名字来管理不同的连接池。

　　对于同一个数据库有多个用户使用不同的名称和密码访问的情况，也可以通过资源文件处理，即在资源文件中设置多个具有相同url地址，但具有不同用户名和密码的数据库连接信息。

　　3、事务处理

　　我们知道，事务具有原子性，此时要求对数据库的操作符合“ALL-ALL-NOTHING”原则,即对于一组SQL语句要么全做，要么全不做。

　　在Java语言中，Connection类本身提供了对事务的支持，可以通过设置Connection的AutoCommit属性为 false,然后显式的调用commit或rollback方法来实现。但要高效的进行Connection复用，就必须提供相应的事务支持机制。可采用每一个事务独占一个连接来实现，这种方法可以大大降低事务管理的复杂性。

　　4、连接池的分配与释放

　　连接池的分配与释放，对系统的性能有很大的影响。合理的分配与释放，可以提高连接的复用度，从而降低建立新连接的开销，同时还可以加快用户的访问速度。

　　对于连接的管理可使用空闲池。即把已经创建但尚未分配出去的连接按创建时间存放到一个空闲池中。每当用户请求一个连接时，系统首先检查空闲池内有没有空闲连接。如果有就把建立时间最长(通过容器的顺序存放实现)的那个连接分配给他(实际是先做连接是否有效的判断，如果可用就分配给用户，如不可用就把这个连接从空闲池删掉，重新检测空闲池是否还有连接);如果没有则检查当前所开连接池是否达到连接池所允许的最大连接数(maxConn),如果没有达到，就新建一个连接，如果已经达到，就等待一定的时间(timeout)。如果在等待的时间内有连接被释放出来就可以把这个连接分配给等待的用户，如果等待时间超过预定时间timeout,则返回空值(null)。系统对已经分配出去正在使用的连接只做计数，当使用完后再返还给空闲池。对于空闲连接的状态，可开辟专门的线程定时检测，这样会花费一定的系统开销，但可以保证较快的响应速度。也可采取不开辟专门线程，只是在分配前检测的方法。

　　5、连接池的配置与维护

　　连接池中到底应该放置多少连接，才能使系统的性能最佳?系统可采取设置最小连接数(minConn)和最大连接数(maxConn)来控制连接池中的连接。最小连接数是系统启动时连接池所创建的连接数。如果创建过多，则系统启动就慢，但创建后系统的响应速度会很快;如果创建过少，则系统启动的很快，响应起来却慢。这样，可以在开发时，设置较小的最小连接数，开发起来会快，而在系统实际使用时设置较大的，因为这样对访问客户来说速度会快些。最大连接数是连接池中允许连接的最大数目，具体设置多少，要看系统的访问量，可通过反复测试，找到最佳点。

　　如何确保连接池中的最小连接数呢?有动态和静态两种策略。动态即每隔一定时间就对连接池进行检测，如果发现连接数量小于最小连接数，则补充相应数量的新连接,以保证连接池的正常运转。静态是发现空闲连接不够时再去检查。

　　连接池的实现

　　1、连接池模型

　　本文讨论的连接池包括一个连接池类(DBConnectionPool)和一个连接池管理类 (DBConnetionPoolManager)。连接池类是对某一数据库所有连接的“缓冲池”，主要实现以下功能：①从连接池获取或创建可用连接;② 使用完毕之后，把连接返还给连接池;③在系统关闭前，断开所有连接并释放连接占用的系统资源;④还能够处理无效连接(原来登记为可用的连接，由于某种原因不再可用，如超时，通讯问题)，并能够限制连接池中的连接总数不低于某个预定值和不超过某个预定值。

　　连接池管理类是连接池类的外覆类(wrapper),符合单例模式，即系统中只能有一个连接池管理类的实例。其主要用于对多个连接池对象的管理，具有以下功能：①装载并注册特定数据库的JDBC驱动程序;②根据属性文件给定的信息，创建连接池对象;③为方便管理多个连接池对象，为每一个连接池对象取一个名字，实现连接池名字与其实例之间的映射;④跟踪客户使用连接情况，以便需要是关闭连接释放资源。连接池管理类的引入主要是为了方便对多个连接池的使用和管理，如系统需要连接不同的数据库，或连接相同的数据库但由于安全性问题，需要不同的用户使用不同的名称和密码。

　　2、连接池实现

　　下面给出连接池类和连接池管理类的主要属性及所要实现的基本接口：

　　3、连接池使用

　　上面所实现的连接池在程序开发时如何应用到系统中呢?下面以Servlet为例说明连接池的使用。

　　Servlet的生命周期是：在开始建立servlet时，调用其初始化(init)方法。之后每个用户请求都导致一个调用前面建立的实例的service方法的线程。最后，当服务器决定卸载一个servlet时，它首先调用该servlet的destroy方法。

　　根据servlet的特点，我们可以在初始化函数中生成连接池管理类的唯一实例(其中包括创建一个或多个连接池)。如：

　　结束语

　　在使用JDBC进行与数据库有关的应用开发中，数据库连接的管理是一个难点。很多时候，连接的混乱管理所造成的系统资源开销过大成为制约大型企业级应用效率的瓶颈。对于众多用户访问的Web应用，采用数据库连接技术的系统在效率和稳定性上比采用传统的其他方式的系统要好很多。本文阐述了使用 JDBC访问数据库的技术?讨论了基于连接池技术的数据库连接管理的关键问题并给出了一个实现模型。文章所给出的是连接池管理程序的一种基本模式，为提高系统的整体性能，在此基础上还可以进行很多有意义的扩展。

A

1、介绍

blueprint是一个所谓的css framework，相比较而言blueprint 代码中的注释还是比较详细的。

按照Jeff Croft的Frameworks for Designers(或中文版本 理解Web框架，和如何构建一个CSS框架)描述的如何构建一个css framework的方法：

There are several possible ways to go about building a framework, but the most common and arguably the most useful is to abstract your common CSS into individual stylesheets that each cover a particular part of the whole. For example, you may have a stylesheet that sets up the typography and another that handles the mass reset. The beauty of the approach is the ability to selectively include only the styles that you need. You may end up with six or seven different stylesheets in your framework, but if a particular project doesn’t need one or two of them, they don’t have to be included. The framework we created in our office has five stylesheets:.

• reset.css—handles the mass reset.
• type.css—handles the typography.
• grid.css—handles the layout grid.
• widgets.css—handles widgets like tabs, drop-down menus, and “read more” buttons.
• base.css—includes all the other stylesheets, so that we only need to call base.css from our (X)HTML documents to use the entire framework.

blueprint的构建方式也与此类似：

分而治之：

buleprint在功能组织上，将诸如布局(layout)、排版(typography)、组件（widget）、重置（reset）、打印(print)等功能分散到不同的css文件中。这样方便使用者只需要导入自己所要使用的功能，不用导入全部文件，提高页面装载性能。目前在组件部分只提供了对button的处理，尚未做到麦肯锡的MECE（”相互独立，完全穷尽”）的道。

统一接口：

尽管功能分散到多个css文件，但是导入时候，仍然只需要包含同样的文件screen.css文件，具体的导入细节在screen.css中再处理，统一了对外接口。

<link rel=”stylesheet” href=”css/blueprint/screen.css” type=”text/css” media=”screen, projection” />

blueprint 所包含的css文件说明：

• screen.css
  This is the main file of the framework. It imports other CSS
  files from the “lib” directory, and should be included on
  every page.

类似于Jeff Croft的base.css功能，只需要包含此文件，就可以导入

• print.css
  This file sets some default print rules, so that printed versions
  of your site looks better than they usually would. It should be
  included on every page.

用于处理打印，可以归类为widget。

• lib/grid.css
  This file sets up the grid (it’s true). It has a lot of classes
  you apply to divs to set up any sort of column-based grid.

用于处理页面的布局（栏目）

• lib/typography.css
  This file sets some default typography. It also has a few
  methods for some really fancy stuff to do with your text.

用于处理页面元素的排版。

• lib/reset.css
  This file resets CSS values that browsers tend to set for you.

用于重置页面，对没有指定css属性的页面元素指定缺省值。

• lib/buttons.css
  Provides some great CSS-only buttons.

用于处理按钮,可以归类为widget

• lib/compressed.css
  A compressed version of the core files. Use this on every live site.
  See screen.css for instructions

提供压缩过的（包含grid.css,tyopgraphy.css,reset.css,buttons.css）的css文件。

2、各模块用法研究

2.1、grid.css研究

• 对跨浏览器居中处理的兼容性处理

一般而言，要处理firefox、ie在处理居中时候的不同，采用如下方式：

body
{
text-align: center;
}
div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
text-align: left;
}

摘自：http://www.maxdesign.com.au/presentation/center/

blueprint的处理方式：

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

• 分栏（Columns）的实现

blueprint的处理方式：

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; }
.span-26 { width: 1150px; margin: 0; }
/* The last element in a multi-column block needs this class. */
.last     { margin-right: 0; }

三栏的实现：

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

     四栏的实现：

<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-25">
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 */
}

2.2、reset.css研究

reset.css的最初代码应该来自于Eric Meyer,Eric Meyer有两篇关于reset的日志，用于处理跨浏览器缺省值不同的问题。Eric Meyer的文档写得很精彩：

Reset Reasoning：http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/

Reset Reloaded：http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

• 为何要reset

The basic reason is that all browsers have presentation defaults, but no browsers have the same defaults. (Okay, no two browser families—most Gecko-based browsers do have the same defaults.)
For example, some browsers indent unordered and ordered lists with left margins, whereas others use left padding. In past years, we tackled these inconsistencies on a case-by-case basis;

• 为何使用reset style，而不是universal selector

所谓universal selector 就是使用* 来代表document所有的元素，例如

* {
margin: 0;
padding 0;
}

• 关于reset style话题的一些资源：

YUI的reset库：http://developer.yahoo.com/yui/reset/

http://leftjustified.net/journal/2004/10/19/global-ws-reset/

以下几篇实际上是讨论css framework或tips的文章，只不过都提到了reset话题。

http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/

http://www.christianmontoya.com/2007/02/01/css-techniques-i-use-all-the-time/

http://businesslogs.com/design_and_usability/my_5_css_tips.php

http://www.pingmag.jp/2006/05/18/5-steps-to-css-heaven/

2.3、typography.css研究

typography.css用于确定页面元素缺省的排版格式（baseline）：

Setting Type on the Web to a Baseline Grid：

http://alistapart.com/articles/settingtypeontheweb

2.4、buttons.css研究

Rediscovering the Button Element 讨论了用button元素来替代input元素的种种好处，button元素是提供了较为丰富的功能。

http://particletree.com/features/rediscovering-the-button-element

2.4、print.css研究

Eric Meyer有一篇关于css实现print功能的文章，可以作为理解print.css的参考。

CSS Design: Going to Print

Print Different

2.5、compressed.css

compressed.css是对blueprint几个文件压缩合成包，同时也对css文件进行了压缩，去除了无用的空格、换行、注释等文本。

此种方式用于在上生产系统部署时候使用，避免在页面导入多个css文件，同时也有利于提高页面性能。

按照lib/screen.css中的说明，应该使用了teenage提供的css压缩服务：

http://teenage.cz/acidofil/tools/cssformat.php

另外类似的提供对css、javascript进行优化、压缩的服务还有：

http://csstidy.sourceforge.net/ （开源）

http://www.cssdrive.com/index.php/main/csscompressor/

http://www.cleancss.com/ （基于csstidy）

3、使用例子

4、参考文档

http://code.google.com/p/blueprintcss/wiki/Tutorial

5、相关项目

blueprint-generator: http://code.google.com/p/blueprintcss/wiki/Tutorial

5、相关项目

blueprint-generator: http://monc.se/tripoli/

Technorati 标签: css framework , blueprint , css 框架 , css compressor , csstidy