检视了一下CSS 2.1文档,Normal Flow,指正常文档流,在W3官方的CSS  2.1文档中并没有直观的表述,而是阐述了它与元素上下文环境的关系:

Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block boxes participate in a block formatting context. Inline boxes participate in an inline formatting context.

正常文档流中的盒模型属于格式化过的块元素上下文环境或者是行内元素上下文环境,块元素处于块元素上下文环境中,而行内元素则处于行内元素上下文环境中.

对于块元素关系环境,W3在CSS 2.1文档中的解释比较模糊:

Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts.

浮动元素,使用绝对定位的元素(position属性值为absolute或fixed),另外display属性值为inline-block,table,table-cell,table-caption以及overflow属性值为auto,scroll,hidden的元素可以产生一个新的块元素上下文环境.

而在Mozilla Dveloper Center中有更详细的解释:

A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.

A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.

Block formatting contexts are important for the positioning and clearing of floats. The rules for positioning and clearing of floats apply only to things within the same block formatting context. Floats do not affect the layout of things in other block formatting contexts, and clear only clears past floats in the same block formatting context.

所谓的块元素上下文环境是网页样式渲染机制的一部分,它限定了块元素布局区域以及浮动元素相互影响的范围.

现象:正常文档流与元素定位

根据官方文档对于绝对定位,相对定位的解释以及例子,先对使用绝对定位以及相对定位元素与正常文档流的关系做出一个参考性结论.查看例子Example1;从左到右为Example1_N0-Example1_N6.

父级顶层容器(OUTER)通用样式

float:left;margin-right:20px;width:200px;line-height:25px;

父级次层容器(SUB_OUTER)通用样式

background:#eee url(line_mark_1.gif) scroll repeat-x 0 100%;

使用定位方法进行布局的子元素(INNER)样式见页面顶部黑色块状内内容.

Example1_N0为正常文档流,顶部绿色标记线与底部绿色标记线距离为500px;

Example1_N1中INNER使用相对定位,非块状,定位元素原空间空白占位显示,顶部绿色标记线与底部绿色标记线距离为500px;

Example1_N2中INNER使用相对行为,块状显示,定位元素原空间空白占位显示,占位空间为块状化后尺寸,顶部绿色标记线与底部绿色标记线距离为500+2(horiziontal border width)px

Example1_N3中INNER为相对定位,块状显示,高度减少25px,定位元素为块状化后并以最终计算高度以空白空间方式占位,顶部绿色标记线与底部绿色标记线距离为(500-25)+2px;

Example1_N4中INNER为绝对定位,绝对定位元素以块状显示,高度减少25px,定位元素无空白占位空间,顶部绿色标记线与底部绿色标记线之间的距离为500-50px;

Example1_N5中INNER为相对定位,以块状显示,高度减少25px;宽度增加为210px;定位元素为块状化后并以最终计算高度以空白空间方式占位,顶部绿色标记线与底部绿色标记线距离为(500-25)+2px;OUTER与SUB_OUTER可见宽度及内容宽度无变化(与overflow:visibile相关).

Example1_N6中INNER为绝对行为,绝对定位元素以块状显示,高度减少25px;宽度增加为210px;定位元素为块状化后并以最终计算高度以空白空间方式占位,顶部绿色标记线与底部绿色标记线距离为500-50px;OUTER与SUB_OUTER可见宽度及内容宽度无变化(与overflow:visible相关).

根据Example可以得出绝对定位和相对定位元素同正常文档流之间的关系的参考性结论,对于使用相对定位的元素,并未脱离正常文档流,而是相对正常文档流进行了偏移,偏移量受top/bottom,left/right值所限,同时并以元素最终计算尺寸以空白形式占位正常文档流.对于使用绝对定位的元素,从正常文档流中脱离,不占有正常文档流空间.另外还可以得出结论,在默认元素样式属性overflow的值为默认的visible(body的默认值为auto;)的情况下,不对其父及容器产生影响.

现象:正常文档流与块元素上下文环境

从Example1中我们得出使用绝对定位以及相对对元素进行定位后与正常文档流之间的关系,Example2对正常文档流与块元素上下文环境进行简要分析,得出参考性结论.查看例子Example2,从下之下为Example2_N0(_1-6)-Example2_N7.

红色为父级顶层容器(OUTER),通用样式如下:

width:400px;height:400px;background:#f00 url(ruler.gif) no-repeat scroll 0 300px;

绿色为父级次层容器(SUB_OUTER),通用样式如下:

width:500px;height:300px;background:#0f0 url(ruler.gif) no-repeat scroll 0 200px;

蓝色为使用绝对定位的子容器(INNER),通用样式如下:

width:800px;height:200px;background:#00f url(ruler.gif) no-repeat scroll 0 0;

样式差异见表格Example2_N*中的Property列.

Example2_N0,OUTER,SUB_OUTER,INNER存在于由BODY生成的默认块元素上下文环境中,主要作用为对照.在Firefox 2.0(Above),Opera 9(10)中OUTER的scrollWidth,clientWidth均为400px,SUB_OUTER的scrollWidth,clientWidth均为500px,Internet Explorer 6(7),Chrome 2,Safari 4 将OUTER,SUBOUTER的有效内容宽度scrollHeight增加到800px,也就是等于INNER的宽度,而在Internet Explorer 6 中,OUTER,SUB_OUTER的可视宽度clientWidth增加到800px,所以在Internet Explorer 6下OUTER,SUB_OUTER的实际显示的宽度为800px,这应该是Internet Explorer 6一直存在的一个解释上的Bug.

Example2_N1中,由于对SUB_OUTER使用相对定位,会在OUTER的空间中保留占位空间,相当于在OUTER中保留一个样式属性position值为static的SUB_OUTER,所有浏览器都以各自的正常情况显示.从这个例子来看,BODY为原始的块元素上下文环境,而INNER为元素级别的第一个块元素上下文环境,它的作用是将其所包含的子元素与INNTER所在的外部上下文环境所隔离,在本例中无实际作用.

Example2_N2中将SUB_OUTER样式属性overflow设置为auto;可以看到SUB_OUTER出现滚动条,由于SUB_OUTER此时的可视宽度clientWidth为500px,而INNER的scrollWidth有效内容宽度为800px,滚动条可拖动范围为(800-500)px.其他现象同Example2_N1.Example2_N3将SUB_OUTER样式属性overflow设置为hidden,各元素width值与Example2_N2相同,INNER超出SUB_OUTER的宽度被隐藏,值得注意的是,在Example2_N2中,Internet Explorer6(7)滚动条拖动时拖动对象还包含SUB_OUTER自身,而不只是对其包含的子元素,也就是INNER进行拖动.

Example2_N2以及Example2_N3共同点在于样式属性overflow的值均不等于visible.因此SUB_OUTER新建了一个块元素上下文环境,其所包含的子元素INNER便与SUB_OUTER的外部上下文环境相隔离,而此时SUB_OUTER的有效宽度scrollWidth等于INNER的有效宽度,为800px.

在Example2_N4中,将OUTER的样式属性overflow设置为auto,在Example2_N5中将OUTER的样式属性overflow设置为hidden,同理,此时OUTER将会新建一个块元素上下文环境,在Firefox 2.0(Above),Opera 9(10),Chrome 2,Safari 4 中 OUTER的有效内容宽度scrollWidth值为800px,等于INNER的宽度,在Example2_N4中,滚动条的可拖动范围为(800-400)px,包含SUB_OUTER(500-400)px.不过在Internet Explorer 6(7)下OUTER的有效内容宽度scrollWidth值为500px,可视宽度clientWidth的值变为400px,滚动条可拖动范围为(500-400)px,拖动对象为OUTER自身.

Example2_N6与Example2_N4,Example2_N7与Example_N5的区别相同,在OUTER添加了样式属性position,值为relative,而此时Internet Explorer做出与其他浏览器相同的解释,不过对于Example2_N6,Internet Explorer保留了与Example2_N2以及Example2_N4的相同现象,滚动条拖动对象包含自身.

从Example2中我们可以得出一个临时参考性结论,Firefox,Opera,Chrome,Safari当新的块元素上下文环境产生时,可以直接影响其包含的所有子元素,而Internet Explorer则受正常文档流的限制要多.

(未完)

原文:http://lifesinger.org/blog/?p=909

个人认为,em,strong的原始意义为在某个句子,段落或者整篇文章中强调某个单词或某个句子的重要性,按照西方的习惯和大部分字体设计,font-style为normal,italic,bold.分别正常字体,斜体和粗体,是递进性的语气.

那么建立在上面的理解基础之上,讨论em,strong的使用上的区别并没有太多的意义,因为限定了使用的环境为句子,段落和整篇文章.

其实大部分情况下,使用em,strong也只是为了减少class,id选择器的使用,如果只是单纯的为了页面高亮(highlight)之用,em不再是斜体,而strong也不再是粗体,既然这样,外观(appearance)就是样式表所控制的,em,strong和span的使用也再无任何语义上的区别.

另外,斜体在中文排版中是不适用的,中文的斜体很大程度上降低了可辨识性.

dl,dt,dd,作为定义列表和其他标签的区别:

1. 用作解释和诠释.也就是说dt和dd是语义上有等级层次之分,但是dt中的文本内容从结构上并不能够直接包含dd中的文本内容.借用w3schools的例子,对咖啡的解释就是如此,原文解释咖啡为热的黑色饮料.

黑色的表示颜色,热,饮料表示温度和状态,但热的黑色的饮料不一定就是咖啡.

2. 专业术语或者比较笼统,需要拆分解释的.例如Adobe的Adobe cs4产品页面中用到的定义列表用于解释新功能.例如对Fireworks4的新功能概括为 “使用 Adobe Fireworks CS4 制作 Web 原型和编辑图像”.那么有必要进行拆分解释.链接如下:

http://www.adobe.com/cn/products/creativesuite/mastercollection/features/

3. dl是列表,也就是集合性质的,考虑到样本容量,在多个定义存在的情况下才有必要使用,如果只是单个样本存在,是否可以考虑使用如下结构:

div-title-description,也就是div-h2,h3,h4-p,ul,div…

4. 如果dt和dd如果直接存在意义上的包含,可以考虑使用div-title-description结构,也就是div-h2,h3,h4-p,ul,div…

5. e.g. 淘宝的商品信息描述,如果单纯考虑到页面结构,页面可以用到定义列表,拆分为主的,而非完全解释性的.对一件商品进行描述.如一件衣服:

<dl/>

<dt/>销售信息可以分为:<dd/>-<ul/>-<li/>价格,运费,剩余时间…

<dt/>产品信息可以分为:<dd/>-<ul/>-<li/>尺码,大小,颜色…

毕竟只是个假设,可以看到现在商品信息页的结构并没有这么简单.

针对样式表置入方式不同,也有不同的使用方法.

使用链接方式的,可以设置media属性的值:

<link rel="stylesheet" media="screen" href="screen.css" type="text/css">

使用导入方法的,可以使用下面的方法:

@import url(screen.css) screen;

使用置入页面style标签中的以及使用链接或导入方式而将media属性设置为all的,可以在规则代码中这样设置:

@media screen {};

最近写CSS时特别针对Handheld Media Type设置了一下,自己测试了几款移动浏览器,包括Pocket Internet Explorer 7,Opera Mobile 8.65,Opera Mini 4,还有Mozilla的Minimo 0.2对Media Types设置的处理都有所不同.HtmlDog曾经提供过一个测试页面检测浏览器对screen和handheld Media Type设置的处理方式.链接:http://htmldog.com/test/handheld.html

Opera开发社区也提供了一个测试包,包含Media Queries的测试,下载地址:code_storey_operamini4.zip

对于CSS Queries的支持程度还有其他一些比较详细的信息可以在这篇文章中了解到,文章里面浏览器分析部分译文.

Opera Mobile

对CSS有相当高的支持度;
能够识别handheld,但是你不能将handheld混合在声明为all规则中;
支持Media Queries;
对没有设置Media Type为handheld的页面,默认识别为screen,不过页面会被重新格式化以适应屏幕显示,实际上只有一小部分的样式被应用;
用户可以设置某些选项以禁用重新格式化功能,取而代之的是使用和桌面浏览器版本相同的方式进行渲染;
在高分辨率的设备上不会以handheld样式现实,但是仍然会受限于Media Queries的设置;
可以被识别为手持设备浏览器.

Opera Mini

主要运行在小屏幕和低性能的手持设备中;
安装高性能设备中的Opera Mini 4高度支持CSS;
能够识别handheld,但是你不能将handheld混合在声明为all规则中;
支持Media Queries;
对没有设置Media Type为handheld的页面,默认识别为screen;
对于高性能设备上的Opera Mini 4,完全体会不到利用鼠标操作桌面版本的快感,文本被折叠起来以适应屏幕尺寸;
无论是在低于Opera Mini 3的版本中,或是高端以及低端设备中的Opera Mini 4,设置某些选项后,页面会被重新格式化以适应屏幕显示;
可以被识别为手持设备浏览器.

NetFront/Blazer

对CSS的支持不够好;
默认识别为screen,忽略Media Types设置,页面会被重新格式化以适应屏幕显示;
某些特殊版本只识别为handheld,如果你没有设置handheld样式,页面会以无样式显示;
@media实现不完全,经常会无视Media Types而出现错误的应用;
用户可以自定义是否对页面进行重新格式化,页面可以与桌面浏览器版本相同的渲染方式进行显示;
会被识别为桌面浏览器.

Pocket Internet Explorer

对CSS支持差;
同时以screen和handheld样式显示,页面会被重新格式化以适应屏幕显示,只有相当少的样式会被应用到页面;
支持设置media属性的方法,但不支持@media和@import方法;
某些时候支持@media方法,但是并不可靠,大部分页面仍然不会正常显示,如果使用Media Queries,样式内容可能被忽略;
用户可以自定义是否对页面进行重新格式化,页面可以与桌面浏览器版本相同的渲染方式进行显示;
可以被识别为手持设备浏览器,你可以使用CSS覆盖(重载)的方法使用handheld样式覆盖screen样式.

Series 60 Browser and Safari on iPhone

基于Safari engine,因此对CSS有相当高的支持度;
会被识别的screen,忽略Media Types设置;
某些更新版本支持Media Queries;
会被识别为桌面浏览器.

Minimo

基于Gecko引擎,对CSS有相当高的支持度;
默认识别为screen,忽略Media Types设置,页面会被重新格式化以适应屏幕显示;
用户可以自定义是否对页面进行重新格式化,页面可以与桌面浏览器版本相同的渲染方式进行显示;
会被识别为桌面浏览器.

由于Opera Mini并不是采用直连服务器的方式,而是在Opera的代理服务器(Opera Mini Server)对所访问的网页进行转化压缩后才显示在屏幕上,所以它的特征显得比Opera Mobile要特殊一些,要详细了解可以看一下Opera在开发社区的这篇文章.

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. Instead of throwing away what works today, microformats intend to solve simpler problems first by adapting to current behaviors and usage patterns.

微格式将人类作为首要的考虑因素,然后才是考虑的数据的机读性,它是建立在已经被广泛使用的标准之上的一套简单开放的数据格式.我们不需要抛开我们的工作习惯,因为微格式提供符合当前我们行为和习惯模式的简便方法去解决问题.

从上面的话中,我们可以分析出微格式是一种”数据格式”,它的存在是为了在兼顾机器和人类的条件下用最简单的方法去解决存储和表达数据的方法.然后从下面的一副图中,我们可以看到微格式的架构方式和表现形式,这幅图也是出自现在官方的解释页面.

从上面的图中,可以看到XML,XHTML,微格式的相互关系.XHTML是XML的一种衍生和补充,XHTML的基础是XML.XML是一种数据存储方法,而XHTML更偏向于结构的直观表现,XHTML的产生弥补了XML的不直观的特点,降低了终端用户使用XML的困难程度,但是也从一定程度上忽略了XML存储数据的特征.举一个简单的例子,如果将一本书的信息用XML表现,或许可以这样写:

<books>
<book>
<title>Books’s name</title>
<author>Book’s author</author>
</book>
……
</books>

如果我们直接使用(X)HTML表现:

<ul>
<li>
<span>Book’s name</span>
<span>Book’s author</span>
</li>
……
</ul>

排除故意极端简化XHTML代码,可以看到,XHTML只是呈现给人类看的,我们可以理解,这是一本书,书名是什么,作者是什么.但是反应给机器的只是一段代码,没有任何含义的代码.如果我们这样写这段代码

<ul class=”books”>
<li class=”book”>
<span class=”title”>Books’s name</span>
<span class=”author”>Book’s author</span>
</li>
……
</ul>

当然,上面的这段代码只是举例之用,不是微格式规范.排除使用DOM方法分析代码中的钩子(hook),机器也不可能从其中读取什么有效信息,但是至少这样有一种方法可以让机器读取代码中所反应的数据.对于class是否滥用可以看一下这篇文章的解释.而微格式的产生正是弥补了XHTML在数据存储上的弱点,可以说增强了XHTML的数据的机读性,或许我们也可以说增强了标签的语义表现.

到此为止了?微格式做的只是如此?当然不是.分析来看,第二段代码和第三段代码对终端用户看来并没有什么差别,在屏幕的表现是一样的.这样增强机读性,增强语义化产生不了任何作用,只是白白在代码中平添了几个字节,或许更有理由让人说我们这是在滥用class,我们继续,首先看看用微格式增强机读性后用来做什么.

Yahoo是微格式的大力提倡者.Flickr一个图片分享平台,用vcard微格式处理用户信息数据,通过应用软件直接获取页面上的用户信息数据后,将这些数据导出或者直接导入到其他的应用程序中,例如使用Firefox的operator插件可以分析和到处数据,然后根据提取的geo,location等地理信息在Google Map,Yahoo Map中定位用户,伴随着相关应用软件的开发,vcard数据可不只是能用作这些.再来看看Yahoo的对微格式的另外一个应用upcoming,是一个日历的事件管理应用,在获取页面的hcalendar微格式数据之后,它可以将数据导出或者直接导入到其他的web日历事件管理软件中.

Dopplr提供的或许更加让微格式的应用方向更加清晰.它提供的服务是将你的行踪与你的联系列表关联起来,方便你的朋友关注你的行踪,及时的为你提供帮助,主要方式为常规的RSS订阅和iCal订阅.你在网上的某些页面的hcard,hcalendar微格式数据可以导入到Dopplr中,然后可以将这些数据导入到支持Dopplr的微格式数据的程序中,当前主要为Mac机的iCal和支持多个系统平台兼容iCal数据格式的Mozilla产品Sunbird.

说到这里,使用微格式不只是web代码语义化那么简单.如何应用微格式是最重要的.对于微格式如何被解析,可以看看Brian Suda的一篇文章Parsing Microformats,或许有所帮助.到Brian Suda的个人网站上也可以找到更多有趣的东西.

网格的存在在字体设计中是因为要求字体具有良好的辨识性,而在传统的平面设计和排版行业中,除去作为信息载体的可读性的特征,网格系统的使用有助于生产效率的提升.而网页作为承载信息的新媒体,是传统媒体在屏幕上的表现形式,网格系统的使用同样能提升可读性和效率.而负责表现形式的表现层主要是由层叠样式表(CSS)来控制的.

网页网格系统组成元素(翻译自Web Standards Creativity一书)

宏观元素(Macro elements)表现:宏观元素主要负责网页结构(Structure)表现.主要包含内容分栏(Columns),网站头部(Master head),主导航(Main navigation)和网站底部(Footer).

微观元素(Micro elements)表现:微观元素主要为结构内部的填充元素表现.主要为侧栏元素(Sidebar elements),状态栏(Status boxes),标题(Headings),列表(Lists),表格(Tables),链接(Links),段落(Paragraphs),图片(Images)等.

网页网格系统的实现要点

由于网页主要显示载体为屏幕,不像传统的纸张一样具有固定的画布(canvas)尺寸,整个页面的比例(ratios)要求考虑到元素的度量,如画布,字体,图片,边距以及其他空白的单位设置.另外还需要考虑到网格系统的重用性(reusable),扩展性(flexible),兼容性(compatible)等要点.
[未完待续,详细看一下当前存在的几种网格布局(YUI Grid,Blueprint,YAML,960 Grid)的实现再写.]

文档名称:MicroFormats Cheat Sheet
作者:Brian Suda
文档语言:英语
版本号:r14
文档地址:http://suda.co.uk/projects/microformats/cheatsheet/
文档更新订阅:http://suda.co.uk/projects/microformats/cheatsheet/changelog.xml

文档名称:微格式快速参考表
作者:Soda
文档语言:简体中文
版本号:r14
文档地址:http://files.cheshirecat.cn/microformats.cheatsheet-zhCN.pdf
文档打印详细:PDF格式,生成程序illustrator CS3,CMYK四色,适合打印.纸张大小为A4

微格式的官方网站是这样描述微格式的产生和应用的:

微格式将人类作为首要的考虑因素,然后才是考虑的数据的机读性,它是建立在已经被广泛使用的标准之上的一套简单开放的数据格式.

因为微格式是建立在广泛采用的标准之上的,这就意味着发布者只需要为原始网页上的HTML标签添加一些额外的语义化的代码就可以了.微格式赋予了HTML元素超越其本身语意的含义,这是一个粉碎,混合以及聚合的过程.举个例子,通过在网页上为一个即将发生的事件添加一些语义化的标记,例如事件发生时间这些属性就会被类似个人事件管理器的这类服务或者软件所抓取.

微格式所涉及的全部是页面上的语义化信息的表现,它将信息以一种非直观的方法表达出来.将这种将语义化的信息直接放入到HTML代码中的方法并不是一个新鲜事物,在web产业化时期,人们就将这个概念讨论了不止十年,但是,直到在许多志愿者不断的发布文档,提供支持,编撰代码库和开发一系列工具之后,微格式才真正展现在我们眼前.

在本篇文章中,我只是就微格式自身的简单应用进行阐述,难度也就仅限于为一个HTML元素添加一个Class属性的程度.相信我,体会微格式的益处不过是轻而易举.

贯穿全文的两个案例都是最平常不过的,接下来我们看一下如何对人和事件信息进行微格式处理.

另辟蹊径

借用微格式官方网站的一个比喻,微格式在尝试铺设小路.你无时无刻都可以看到各种各种的小路,在图书馆附近,公园里和大学周围.人们总是习惯在原来的路上铺设出属于自己的捷径,然后日复一日,这些路就越来越明显.强制人们遵守约定俗成的方法倒不如另辟蹊径.

微格式尊重人们的选择,使用不断积累的各式各样方法去扩展那些已经发布的信息.微格式成功之处正是在此,它不强制人们去改变它们的习惯,要想修改你发布的信息,你只需要稍微修改一下HTML代码就完成了.

使用微格式处理用户信息

网上存在多少份用户信息?几乎在每个你所注册的站点上都会存在一个包含姓名,昵称,email,URL和其他联系信息的个人页面.使用微格式,我们可以让信息更加有用.你可以想象一下,你不用使用复制粘贴这种费时费力的方法,只需要使用导入就可以将你的用户信息导入到其他的应用程序之中,节约了你每次注册时都要填写重复信息的时间,而你的朋友只需要轻轻点击一下就能将你添加到他们的联系列表之中并且会随你信息的变化而更新联系列表.

hCard就是为了适应这种需求而产生的一种微格式,它是基于已经被广泛使用的vCard之上.你可能不会知道,当时使用你的移动电话进行联系人信息处理时,可能到现在为止你使用vCard对你的地址本进行导入导出操作已经十年了.当然,你就没有必要再去发明轮子,hCard的好处正是在这里,只需要一点必要的帮助能够读取vCard的程序也能轻松读取hCard信息.

hCard主要用来标记人,地点和组织信息.hCard必选的属性只是name一项,其他属性都是可选的.这里提醒一下,由于微格式的原则之一是不对已经发布的信息进行任何多余的修改,也就是说如果你在发布信息时,如果你没有设置电话,email和地址信息,hCard并不会强制你进行添加.

现在看下面这个简单的例子,这是一个很常见的朋友同事信息列表:

<li>
<a href=”http://suda.co.uk”>Brian Suda</a>
</li>

首先我们要做的就是在HTML中添加一个值为vcard的类(Class),这样数据就被封装在这个类中.

<li class=”vcard”>
<a href=”http://suda.co.uk”>Brian Suda</a>
</li>

vcard是一个容器,这样列表项(li)元素中的数据就被当作vCard类型数据.

可能现在有人会说,类(class)只是使用在CSS中的,你这不是滥用么?或许不是,根据HTML4规范,class属性只是浏览器的一个常规属性,而微格式只是可以接受class属性的使用而已,这里的class属性并没有真正应用CSS.接下来,我们为这个例子中的列表项(li)元素添加name属性:

<li class=”vcard”>
<a href=”http://suda.co.uk” class=”fn”>Brian Suda</a>
</li>

我们在这里为”a”元素添加了一个值为”fn”的class属性,”fn”相当于vCard值”FN”,它是”Formatted Name”的缩写,在大部分应用是是被用来显示名称的.在这里我们还可以添加其他的语义化属性值,我们刚才只是设置了”name”,但是这里还存在一个链接,于是我们还可以为”a”元素的class属性添加一个”url”的值.

<li class=”vcard”>
<a href=”http://suda.co.uk” class=”url fn”>Brian Suda</a>
</li>

你可能会有疑问,一个class属性可以有多个值么?答案当然是肯定的.class属性具有相当强的扩展性,你可以添加其他你想添加的值,只需要以空格进行分割就可以,这些值可以包含CSS类名称.对于HTML和微格式这都是有效的.

轻而易举,如此几下我们就使用hCard对一个列表进行了微格式处理.当任何能识别微格式的软件打开我们的网页时,它很容易就获取这些姓名和相关链接的信息.

更多hCard的信息你可以在微格式的官方站点上找到,站点上描述了几乎全部你可能会为一个人或者是地点,组织添加的信息,包含地址,电话号码email,网站和组织角色.作为一个信息发布人员,你可以自己去手动去添加,当然你也可是使用一些有用的插件去创建它们.它们算起来并不多,并且都富有一定的含义,所以理解起来很容易,这个列表可能会对你有所帮助.

使用微格式处理事件信息

当然信息不只是涉及到人和地点,常见的还有在线发布的提醒事件.人们发布着各种各样与时间相关的信息以方便记忆,为了给这些数据富有语意,志愿者们创建了hCalendar微格式.像hCard一样,hCalendar是建立在已经被广泛应用的iCalendar之上的.下面我们以常见的blog文章格式为例.

<p>
Hey everyone,
next week is my birthday party,
we should all meet up at my house for pizza.
</p>

你不用思考就可以看出在上面内容中所反应出来的信息,人类是聪明的,通过逐行的阅读,我们可以清楚上面事件的细节内容,例如事件发生的时间和地点.而我们的电脑,在这方面,可以说是愚蠢的.它们不会认为这是一个事件,而是只把它们当作一个文本段落,不过在添加hCalendar之后,它们就可以正确的获取这些重要的信息.接下来我们看如何为上面的文字段添加hCalendar标记:

<p class=”vevent”>
Hey everyone,
next week is my birthday party,
we should all meet up at my house for pizza.
</p>

第一步为p元素添加一个值为vevent的class属性,分析器将会认为包含在p元素中的数据都涉及一个事件.在上一个例子中,我使用的是li元素,微格式不会强制要求使用指定的HTML元素,但是附加语意能否正确应用取决与你所选择的元素.接下来我们为这个事件添加一个摘要(summary).

<p class=”vevent”>
Hey everyone,
next week is my
<span class=”summary”>birthday party</span>,
we should all meet-up at my house for pizza.
</p>

通过将”birthday party”封装在一个添加了值为”summary”的class属性的span元素中,我们可以说这个就是整个事件的摘要.我们使用相同的方法为此事件处理地点信息,只需要将地点信息封装在一个添加了值为”location”的span元素中就可以了.

<p class=”vevent”>
Hey everyone,
next week is my
<span class=”summary”>birthday party</span>,
we should all meet-up at
<span class=”location”>my house</span>
for pizza.
</p>

最后,最为重要的是为此事件添加一个发生的时间,这就体现了微格式将人类作为首要的考虑因素,然后才是考虑的数据的机读性的特征.人类可以理解什么是”next week”,但是电脑不行,我们需要对”next week”进行精确的表述.

ISO的日期标准格式”YYYY-MM-DD”,必须是一个四位数的年,两位数的月和一个两位数的日期,在计算机相关领域广泛使用,但是对人类来说它的可读性并不是最好的.ISO这种日期格式虽然解决了美国日期和欧洲日期存在的差异,但读起来不怎么自然.所以我采取一个折中的方法去解决这个人类的可读性和机读性的问题.

<p class=”vevent”>
Hey everyone,
<abbr title=”2008-05-29″ class=”dtstart”>
next week</abbr> is my
<span class=”summary”>birthday party</span>,
we should all meet-up at
<span class=”location”>my house</span>
for pizza.
</p>

通过使用一个class属性值为”dtstart”的abbr元素,我们可以理解这个日期是事件的起始日期,计算机在不明白”next week”的情况下会尝试去读去abbr中的title属性值去解释”dtstart”,然后就可以获取ISO日期.如果你不明白在这里我为什么选择abbr元素,你可以参考一下这里.

在进行上面的一系列处理之后,这些事件信息就很容易被各种各样的日历程序所获取.你可以将它们发送到电脑或者移动电话上,当然也可以使基于web的日历应用,或者和朋友分享,或者使用已经存在的接口应用程序去发布它们.

如何使用微格式

我在这里提供一些工具便于你对微格式进行有效的创建和信息获取.

hCard Creator会根据你在表单中所添加的信息动态的创建代码,然后你可以这些代码复制到你的网页中.自然而然,会有hCalendar Creator的程序.还有Dreamweaver,Textpattern,WordPress的微格式插件和为数众多的hCard和hCalendar网上资源.

但是如果你对微格式不能进行获取和利用的话,创建就没有任何意义.自然,这里会有很多用于微格式获取和维护的程序.

Operator是firefox的一个插件,它会对你当前浏览的页面进行侦测并提供了相关选项和工具,以hCard为例,一旦hCard内容被侦测到,它就会列出一个列表并且显示一个”导入联系信息”的选项.Operator非常智能,它不只是会获取这些信息,同时也会提醒你当前页面存在微格式内容.

Technorati 提供hCard和hCalendar的微格式支持,如果你提交一个含有hCard和hCalendar信息的页面,其提供的微格式服务会返回vCard和iCalendar的等价信息.Technorati当前正在测试一项微格式搜索引擎服务.如果站点在Technorati的索引列表中,而网站的HTML包含任何微格式内容,数据就是可以被搜索到的.这样,你可以设置一个iCalendar订阅项,当你所在城市发生包含”jazz”,”tech”或”Frisbee”这些关键字的事件事,网络成为了一个你的数据库.这只是迈向语义化搜索的第一步,也是很多年前就已经被预料到的.

还有各种各样程序语言提供的库方便我们去获取HTML中的微格式,然后应用到web中.

MoFo for Ruby
Sumo for JavaScript
X2V in XSLT
hKit in PHP
Text::Microformat for Perl

真实世界中的hCard和hCalendar

现在一些组织已经开始微格式去处理他们的数据,有些你听说过,有些你可能没有.

Yahoo!是微格式的大力倡导者,在它旗下的众多站点中都可以看到微格式的踪影.例如图片分享站点Flickr,事件站点Upcoming,还有它的科技站和本地站.

Flickr,正如你在图1中所看到的,在用户信息页面上应用了微格式的hCard,也就是你可以直接将用户信息页面上的微格式数据导入你的地址本.如果你已经安装了Firefox的Operator插件,你就会看到可以将微格式数据导入到各种各样的地址本中,不管是桌面程序还是web程序.

Upcoming,如图2,在站点中使用了微格式的hCalendar去处理事件数据,这会让我们方便不少,当浏览Upcoming是就可以随时将事件数据导入到自己的日历事件管理器程序中.

在Yahoo!的科技站和本地站中,使用到hCard去处理本地公司数据.如果你在Yahoo!本地站搜索披萨店会返回hCard格式的数据,你很方便的就可以获取它们的电话号码去订购.

另外一个让人惊喜的微格式应用是柬埔寨黄页,这个公司将hCard用在电话目录中,创建了数百万的语义化数据实例,所做的只是改动一下内容管理工具的模板.

对于微格式在移动社会化网络中的应用,我们可以由Dopplr可窥一二.当前Dopplr还处于内部测试阶段,它面向的社会群体主要是那些频繁旅行的人.如果某一天它正式发布,你可以创建新账号,然后通过提交一个包含微格式数据的链接页面导入联系列表,Dopplr会自动分析页面,获取联系人信息并在它的数据库中查找你的联系人.它也可以导入hCalendar数据.如果你计划一个旅行,你可以通过提交一个使用了hCalendar的链接页面,Dooplr就会分析页面数据然后把它导入到你的计划表中,而你的朋友可是随时注意你的行踪.

最近,Microsoft也提供了一个简要的教程指导人们如何在SharePoint中使用hCard对联系人信息进行处理.

微格式展望

微格式的未来当然是光明的,一些网络主流公司让微格式的未来越来越明朗化.例如Yahoo!,它们在预见微格式的潜力之后将它应用到不同的产品中,而从浏览器厂商也开始表现出浓厚兴趣,不断的在其产品中添加功能以支持语义化标记.

你可以想象一下,你的移动电话或者掌上电脑可以自动获取一个页面上的hCard数据,它会在电话号码上添加一个菜单项方便你拨叫,如果配置适当的话,你可以将这个信息直接导入到电话本中.如果数据中包含一个邮政地址,浏览器会将这些信息发送到Google Map,并在地图上显示详细位置.

当然数据的自由移动可不仅仅限制于联系人信息,你可以对事件数据和其他结构的数据进行相同的应用.如果浏览器在一个页面上发现了hCalendar数据,它便将事件信息导入你所使用设备的日历事件管理程序上,添加一个提醒或在地图上标记位置.微格式的优点也在于对终端用户它是不可见的,并不是每个使用微格式的人都需要了解.从本质上将,微格式只是将数据自由化程度加大了.

RSS阅读器在这段时间非常流行,那我们是不是可以对地址本做一个类似订阅的功能.当前情况下,我们只能一遍又一遍的将朋友的email和网站复制到自己的地址本中.这是一项无聊透顶的工作.如果地址本使用RSS的推送功能,我的朋友很容易的采用用微格式创建了他们的联系信息页面之后,地址本应用程序便能在这些页面上搜索信息并能即使更新,他们也不必说每次有信息改变时就给他们地址本里的人群发通知.

这里所提到的例子都是微格式的简单应用,需要做的只是发布者在HTML添加语义化信息就可以了.不管上面的例子是如何实现的,终端用户只是应用就足够了,不必去究根问底.

微格式社区变得越来越强大,影响力也与日剧增.由于它的开放性,越来越多的人在Microformats Wiki上不断的添加案例和文档,最容易做的就是在你自己的站点上去使用微格式.使用微格式,你可以将你网站上呆板的文本内容变成你无法想象功能强大的信息包.

看一下截图,分别是javascript,html,CSS语法着色效果:

下载地址:

http://files.cheshirecat.cn/aptana.tar.gz

作为一个CSS方面的专家,所做的不只是记住选择符(Selectors)那么简单,提升样式表的效用和可维护性,以及设计蓝图和管理工作流程都是工作的一部分.在本篇文章中,Jina Bolton给出了10个CSS技巧提示,这些内容是由对12位顶尖的设计者的调查提炼而来.

接下来,我将重点放在创建性感的样式表方法的讨论之上.一旦CSS被用来创建具有魅力的网站,CSS的书写事实上就已经成为了艺术.使用何种方法创建,架构以及管理CSS成为了一件美妙的事情.

那么怎么创建这些性感的样式表?样式表应该具有那些特征呢?

几个月前,我有幸出席了在俄勒冈州波兰特岛所召开的Web Visions 2007的主题会议.在准备我的演讲报告时,我调查了12位工作在网页设计方面的设计人员和开发人员.基于调查的结果,再结合我自己的工作经验,我编写了下面的一个列表用来在创建样式表的时候给予自己以适当的提醒.

01. 保持CSS脱离标记

使用链接或者导入样式表的方法对于中阶或高阶的CSS开发人员来说都是再正常不过的事情,但是我在这里依然会强调一下这种方法的重要性.我见过的许多站点,在创站之初,CSS文件很整洁,组织的也井井有条,但是随着时间的推移,这些文档由于内嵌的甚至内联(inline)的样式出现而变得杂乱无章,一方面可能是由于给予的更新期限很短,另一方面或许就是纯粹的由于懒惰.

你正忙于一个拥有成千上万条的渠道内容同时出现的网站的大面积更新,给你的期限很短,所以你就选择了使用内嵌或者内联样式这样一些”快速修补”的方法.一些年过去了,习惯依然…,直到有一天你被告知这个站点需要重新设计,但是所有的内容仍然不变,这个时候而你只有一个星期去完成.想象一下,这将是一个怎样的境况.

其实这是很普遍的情况,更新样式表是一个再简单不过的任务,在你几年的”快速修补”之后,这些样式遍布了整个站点,相信你根本没办法记住他们在那里.所以现在你面对的只有2个选择a)在一个星期之内找出一个方法去清理规整这些样式b)找一份新的工作吧.

千万不要将你的工作变得愈来愈困难.使用链接和导入样式表是你的不二之选.规范的创建并保持样式表的整洁,你会活得更容易一些.

提示:小心使用链接或导入的方法会在标记上添加冗余的样式.每次你创建新的样式表,你都会更新要不就是添加新的样式,过多的外联样式不只会使补丁的修复变得困难,也会使样式表更难于维护.因此可以理解为什么大型站点会为不同的区块部分而去分离样式表.小心不要玩过火了,过犹不及.

这里很值得提及一下的是过多的样式表将会使HTTP的请求数增加.这些都会潜在的影响性能.因此,Internet Explorer将链接的样式表数限制在了32个.

02. 语义化不应当只是句漂亮话

你应该明白为什么我会说到这个.语法学是你最好的朋友,选择合适的,有意义的元素去描述你的内容,确保你所选择的是富有语意的类(class)和ID特征值.做正确的事情会使你的生活变得容易很多,如果你是某个团队的一分子,对团队其他成员来说也是如此.看一下下面的这条规则:

.l13k { color: #369; }

如果你是刚接手这个工作,你在CSS文件中看到了上面的内容,你能不能说清楚这个类是什么意思?大部分情况下你都会说不.这个类的名称可能是个缩写,但是恐怕没有办法去弄清楚他到底是什么的缩写,眼前是一摸黑.或者是这种情况,可能是你把它放到这里,你现在很清楚它是什么意思,但是你能保证3年之后你还记得它是什么意思么?

现在我们看一下下面的规则:

.left-blue { color: #369; }

你可能立即知道这个类选择符是为左侧边栏的显示蓝色区块而创建的,这时它就正确的表达了一定的语意.正如我在上面提到的,一旦要你在在一周内要重新设计,但是在重构过程中,这个区块需要定位到右边,颜色变为红色,类的特征值就没有任何意义,所以你现在需要改变你所有的特征值,要不就什么都不改变,不过这样可能或导致重重的困惑.

因此解决上面问题的最好方法就是在类特征值的命名中避免使用颜色(包括颜色名称和十六进制值)或者宽度,高度的尺寸值.同时你也尽量的避免去使用任何表明表现形式的值,例如box.反之,将表现和内容分离的意义也就不复存在了.

最后,我们看一下最合适的命名规则:

.product-description { color: #369; }

你应该能理解,这个规则是应用于产品描述.无论你的设计改变了多少次都不会改变.清楚明了的感觉不错.

03. 体会注释的优点

如果使用注释的方法得当的话,为你的CSS文件添加注释可以在开发过程中给予你和其他人很大的帮助.最常见的是为CSS样式规则添加提示信息,不过使用注释对优化组织结构和提升效用也很有帮助.

提示和标签

这是注释最常用的途径,可以为自己或其他开发人员留下提示信息可以避免后期引起的不必要的困惑和麻烦.这种应用简洁性最为重要.例如:

/* Turn off borders for linked images */
img { border: 0; }

时间戳和签名

许多设计人员和开发人员会在最新更新的CSS文件标注日期时间,以及他们的名字.这些都会提供给我们一些联系信息以及文档更新信息.

/* Sushimonster Typography Styles Updated: Thu 10.18.07 @ 5:15 p.m. Author: Jina Bolton —————————————————-*/

对于一项工程,这种方法会很有用,如果你是小组一分子时,这更是显得尤其重要.要提醒的是,一些组织都要求在文档中留下这类信息,而有些公司喜欢把名字和日期这些信息放在文档之外的地方,所以在开始之前最好弄清楚这些事情.

组织

在CSS文档中使用注释指示不同的区块是个不错的主意.例如,如果所有的头部信息被组合在一起,你可以使用注释使它和下面的区块样式区分开来.

/* HEADER —————————————————-*/

接下来我会就此进行进一步的阐述,现在我们先讨论一下如何”分离样式类型”

注释标记

如果你的CSS文件都是按照我上面所说的按照区块进行划分的话,使用注释标记可以配合”查找”功能使你在文档的各个部分之间切换自如.标注一个章节(Chapter),例如使用等号”=”,然后在后面添加一个区块的名称,例如”HEADER”,这样就为你的CSS文档创建了一个”锚点”.

/* =HEADER —————————————————-*/

这种方法在内容繁杂的样式表中尤其有用.更多的相关信息你可以在

Stop Design站点上了解.

参考

将注释作为参考说明不常见但不失为一个有用的方法,一个典型的例子是Steve Smith在他的CSS文档中包含一个为配色而添加的参考信息注释.

/* COLORS
Body Background: #2F2C22
Main Text: #B3A576
Links: #9C6D25
Dark Brown Border: #222019
Green Headline: #958944
*/

你可以将这个向导性的注释放在CSS文档的顶部以提醒你站点是如何配色的.另一个例子则是将注释作为类目录(index-like)的方法.你可以定义不同的区块以便于你在它们之间快速切换,可能会用到注释标记的用法,下面是一个例子

/* GENERIC HEADER SIDEBAR FORMS TABLES FOOTER */ /* =GENERIC —————————————————-*/

04.清楚什么时候使用条件注释语句和技巧(hacks)

现在有很大一部分文章会提及CSS技巧(hacks)产生的问题,并且说明在当前所有的Internet Explorer发行版本中为什么要使用条件注释语句.自然而然,肯定会有相左的意见.以前我也一直以为使用条件注释语句会比使用CSS技巧(hacks)好一些,直到最近有太多的例子证明这两种方法都算不得什么好的解决方案.

想象一下,你现在要为一个元素设置最小高度值,对于Internet Explorer 6来说,由于它不支持min-height属性,但是使用height属性就可以达到所要的效果,于是你就创建了一个新的样式表文件,并且在文档标记中使用注释语句来引用它,难道你所做的就只是为了这么一条CSS规则?如果将height和min-height属性放在一个CSS文件中,然后使用小技巧(hack)针对不同浏览器切换属性是不是会好一些?这种情况下,我坚持认为少用条件注释语句为好.

换个角度想一下,如果你放置了多个样式表文件,条件语句可能会使你的调试过程变得困难.如果你要更改一些东西,例如在上面的例子中,你就需要打开多个文件进行修改.很多情况下,对你来说,这将是一个繁重的任务.可以想象一下,如果你在主要的CSS文件中定义的规则,然后在需要3个不同的IE样式表中进行重定义.这些都给后期的工作留下了不必要的烦恼,尤其是如果另外一个开发人员在编辑时没有注意到这些需要重新编写的文件的存在.

假如你现在还在使用条件语句,我推荐你在主样式表中添加一个注释以便后来的开发人员知道IE专有样式规则的存在.当必须编辑height或者类似的属性时,这种方法可以提醒你需要修改的不仅仅是一个文件.

再次提醒一下,如果你使用CSS Hack 的方法,浏览器更新带来的更改可能对今后的工作带来影响,你现在使用的Hacks可能在下一个版本中就无法工作了.

05.组织选择符和声明

经常的,要保持CSS的整洁度和有序性.我喜欢将选择符按照样式的类别进行组织划分.

• 重置样式(reset styles)
• 排版样式(typography styles)
• 布局样式(layout styles (header, content, footer, etc.))
• 模块和widget样式module or widget styles
• 其他(etc).

然后,在每个组里面,我按照DOM等级将选择符组织划分:

• 任何父级元素样式(any parent styles)
• 块级元素样式(block-level element styles) (段落,列表等.)
• 内联元素样式(inline element styles) (链接,缩写等.)
• 其他(etc).

然后在上面划分的基础上进行详细的划分:

• 段落(paragraphs)
• 引用(blockquotes)
• 地址(addresses)
• 列表(lists)
• 表单(forms)
• 表格(tables)
• 其他(etc).

最后,我按照样式类型组织CSS声明

• 位置样式(positioning styles)
• 浮动/清除浮动样式(float/clear styles)
• 显示/可见样式(display/visibility styles)
• 空间样式(spacing styles)(margin, padding, border)
• 尺寸样式(dimensions styles)
• 排版相关样式(typography-related styles)(line-height, color, etc.)
• 其他样式(miscellaneous styles)(list-style, cursors, etc.)

许多人喜欢根据声明的字母顺序来排列,这种方法对我来说可能不太适合,但可能对你来说会非常适合.不过一旦你选择了任何组织方法,就最好坚持下去以保持其统一性.

06. 创建框架(framework,库)

当你在编写CSS时,如果你已经发现你经常反复的做同一件事情,考虑一下创建一个框架或库可能是个不错的主意.将一个样式表组合组成的框架作为你的网站的基础能够缩短的你开发时间.较为典型的样式表基本上都包含以下内容:

• screen.css – 一个screen CSS文件包含你所有应用在屏幕显示上的所有样式,可以选择性的导入附加样式,如以下样式表文件:
• reset.css – reset CSS文件被用于重置所有默认的浏览器样式,让我们更容易的完成各种浏览器下的兼容性问题.
• typography.css – typography CSS文件被用来定义字体,大小,行间距,字间距和字体颜色.
• grid.css – grid CSS文件被用来组织布局和结构.通过定义基本的头部,底部和列设置为你网站的创建轮廓,线框模型(winframe)
• print.css – print CSS文件包含页面被打印时显示的样式.

一个CSS框架的例子是由Olav Bjørkøy创建的Blueprint framework,开发人员主要为Jeff Croft 和 Eric Meyer等人.另一个流行的框架就是Yahoo! User Interface Library建立的.不过许多开发人员认为这些成型的框架包含的标记和CSS有那么一点臃肿,当然也包括了太多的表现类(class)和属性名称.

声明:当我在写这篇文章时,Jeff Croft发表了一篇主题为What’s not to love about CSS frameworks?(什么让你摒弃CSS框架),在这篇文章的评论中和谈及他听说许多人说我严重反对CSS框架,我不知道这从何说起,但是我仍然要重申一下我的观点,我不反对使用CSS框架,并且非常坚持使用它们.

最好的结果就是你最好创建适合自己或者你所在组织的框架.

07. 保持文档可读性和性能优化的平衡

每个开发者的样式风格可能不尽相同.许多开发者书写的样式表文件具有很好的可读性,并且会在把文件正式上传之前进行一些性能优化措施,例如移除注释,空白,缩进以及换行等步骤.这是一个不错的方法,也值得推荐.尽管如此,在某些情况下如果你不能进行那些步骤的时候,最好找到一个能够保持文档可读性和性能优化平衡的方法.对此,Steve Smith 有一个不错的建议.

另外,考虑一下使用连字符号替换下划线,微格式(Microformats )将连字符号作为标准的分割符号,不过某些特定的老版本浏览器在处理上可能有问题.你可以阅读一下Underscores in class and ID Names(类和ID中的下划线)这边文章来了解更多信息.

08. 管理文本编辑器

每个艺术家都会对使用他所了解的适合他们的工具,对于设计者和开发者来说也是如此.对于CSS,最好了解你所使用的编辑器.

现在有很多的文本编辑器可以使用,如TextMate,Coda,BB Edit,TextPad,Dreamweaver等,我在这里不是要告诉你选择那一个编辑器.每个编辑器都有自己的优势和劣势,最适合的编辑器取决于你的偏好.不过,一旦你选择了一个编辑器,最好把它了解的清清楚楚.例如快捷键时什么,有那些能用到的提示和技巧等等.

管理好文本编辑器时加快开发速度最好的方法.它会让你在创建样式表时更有效率.

09.使用版本控制

平滑维护是创建性感的样式表中关键的步骤.版本控制能帮上你不少的忙,它不只是对小组开发有用,对单独的设计者和开发者来说也很有用.

许多应用程序内置了源代码控制机制,Dreamweaver使用 登记/登出系统帮助开发人员确认所编辑的文件不是已经编辑过的文件,而同步功能可以将本地文件和远程文件进行同步,合并和替换.这些功能很容易上手,但在某些地方还是有不足之处.

Subversion (SVN) 和 Concurrent Versions System (CVS) 提供了更为强大的功能.通过附加的功能,你可以进行恢复,查看更改以及解决冲突等操作.这里有Jonathan Snook的一篇叫做“Hosted Subversion”的文章,你可以阅读以获取更多的如何快速简便的去操作它的方法.

10. 创建和管理样式表向导文档

在某些情况下,样式表向导文件是开发人员对语法规则和书写标准所编写的指导性文档,它常用被用作设计,开发和内容的大纲来使用.编写样式向导文档是为清楚的表达排版,网格,颜色,图片尺寸等内容而创建的参考手册.

创建样式表向导文档的时候,最好的办法是提供一个标记和CSS的参考性内容.这些参考可以被开发小组或者后期的开发人员当作手册来使用.另外,它还可以包含布局定义,在里面你可以列出所使用的不同布局以及相关的标记和样式.

最后,你所需要做的是一些开发者保证质量的必要步骤,例如检测有效性和可用性以便保证生产出高质量的产品.

PNG, GIF, and JPEG

PNG图像在网页设计领域中应用很大程度上被忽视了,大部分都有很好的理由.直到最近, Internet Explorer 7的发布才有所改观.尽管还无法在所有的浏览器中实现这种图像格式的所有特征,但是这样一来至少它已经可以在所有的浏览器中正常稳定的工作,因为 Internet Explorer 7对PNG的支持以及在对低版本的浏览器使用CSS技巧,这样很大程度上了促使PNG图片在设计工作中的应用.

PNG,通常将其发音为”ping”,表示便携式网络图像(Portable Network Graphics),是一种无损压缩的位图格式.更通俗点说,是一种在不降低图片质量的情况下去减少图片大小的方法.它最初的出现是为了替代已经到处可见的GIF格式,对图像软件来说,后者通常需要获取一个GIF专利权(伴随GIF/LZW专利权的过期,它的专利权也不复存在).PNG也是一个国际标准(ISO IEC 15948:2003),同时也是W3C官方推荐的图像格式.

另外,作为一个免费可用的格式, PNG提供给设计者很多超越GIF的专有特征:

• 更大的压缩比:对于大多数图象,PNG比GIF 文件更小;
• 更大的色深:PNG提供48位真彩色,而GIF只提供了256位色;
• α通道透明:GIF只提供2进制透明,如果启用α通道,PNG提供实质上能提供无限制的透明效果.

值得提及的是PNG不支持GIF格式所支持的动画,这里需要涉及到一个叫做MNG(Multiple-image Network Graphics)标准,它可以使PNG实现动画,不过还没有被广泛的支持.

为什么GIF依然这样受欢迎

说到这里,你可能有这样的疑问,既然PNG这么多优点,那它为什么不是网络上最通用的图像格式.答案是,大部分人误解了这种格式以及支持它的浏览器.

由于 Internet Explorer 6以及更低的版本不完全支持PNG特征(包含α通道透明),而人们却认为Internet Explorer根本就不支持PNG或者至少不支持透明.事实上,Internet Explorer 5以及Internet Explorer 6 已经足够支持PNG规范,能让PNG功能上等同于非动画的GIF图像.其他比较著名的浏览器,包括Firefox,Netscape 6及更高版本,Mozilla,Opera 6及更高版本,Safari,Camino都提供PNG透明的全部特征支持.

排除浏览器支持的误解,GIF内置的动画支持是也继续是它能有这样的普及度的一个关键原因.近几年,GIF动画应用的热度有所下降,转而是其他的技术,尤其是Flash越来越普及.

透明特征也是一个设计者选择图像元素格式的重要参考点.尽管PNG提供了更多的透明度扩展,网页设计人员依然被要求创建适合低版本浏览器兼容的GIF格式.使用CSS,可以将GIF图片放入低版本浏览器和将PNG图片载入支持它的浏览器.但是创建两套图片对一个网页设计人员来说一个额外的劳动,所以结果就是大部分的设计者会使用它们的共有特征,也就是仍然采用GIF格式.

说到最后,仍然会有GIF仍然受欢迎的其他原因.但是它们中的大多数都是建立在误解或者某种条件情景下的.了解PNG如何工作的一些知识和如何跨浏览器使用,这样你就可以利用这种格式而不在去依靠GIF.

什么是JPEG?

JPEG,网络上另外一种非常普及的文件格式,是除去GIF,PNG之外的另外一种不错的照片存储格式.PNG无意和JPEG竞争.JPEG的有损压缩(每保存一次质量就会有所损失?)在处理图片上会比PNG产生更小的文件,而PNG在文本,线条,标志,纯色的图片将会产生更小的文件.

PNG的一些极佳应用

现在我们看一下PNG在网页设计方面的极佳应用.我已经将每个例子所包含的文件放在一个单独的文件夹里放在这个章节的代码下载里,你可以在friends of ED中找到.

渐变

在过去的几年.渐变—在两种或多种颜色之间平滑的过渡,已经成为了网页设计人员的最爱.尤其是在摒弃了深度和材质之后,微妙的,简单显明的填充显得鲜明洒脱.

GIF某些时候是渐变效果的好选择,如果渐变只是简单的两色渐变,GIF会工作的很好.尽管这样,256色的限制常常会导致不希望出现的不美观的条纹出现在渐变中.对于JPEG来说,它可以生成相当美观的渐变,这样导致的结果就是文件会不可思议的大.JPEG渐变一般来说会表现的不错,但是要清楚,JPEG是有损压缩的,意味着重新生成的图片将没有原始的未经压缩图片的高保真度.

典型的背景渐变样式常被用于按钮,盒子等等.看起来像图5-1.左上方向顺时针宣传,分别是原始图像,GIF图像,PNG图像及JPEG图像.可以看到PNG格式的图像的文件大小是最小的(515byte).约是GIF格式的四分之一.JPEG比PNG稍微大一些,为637byte.

图5-1.Photoshop的保存为web格式面板显示了同一图像,不同格式的文件大小差异
如果图片需要在任何背景下都正常工作

某些情况下必须创建一个在不同背景上显示相同效果的图片,常见的是标志和图标.这种角色在传统情况下是GIF所担当的,但是有太多的原因PNG可取GIF而代之.在标志和其他简单的作品上PNG总是最小的文件.另外,PNG自身的透明功能使我们能够创建一个单一的文件就能够正常工作在任何背景之上.PNG可以提供和GIF相同的二进制透明,但是同时提供一些相当不错的α透明通道效果.

以KTKA Channel 49 News in Topeka, Kansas为例,世界在线工作小组在网站的头部创建了一个漂亮的天气图标来显示当前的天气状况.但是聪明的程序会在白天和夜间分别显示不同的配色方案，天气图标需要在不同的背景下表现相同的显示效果。如图5-2，5-3

图 5-2. 49abcnews.com 头部，白天

图 5-3. 49abcnews.com 头部，夜间

使用PNG,可以做到不管它出现在白天还是夜间的背景上,效果都是一样的.因此,在改变背景的情况下,我不需要重新制作任何的天气图标,因为α通道透明的PNG文件在任何情况下都显示的不错.

如果我选择GIF文件的话,由于受到GIF二进制通道透明的限制,结果看起来就是图5-4,我不觉得我们都会认为这样的效果会很好.

图5-4. 49abcnews.com 头部, 夜间, 将PNG替换为GIF文件
半透明的HTML覆盖效果

另外一个常用的图片设计技术是将一个部分透明的区域覆盖在照片或其他图像上面,通常包含一些文本.这需要考虑到将可读文本应完全排除在模糊的层之外.设计师Wilson Miner 将这个效果用在了Gingeroot 珠宝站点上,效果如图5-5.

图5-5. Gingeroot, 设计者为天才的设计师 Wilson Miner

Wilson 将透明区域和文本包含在JPEG图片中,在此之前他事先使用Photoshop将这些创建.效果实现后它工作的不错,同时也完全适合了这个站点的需要.但是如果半透明区域上面的文字需要频繁修改,甚至可能是对每个网站的访问者都显示不同的内容呢?在这种条件下,我们就不能把文字直接合成到图像中了.文本需要使用HTML和CSS来实现.使用PNG的α通道透明,我们可以完全实现Wilson的样式而不需要将文本与图像合成.

我选择了我女儿的一张照片,并把它放入到一个附有基本CSS样式的XHTML文件中.注意一下,我出于演示的目的在这里使用了CSS内置的方法.在真实的情况下,使用一个外部链接样式表的方法将更具有良好的延展性,更少的代码以及更适合文件的管理.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<title>Haley’s web site</title>
<style>
body {
font-family: “Lucida Grande”, Helvetica, Arial, sans-serif;
background-color: #304251;
color: #304251;
margin: 20px auto;
width: 720px;
}
#feature {
position: relative;
width: 720px;
height: 439px;
}
#feature-content {
position: absolute;
bottom: 0;
left: 0;
height: 125px;
width: 720px;
background-color: #dfdfdf;
}
#feature-content h1 {
margin: 0;
padding: 0;
line-height: 125px;
padding: 0 30px;
font-weight: normal;
font-size: 2.3em;
}
#feature-content a {
float: right;
font-size: .6em;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
</style>
</head>
<body>
<div id=”feature”>
<img src=”haley.jpg” alt=”Haley Madysan Croft” />
<div id=”feature-content”>
<h1>Sweet. Smart. Beautiful.
<a href=”/haley” title=”Haley Madysan Croft”>Learn more »</a></h1>
</div>
</div>
</body>
</html>

图:5-6.使用HTML和CSS模仿Gingeroot,当前未设置透明

现在我们在Photoshop中创建了一个边长均为1px的正方形图像,将其填充为淡蓝色并将图层的不透明度设置为70%.最后,我把这个图像保存为Photoshop的PNG-24格式,并启用透明,然后我将这张生成的图片作为背景覆盖在原来的图片之上取代原来的灰色填充,效果如图5-6

#feature-content {
position: absolute;
bottom: 0;
left: 0;
height: 125px;
width: 720px;
background-image: url(‘transparent.png’);
}

图5-7.为PNG图像格式添加透明度,几乎完全复制了Gingeroot样式

实际上,Wilson Miner将相同的想法表现在Gingeroot站点的另外一个地方.在显示当前产品的页面上,一个标有ONSALE标识的透明PNG图像出现在项目产品图片的左上角.效果见图5-8

图5-8Gingeroot项链页面使用了透明的PNG图像背景放置在产品图片之上

我也将这个技术用在了Explore Steamboat上,一个专注科罗拉多州极限活动的事件,娱乐和活动项目的网站,如图5-9

在另外的一个创新性的例子中,设计师Bryan Veloso 使用渐现的方法为固定在底部的一张透明PNG图像添加了效果.当你滚动到页面底部时,就觉得文字逐渐显现在稀薄的空气中.你可以去Revyver.com(如图5-10和图5-11)亲眼看一下效果会更好.另外,排列在文字前方的那个树产生了一个出人意料的效果,你第一次看到时就已经会非常惊讶.

图5-10.在Revyver.com,设计师Bryan Veloso使用了透明的PNG创建了一个渐现的效果,并把它排列在文本内容的前面

图5-11.在Photoshop中仔细看一下Bryan的底部PNG图像,我们会明白如何利用α通道实现这种设计效果.
水印

另外一个常用的图片设计技术是覆盖在图像上部薄薄的水印,尽管这个只是纯粹的视觉样式,但是它同时也是表达版权所有者和图片原始来源的方法.

在我的个人站点上,我放置了我的一个图片库.这些图片是上传到Flickr 并且通过它开放的应用程序接口(API)显示在我的站点上.

图5-12. jeffcroft.com 上的图片详情页面

如果我想把我的个人标志放置在所有的图片上呢?我可以在Photoshop中打开每一张图片,然后放上我的标志保存.尽管可以这样,对于这些频繁更新的成千张的图片,这项工作可怕而不切实际,如果我不是在电脑而是使用的我移动电话上传图片到Flickr的话,标志能不能自动添加到图片上面?PNG能帮我们做到.

HTML代码如下:

<a class=”photo-container” href=”http://www.flickr.com/photos/jcroft/2622915/”>
<img class=”full-size-photo” src=http://static.flickr.com/2/2622915_8b78c1207d.jpg
alt=”CTA, a photo by Jeff Croft” />
</a>

我在Photoshop中创建了一个边长为80px,颜色为白色的一个网站标志,将其不透明度设置为15%,然后使用标准的PNG-24优化设置导出,然后我用下面的代码将其添加到HTML代码中.

<a class=”photo-container” href=”http://www.flickr.com/photos/jcroft/2622915/”>
<img class=”full-size-photo” src=”http://static.flickr.com/2/2622915_8b78c1207d.jpg”
alt=”CTA, a photo by Jeff Croft ” />
<img class=”watermark” src=”http://media.jeffcroft.com/img/core/jeffcroft_logo_watermark.png”
alt=”Watermark” />
</a>

使用CSS将其定位到左上角.

a.photo-container {
position: relative;
display: block;
}
img.watermark {
position: absolute;
top: 2em;
left: 1em;
}

这样图片就被自动加入了水印,这个PNG水印浮于图片之上,效果如图5-13.把这个放入到我的 内容管理系统的模版中,不用做重复2000多次就可以在每张图片上添加水印.

图5-13.显示在照片左上部的透明PNG水印

如果你想让这个功能更智能一些,可以使用DOM的方法将水印标记代码插入HTML代码中.

蒙版效果

它和上面提到的水印实现的方法非常相似,但是产生的效果却不相同.这次,我在Photoshop中创建了一个大一些的网站标志,另外不同的是这次标志是透明而背景是白色的,这是因为例子中页面的背景色是白色的.效果如图5-14

图5-14 在Photoshop中为透明PNG蒙版效果创建的图像

正如我说的,在技术方面它和水印效果的实现应该说是完全相同的,看一下下面的HTML代码:

<a class=”photo-container” href=”http://www.flickr.com/photos/jcroft/2622915/”>
<img class=”full-size-photo” src=”http://static.flickr.com/2/2622915_8b78c1207d.jpg”
alt=”CTA, a photo by Jeff Croft” />
<img class=”mask” src=”http://media.jeffcroft.com/img/core/jeffcroft_logo_mask.png”
alt=”Mask” />
</a>

然后是CSS

a.photo-container {
position: relative;
display: block;
}
img.mask {
position: absolute;
top: 0;
left: 0;
}

看图5-15中完成后的效果图

图5-15 PNG蒙版位于照片之上形成的打孔效果
颜色可变的图标

通过实现蒙版效果的方法,我们可以只通过CSS就可以得到颜色可改变的图标. 想法简单易行:将一个透明的图像,图标符号放置在正方形,长方形或者其他形状上,然后使用CSS将这些形状填充一些单纯的颜色.通过CSS简单的去改变这些背景颜色,你就能查看更改颜色后的各种效果.

我们需要一组普通的体育运动符号,如图5-16

图5-16 一些普通的运动图标

我创建了一些透明的打孔图标符号,方法和我在上面的蒙版效果示例中一样,如图5-17

图5-17.为每个图标创建镂空的PNG蒙版

将图像缩放到合适的尺寸(在这里我选择了长宽均为48px),将它们保存为Photoshop中启用透明的PNG-24的默认格式.接下来我创建了一个Xhtml文件将每个图像与之关联起来.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<title>OMG Sports Icons!</title>
<style>
img {
background-color: #cc0000;
}
</style>
</head>
<body>
<img src=”running.png” alt=”Running” />
<img src=”biking.png” alt=”Biking” />
<img src=”skiing.png” alt=”Skiing” />
<img src=”soccer.png” alt=”Soccer” />
</body>
</html>

我将背景色设置为#cc0000(大红色),结果就像红色的光穿过打孔形状,效果如图:5-18.由于PNG支持部分透明像素的消除锯齿,边缘看起来相当光滑.

图5-18 作为网页图标的透明PNG,CSS设置的背景穿过了图像中打孔的部分

很容易的通过CSS文件去更改图标的颜色,效果如图5-19

img {
background-color: #000066;
}

图5-19 更改背景颜色后,图标显示为其他颜色

当你需要重新设计你的站点时,使用这种简单的颜色更换方法非常简便,这样你就不需要重新制作所有的图标图像了,所做的只是在CSS中更改一下颜色.这种方法也是很容易实现鼠标翻转的一种方法,你可以设置默认颜色为红色,鼠标划过的颜色为蓝色.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<title>OMG Sports Icons!</title>
<style>
a:link img,
a:visited img,
a:active img {
background-color: #cc0000;
}
a:hover img {
background-color: #000066;
}
</style>
</head>
<body>
<a href=”/running/”><img src=”running.png” alt=”Running” /></a>
<a href=”/biking/”><img src=”biking.png” alt=”Biking” /></a>
<a href=”/skiing/”><img src=”skiing.png” alt=”Skiing” /></a>
<a href=”/soccer/”><img src=”soccer.png” alt=”Soccer” /></a>
</body>
</html>

你还可以使用CSS为蒙版图标添加更多的样式,例如添加边框,如图5-20

img {
background-color: #000066;
padding: 2px;
}

图5-20 使用CSS增加一个边框去增强图标外观显示

Dan Cederholm 2003年在他的blog上写了一篇非常相似的文章,PJ Onori并基于此技术在他的站点上做了一组不错的图标(Sanscons）.

尽管如此,我使用打孔而不是白色的符号颠倒了一下他们的想法.他们使用的是放置在一个透明的背景之上白色的符号,效果显示的非常好.这样的话,你设置的CSS背景颜色将是穿过环绕在符号周围的正方形或矩形.

Dan和PJ都用透明的GIF图像替代了透明的PNG图像,这种方法对他们这样的应用说来已经足够的,因为他们创建的是非常小的位图.如果使用PNG的话,你可以利用PNG消除锯齿和部分透明的特点将这个技术应用在更多细节的图标之上.

到此为止,但是这些技术在浏览器中能正常工作么?

我知道你在想什么,所有的PNG透明效果看起来的确漂亮,但是完全适用么?

好消息是几乎所有的现代浏览器都完全支持PNG图像特征,包含我在例子中一直提到的α通道透明.Safari的全部版本,Firefox的全部版本,Opera 6 以上版本,Netscape 6以上版本和Mozilla全部版本会很顺利的显示出效果,坏消息就是大部分用户使用的Internet Explorer是唯一我没有提及到的.

Internet Explorer 6 及更低版本的不支持α透明创建的PNG格式.但它一直也是大部分人上网使用的浏览器,或者说是没有其他的选择,因此这个很明显的漏洞存在的这些年让许多网站设计人员摒弃PNG,但是随着Internet Explorer 7的发布,所有的主流浏览器都能完全支持PNG特征了.还有一点,就是有一个折衷的办法让Internet Explorer 6 及更低版本也能支持PNG的α透明特征,因此,如果你还想使用这些效果,继续往下面看.其实只需要稍微变动,Internet Explorer6以及更低版本就没有问题了.

Internet Explorer善后工作: AlphaImageLoader

Internet Explorer包含许多专有的滤镜,他们被定义在CSS文件中,但是他们不是官方CSS标准的一部分,换句话说,他们不是网页标准.不幸的是Internet Explorer6及更低版本不能完全支持W3C推荐的PNG图像格式,而微软包含的AlphaImageLoader滤镜却能弥补他们的这个缺点.

根据微软官方相关页面的说法, AlphaImageLoader将图像显示在对象背景层与内容层之间,不超出对象边界的这样一个位置.换句话说,AlphaImageLoader载入一个PNG图像的时候其透明的特征没有变化,不过是将其作为它自己的一个层来载入的,位于它所作用的那个对象的内容层之下.PNG使用这种载入方法的图像和背景图像很相似,但是它不是前景图像,尽管它的的确确的处于背景层之上.

简而言之,你可以很简单的将AlphaImageLoader CSS应用于某个图像去产生你想要的结果.这样做将会将图像载入2次,第一次连同透明特征载入,第二次以无透明特征对象的前景内容载入,这样就遮住了透明的图片.

你不能将一张透明的PNG图像作为一个(X)HTML元素的背景图像,然后期望AlphaImageLoader滤镜能如你所想的那样在Internet Explorer中正常工作.记住AlphaImageLoader将你的图像插入对象的背景层和前景层之间,因此,它可以加载你图像的全部透明特征,然后仍然将会将背景图像载入,而背景图像是不能显示你漂亮半透明的像素的.

AlphaImageLoader实际应用

现在我们回去看一下以前例子中如何让Internet Explorer如何正确的加载图像.在Channel 49那个例子中,图5-21是站点在Internet Explorer 6 中的显示效果

图5-21 49abcnews.com头部,在Internet Explorer 6/Windows的显示效果,具有PNG完整的透明特征.

HTML代码如下

<div id=”weather”>
<a href=”/weather/”><img id=”weatherImage”
src=”http://media.49abcnews.com/img/weather/overcast-night.png”
alt=”Overcast” /></a>
<p>
<a href=”/weather/”>Currently in Topeka, KS:<br />
<strong>82° Overcast</strong><br />
<span>Get the forecast and more…</span>
</a>
</p>
</div>

你可以看到这里的关键是那个PNG图像,但是Internet Explorer6完美的将其加载了.秘密就是Javascript,我使用了一些DOM脚本去移除img元素并填入一个div元素,你可能猜到了,同时还在CSS中给它应用了AlphaImageLoader方法.Javascript使用微软内置在Internet Explorer中条件语句将其载入到页面中,不过这些条件语句是完全不符合标准的.条件语句会根据根据Internet Explorer特定的版本载入目标代码.

<!—[if lte IE 6]>
<script src=”http://media.49abcnews.com/js/fixWeatherPng.js” type=”text/javascript”></script>
<![endif]—>

在上段代码中第一句表达的是如果小于Internet Explorer 6的条件,脚本元素只有在Internet Explorer版本小于或等于6时才会被包含在文档中.其他的浏览器,包括即将(已经)发布的Internet Explorer 7,将会完全忽略.

那fixWeatherPng.js里面包含的javascript代码是什么,看一下:

window.attachEvent(“onload”, fixWeatherPng);
function fixWeatherPng() {
var img = document.getElementById(“weatherImage”);
var src = img.src;
img.style.visibility = “hidden”;
var div = document.createElement(“DIV”);
div.style.filter = “progid:DXImageTransform.Microsoft.
AlphaImageLoader(src=’” + src + “‘, sizing=’scale’)”;
// <i>Some 49abcnews.com-specific CSS styling omitted for brevity. </i>
img.replaceNode(div);
}

我们一步一步分析一下脚本是如何工作的.首先,我们告诉浏览器页面加载时运行fixWeatherPng函数,剩下的脚本就是函数本身了.函数根据我们需要处理的图像的id属性获取元素然后将它存储为变量img,同时将其src属性保存为变量src,然后我们在CSS中将其属性visibility 设置为 hidden,接着我们创建了一个新的div元素并将其存储为一个变量div,再将AlphaImageLoader滤镜以单独的CSS样式插入,同样,无语意的div元素也是以独立于页面的.所有的代码都被条件语句所控制,其他浏览器根本无法执行这段微软专有的代码.

要是你必须做一些无用的事情,至少你能够把它抽象化并在不需要它的时候可以将其隔断.

总结

PNG,作为一个图像格式,它提供了许多当前被广泛使用的GIF格式无法提供的特征.事实上,这些特征足以使其替代其他非照片的图像格式,但是Internet Explorer对PNG的扩展特征缺乏有效的支持,例如无法支持α通道透明,致使许多开发人员敬而远之,但是在这里有两个非常好的原因来说明为什么不需要对PNG心存恐惧.

首先,不管是Internet Explorer 6还是更低的版本是如何对PNG缺乏支持,但是仍然对你可以用GIF实现的效果提供了支持,当然除GIF动画,并且PNG几乎在文件大小,传输速度以及带宽占用上占尽了优势.

其次,Internet Explorer7提供了PNG的α通道透明的完全支持,使用其半透明选项原则上说可以实现无穷的效果.我猜想那些使用不同的方法去使用透明PNG的设计人员,例如在本章节中所列出的,将会打开一个迄今无法达到的完全的样式应用高度的大门.在这里我只是给了你一个可行的方法去告诉你如何创新使用PNG和透明效果,但是别止步,探索属于你的创新.