孙佳,致力于web标准化,w3c,div+css,js,dom,前端开发 - web标准化

CSS优先级-Specificity规则、算法及实例分析

sunjia73@163.com(孙佳) — Mon,06 Oct 2008 17:08:53 +0800

关于CSS specificity
CSS 的specificity 特性或称非凡性，它是衡量一个衡量CSS值优先级的一个标准，既然作为标准，就具有一套相关的判定规定及计算方式，specificity用一个四位的数字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。

选择符Specificity值列表：

Selectors 选择符	Syntax Samples 语法	ensample 示例	Specificity 特性
通配选择符(Universal Selector)	*	*.div { width:560px;}	0,0,0,0
类型选择符(Type Selectors)	E1	td { font-size:12px;}	0,0,0,1
伪类选择符(Pseudo-classes Selectors)	E1:link	a:link { font-size:12px;}	0,0,1,0
属性选择符(Attribute Selectors)	E1[attr]	h[title] {color:blue;}	0,0,1,0
ID选择符(ID Selectors)	#sID	#sj{ font-size:12px;}	0,1,0,0
类选择符(Class Selectors)	E1.className	.sjweb{color:blue;}	0,0,1,0
子对象选择符(Child Selectors)	E1 > E2	body > p {color:blue;}	E1+E2
相邻选择符(Adjacent Sibling Selectors)	E1 + E2	div + p {color:blue;}	E1+E2
选择符分组(Grouping)	E1,E2,E3	.td1,a,body {color:blue;}	E1+E2+E3
包含选择符(Descendant Selectors)	E1 E2	table td {color:blue;}	E1+E2

规则：

1. 行内样式优先级Specificity值为1,0,0,0，高于外部定义。

如：

sjweb

外部定义指经由或

CSS中expression的使用方法及利弊分析

sunjia73@163.com(孙佳) — Wed,24 Sep 2008 18:09:15 +0800

关于expression定义
IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式，CSS属性的值等于Javascript表达式计算的结果。在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。

给元素固有属性赋值

例如，按浏览器的大小来设置一个元素的位置。

 程序代码

#myDiv {
position: absolute;
width: 100px;
height: 100px;
left: e­xpression(document.body.offsetWidth - 110 + "px");
top: e­xpression(document.body.offsetHeight - 110 + "px");
background: red;
}

给元素自定义属性赋值

例如，消除页面上的链接虚线框。通常的做法是：

程序代码

link1
link2
link3

粗看或许还体现不出采用expression的优势，但如果你的页面上有几十甚至上百个链接，这时的你难道还会机械式地Ctrl+C，Ctrl+V么，何况两者一比较，哪个产生的冗余代码更多呢？

采用expression的做法如下：

程序代码

link1
link2
link3

说明：里面的star就是自己任意定义的属性，你可以随自己喜好另外定义，接着包含在expression()里的语句就是JS脚本，在自定义属性与expression之间可别忘了还有一个引号，因为实质还是CSS，所

以放在style标签内，而非s cript内。OK，这样就很容易地用一句话实现了页面中的链接虚线框的消除。不过你先别得意，如果触发的特效是CSS的属性变化，那么出来的结果会跟你的本意有差别。例如

你想随鼠标的移进移出而改变页面中的文本框颜色更改，你可能想当然的会认为应该写为

程序代码

[code]

可结果却是出现脚本出错，正确的写法应该把CSS样式的定义写进函数内，如下所示：

[code]

注意:能不使用expression就不要使用，一般不建议使用expression，因为expression对浏览器资源要求比较高。
也不符合web标准化设计并且不被火狐，Opera等浏览器支持。

-------------------------------------------------------------

ps:早上群里的一个朋友提出用expression 实现鼠标触发图片切换.

用expression实现的方法:

CSS:

程序代码

html:

程序代码

用CSS实现的方法:

CSS:

 程序代码

#left_button2 a{width:76px;
    height:76px;background:#009933 url(默认图片和鼠标移开副复位图片.gif); cursor:default;}    
#left_button2 a:hover{background:#009933 url(鼠标浮动图片.gif);}

html:

程序代码

两者实现的效果是一样的,在这种情况更适合使用后者这种方法,最终我们还是要有web标准化和结构代码语意化的思想,去判断用最好的方法实现我们想要的网页效果.

PNG格式图片在IE6浏览器下不透明的修正方法

sunjia73@163.com(孙佳) — Tue,23 Sep 2008 17:27:55 +0800

IE6浏览器不支持PNG格式的图片的缺陷给web设计带来了极大的不便，网上有很多的修正方法，有滤镜+hack的方法，有JS的方法，
这里给大家介绍一种网上比较流行使用较多的一种JS方法：

把以下代码保存为correctpng.js

 程序代码

function correctPNG()
{
   for(var i=0; i   {
   var img = document.images[i]
   var imgName = img.src.toUpperCase()
   if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
   {
   var imgID = (img.id) ? "id='" + img.id + "' " : ""
   var imgClass = (img.className) ? "class='" + img.className + "' " : ""
   var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
   var imgStyle = "display:inline-block;" + img.style.cssText
   if (img.align == "left") imgStyle = "float:left;" + imgStyle
   if (img.align == "right") imgStyle = "float:right;" + imgStyle
   if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle 
   var strNewHTML = "   + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
   + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
   + "(src=\'" + img.src + "\', sizingMethod='scale');\">"
   img.outerHTML = strNewHTML
   i = i-1
   };
   };
};

if(navigator.userAgent.indexOf("MSIE")>-1)
{
window.attachEvent("onload", correctPNG);
};

在网页的头部引用一下

程序代码

页面里直接使用img标签，使用PNG图片。

做了一个样例（里面包含2种JS方法）：
点击下载源文件

网页的栅格系统设计

sunjia73@163.com(孙佳) — Sun,21 Sep 2008 11:40:00 +0800

栅格系统的形成
1692年，新登基的法国国王路易十四感到法国的印刷水平强差人意，因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的，重视功能性的新字体。委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任领导，他们以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本方各单位，每个方各单位再分成36个小格，这样，一个印刷版面就有 2304个小格组成，在这个严谨的几何网格网络中设计字体的形状，版面的编排，试验传达功能的效能，这是是世界上最早对字体和版面进行科学实验的活动，也是栅格系统最早的雏形。

栅格系统英文为“grid systems”，也有人翻译为“网格系统”，其实是一回事。不过从定义上说，栅格更为准确些，从维基百科查到栅格的定义为：栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。

网页设计中的栅格系统
我给网页栅格系统下的定义为：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。
网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。

栅格系统在现在的网页设计中应用越来越多，从网络上搜罗了一篇关于栅格系统应用的文章：30个最顶尖的基于栅格系统的博客网站设计。

栅格系统的设计原理及应用
那么如何设计一个栅格系统？接下来我们将通过实例，详细的介绍一下网页栅格系统的原理与应用：

在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下：
W =（a×n）+（n-1）i
由于a+i=A，
可得：(A×n) - i = W
这个公式表述了网页的布局与网页“背后”的栅格系统之间的某种关系。我们拿yahoo作例，来看一下栅格系统的应用：

yahoo的网站页面宽度为W=950px，每个区块与区块的间隔为i=10px；如果应用上面的公式，可以推出A=40px，既yahoo首页横向版式设计采用的栅格系统为：
（40×n）- 10 = W
下面我们列出当n等于不同数值时W变化的数值表格：

从表格可以看出：yahoo首页的布局完全是按照栅格系统进行设计的，每个区块的宽度对应的n值分别为：4，11，9。在这里我们看到一个很有意思的事情：只要保证一个横向维度的各个区块的n值相加等于24，则即可保证页面的宽度一定是950px。然而，950px的宽度也恰好就是当n=24的时候，W的宽度值。由此我们得出以下的应用模式：

在栅格系统中，设计师根据需要制定不同的版式或者划分区块，他们的依据将是上面的那张对应表进行设计。这样，一个栅格系统的应用就从此开始了。我们看到，使用栅格系统的网页设计，非常的有条理性；看上去也很舒服。最重要的是，它给整个网站的页面结构定义了一个标准。对于视觉设计师来说，他们不用再为设计一个网站每个页面都要想一个宽度或高度而烦恼了。对于前端开发工程师来说，页面的布局设计将完全是规范的和可重用的，这将大大节约了开发成本。对于内容编辑或广告销售来说，所有的广告都是规则的，通用的，他们再也不用做出一套N张不同尺寸的广告图了……

当然只要你愿意，我们可以衍生出任何一种栅格系统，只要改变A和i的值，这个根据网站的实际情况来制定。那么如何选择合适栅格系统，主要通过“构成要素与程序、限制与选择、构成要素的比例、组合、虚空间与组合、四边联系与轴的联系、三的法则、圆与构成、水平构成这些设计元素规划，来实现比例和谐的平面设计”。比较深奥，我们在这里就不详细阐述了。

呵呵，说了一堆栅格系统的优点。大家可能会问：难道栅格系统真的是完美的么？答案是否定的：对于内容信息不确定导致高度不确定的页面，在高度层面上就无法做到栅格了。当然，具体的情况还需具体的分析与解决，这就需要设计师们在实际的应用中不断的总结经验，不断实践了。

30个最顶尖的基于栅格系统的博客网站设计

sunjia73@163.com(孙佳) — Sun,21 Sep 2008 11:16:15 +0800

Grid based designs is more popular and hot in the internet. A basic well designed grid systems layout can make your designs not only more beautiful and legible, but more usable. A grid is made up of vertical and horizontal lines and is the foundation of nearly every type of visual media. The structure is there to shape the content into proportions that are pleasing to the eye. Below is the top 30 weblogs with grid based designs. Besides, i also searched some tutorials about grid designs for you to further reading.

基于栅格系统的设计在互联网上越来越被广泛使用。一个设计优良的基本栅格系统不但让你的设计更漂亮和易读，还更具可用性。栅格由一系列的垂直线和水平线组成，几乎所有的视觉媒体都以之为基础。清晰的结构将内容分割成愉悦视觉的比例。下面是30个最顶尖的基于网格系统的Weblog设计。此外，我还搜集了一些有关栅格设计的教程以供延伸阅读。

http://www2.jeffcroft.com/

http://ryanbrill.com/

http://www.subtraction.com/

http://www.bs-markup.de/

http://www.alvarocastano.com/

http://www.achtentachtig.com/

http://eswat.ca/

http://5thirtyone.com/

http://www.peterpixel.nl/

http://blog.criticalwebdesign.co.uk/

http://www.youtilize.com/

http://warpspire.com/

http://www.emanuelblagonic.com/

http://www.andyrutledge.com/

http://jonasboner.com/

http://journal.barleyhut.com/

http://www.quicksprout.com/

http://thefightspot.com/

http://www.gapersblock.com/

http://dfckr.com/

http://meiert.com/en/

http://usabletype.com/

http://ideasonideas.com/

http://intensify.org/

http://www.jambor-ee.com/

http://www.buzzingo.de/

http://svenigson.com/

http://riverfrontpark.com/

http://design.weblogsinc.com/

http://www.invalidresponse.com/

延伸阅读：

1. Grids make eyes happy: how to use Grids by Jason Lynes
栅格愉悦视觉：如何使用栅格

2. Grids: order Out of Chaos by About.com
栅格：从混乱到秩序

3. Cutting and sewing grid-based design: Part 1
剪裁+缝纫——基于栅格的设计：Part1
Grid-based design: Part 2, Designing blog theme templates by Michael Angeles
设计Blog主题模版——基于栅格的设计：Part2

4. 五步入门栅格系统设计
Five simple steps to designing grid systems - Preface
Five simple steps to designing grid systems - Part 1
Five simple steps to designing grid systems - Part 2
Five simple steps to designing grid systems - Part 3
Five simple steps to designing grid systems - Part 4
Five simple steps to designing grid systems - Part 5 by Mark Boulton

原文地址：30 Weblogs with Grid Based Design

不成熟的标准化是我们唯一惧怕的

sunjia73@163.com(孙佳) — Mon,08 Sep 2008 12:42:02 +0800

不成熟的标准化是我们唯一惧怕的
The Only Thing We Have To Fear Is Premature Standardization
原文地址：http://yuiblog.com/blog/2008/08/14/premature-standardization/

The web is made of open standards. This was a significant factor in the web’s displacement of proprietary application platforms. Openness is hugely attractive, so much so that the web dominates over competitors with better technologies. The difficult tradeoff that comes with a standards-based approach is that it is difficult to innovate. As a result, the basic technologies of the browser have been stalled for a decade. What innovation we’ve enjoyed, such as the Ajax revolution, has come by mining all of the latent, accidental potential of the existing standards. That potential has been used up.

互联网是由开放的标准组成的。这对互联网代替私有的应用平台是一个重要的因素。开放是非常有吸引力的，也正因为如此互联网凭借更好的技术控制着其他的竞争对手。然而当基于标准的方法来临时，无疑创新会变得越来越困难。结果是，浏览器最基本的技术停滞发展了一段很长的时间。一些让我们欣喜的创新，如AJAX革命等，是一种在现有标准上的再发掘的潜能。然而这种潜能已经几近枯竭。

If we are to go forward, we must repair the standards. This is something that must be done with great care. A revision to a standard is an act of violence, just like any surgical procedure. It should only be undertaken when the likely benefit far exceeds the cost and the pain and the risk. The web is particularly troublesome because it did not anticipate the management of software updates, which is why IE5, an ancient browser, still has more users than Safari and Opera combined. Changes to the standard can put developers in a very difficult position because the benefits to users of some browsers become the seeds of failure for the users of others. Developers must manage this gulf, and it is not easy. Developers are not well served by new standards that make their jobs even harder.

如果我们想继续往前走更远，我们必须修正标准。这是一项必须非常小心的事情。标准的修订是一种暴力行为，如同外科手术一样。只有在标准带来的好处远远高于它本身的耗费及缺点时，标准才能真正被使用。互联网并没有预先的软件升级管理，这使得它成为了一个非常复杂的环境，就比如IE5，一个非常非常古老的浏览器，其用户份额却比Safari和Opera加起来还要更多。正因为如此，标准的改变将使开发者陷入一个非常困难的环境，很多对于某些浏览器的优点却可能变成其他浏览器潜在的错误。开发者必须管理并减小这些差别，但这却是不容易的。同时，开发者未能更好的适应使用新标准也增加了他们工作的难度。

I think it is instructive to look at two approaches to managing innovation within a standards based system, one that I view as a success, and the other not so much. JavaScript was a promising but half-baked language that was irresponsibly rushed to market and then irresponsibly cast into a standard. That standard is called ECMAScript to avoid a trademark dispute. That standard was last revised in 1999.

我觉得，把基于标准的系统和并不十分标准的系统放在一起比较并产生革新是非常有益的。JavaScript是一个非常有希望的语言，但它的自身也非常不成熟，它被过快的不负责任地扔入了浏览器市场，又被不负责任地扔入了标准的圈子里。为了避免潜在的版权纠纷，这项标准被称为ECMAScript。它最后更新的时间是1999年。

It is clear that the language needs to be updated, but TC39 (the committee that is responsible for drafting a new standard) could not reach consensus on how to do it, so it split into two groups, each producing its own proposal. This was a good thing in that competition is healthy, and I believe that competition inspired improvements to both proposals. This was also a bad thing because no standards organization can adopt two proposal for the same standard. Without consensus, both proposals must fail.

非常显而易见的，这门语言需要更新升级了。但是TC39在如何更新的问题上，却不能达到一致。所以他们分成了两个小组，分别实现各自的目标。这样的健康的竞争是非常有帮助的，我也相信竞争会改善两组各自的目标。但是，这也是个不好的事情，因为没有一个标准组织会接受一项标准拥有两个不同的提议。如果不能达成一致，这两个提议都将会失败。

On one side there was the proposal called ES4. It was unfortunate that it adopted that name because it strongly suggested that it was destined to be the Fourth Edition of ECMAScript, a fate that was not certain. The project was very open to new ideas and features, adopting a porkbarrel attitude that was almost Congressional in its expansiveness. Lots of good ideas were included without an adequate analysis of the language as a whole system. As a result, many overlapping features were adopted which would have significantly increased the complexity of the language.

其中一项提议被称为ES4。这个名称的使用很不幸运，因为它强烈的暗示了它一定会是ECMAScript的第四版，然而它并不一定会是。该项目对于新思想新特征非常的开放，并采纳了许多看法，尽管这些思想并没有基于这门语言系统进行充分的分析。结果，许多复杂的特征被采用，并最终提升了整个语言的复杂性。

ES4 was so large and so innovative that there were doubts about whether it could be successfully specified and implemented. More worrisome, there was no experience with the language itself. Would the interaction of features cause unintended problems as we saw in ES1 and ES3? The schedule for ES4 required that the standard be put in place and adopted by the browser makers before that question could be answered. This is a problem because once a bug is inserted into a standard, it can be extremely difficult to remove it. All of the features, considered individually, were attractive. But taken as a whole, the language was a mess.

ES4非常的庞大，也引入了许多新思想，这不禁令人们担心它会不会被成功的接受和使用。更令人不安的是，对于语言的本身，并没有任何使用经验。那些极富吸引力的新特性会不会如ES1和ES3一样产生许多潜在的问题？ES4的制定安排要求这项标准必须被浏览器开发者接受并植入浏览器后才能回答刚才的问题。这会是一个很大的问题，当一个小bug错误的加入了标准，到时候想要去除掉它就会非常的困难了。单独考虑ES4所有的新特性，都是非常有吸引力的。但是全部放到一起，语言非常的混乱。

On the other side was a proposal called ES3.1. Its name indicated a less ambitious proposal, being a smaller increment over the current Third Edition. This project was intended to repair as many of the problems with the language as possible while minimizing the pain of disruption. New syntax was considered only when it was already implemented and proven in at least three of the four major browsers. Feature selection tended to favor necessary improvements over desirable improvements.

另一项提议被称为ES3.1。它的名字暗示它相比于现在的ES3只有较少的变革。这个项目的目标是修复语言中存在的诸多错误。新的句法只有在至少三至四个主流浏览器植入并测试过之后才会被考虑加入。他们更多的选择必须的特性，而不是可拥有的特性。

ES3.1 was more minimal in approach. The set of feature interactions was much smaller and much easier to reason about. ES3.1 is likely to complete its specification and will be the candidate for the Fourth Edition.

ES3.1更容易接受。新特性的吸引力会较小，但是也更容易实现。ES3.1也可能完成它的文档，从而成为ES真正第四版的候选。

ES4 had a large head start (by as much as seven years by some estimates), but was unable to meet its deadlines. Ultimately, the project fell apart when some of the key members left.

ES4的制定起步很早（估计至少7年之前），然而我们看不到它到底什么时候能结束。最终，由于核心成员的离去，这项工程被搁浅。

Some of the features that were in ES4 were reasonable, so a new project, called Harmony, is starting which will look at adapting the best of ES4 on top of ES3.1. The success of this project will depend on the ability of TC39 to do a better job of managing the tradeoffs between innovation and stability, and adopting a discipline for managing complexity. Simplicity should be highly valued in a standard. Simplicity cannot be added. Instead, complexity must be removed.

现在，由ES4引入的一些合理的新特性，重新成为了一项新项目，被称为Harmony。这个项目的成功与否取决于TC39权衡创新与稳定二者的能力，以及对复杂度的管理上。在某种程度上，简约应受到足够的重视，而不应被矫饰。所以，一些冗余必须被剔除。

It turns out that standard bodies are not good places to innovate. That’s what laboratories and startups are for. Standards must be drafted by consensus. Standards must be free of controversy. If a feature is too murky to produce a consensus, then it should not be a candidate for standardization. It is for a good reason that “design by committee” is a pejorative. Standards bodies should not be in the business of design. They should stick to careful specification, which is important and difficult work.

现在看来标准的主体并不是一个创新的好地方。这也正是实验室存在的目的。标准必须经过一致的协商，也必须有充分的辩论。如果一个特性很难达成一致，那么它应该从标准草案中去除。标准的主体不能在有商业目的的情况下设计。它们必须坚持谨慎的设计，这同时是一个相当困难的工作。

I see similar stories in HTML5. The early work of WHATWG in documenting the undocumented behavior of HTML was brilliant. It went off the rails when people started to just make new stuff up. There is way too much controversy in HTML5. I would like to see a complete reset with a stronger set of design rules. Things can be much worse than the way things currently are. Having smart people with good intentions is necessary but not sufficient for making good standards.

我也在HTML5里面看见了很类似的情况。WHATWG的早期对于文档化HTML中没有文档的特性的工作是非常棒的。然而当人们开始只关注创造新东西时，它们开始偏离轨道。在HTML5中存在太多的争议。事情可能会比现在存在的更糟糕。也许，有良好意愿的聪明人是必要的，但是并不足以铸就良好的标准。

淘宝UED 翻译

大型门户网站CSS框架架构及应用

sunjia73@163.com(孙佳) — Sat,30 Aug 2008 11:11:51 +0800

对于大型门户，海量信息平台及多模块，多区域化网站，更需要对CSS，XHTML，的标准化，符合语意的HTML框架，复用性强的CSS代码，这些才能保障你的网站，具有很好的“地基”。

第一部：关于构建CSS框架我们要实现的目的：
1.实现标准化，具备主流平台适应性的前端实现；
2.快速开发，在站点风格确定后，前端不应该成为整个项目里瓶颈；
3.重构的需求，尽可能的让类和区块样式可重用；
4.分离结构和表现的需求，遵守了语义化结构的约定;
5.构架完全符合金融网特色的CSS框架。
6.对代码进行必要的搜索引擎优化。

第二部：关于CSS命名的一些约定：
1.不使用大写形式的类名和id名;
2.尽可能使用描述性的英文单词的组合作为类名和id名;
3.id名及类名的多个英文单词之间使用“_”短横线分隔;
4.按区域进行描述编号例：main01_div01_ul01 (可以理解为主体第一区域第一DIV下的第一个UL)

下来我们要对整个网站及设计稿进行分析，去做符合自己门户结构特色的CSS框架
我们已新浪网为例子:

进行站点结构分析：
整个页面分为：首页，更多页，内容页，专题页，数据中心，新闻中心，频道页，广告……

我们对这些页面进行整理，去发现他们的公共部分，
这些被发现的地方有：CSS的样式,及区域，模块的碎片，我们需要做的是把这些公有的部分提出来。
观察后我们可以把CSS分以下几类：
主体样式表：sjweb.css
font(字体样式，字号，颜色的集合)
layout(框架结构集合)
global(全局默认样式集合)
component（组成页面部分样式表，模块碎片集合）
这些讲统统的被import到sjweb.css主体样式表里，主体样式表做为一个loader 加载新的外来样式，
比如广告样式表。
这样这些页面只需要写一点点属于自己特殊要求的CSS样式代码就可以了。

在构建这个CSS框架的时候有很多细节的东西最好能统一化，比如：行间距，模块之间间隔距离等。
下面是某门户网的首页结构图：

规则：
1.所有area之间，模块之间，间距上下左右为：8 Pixel ;
2.新闻列表颜色#333 ;
3.新闻列表行间距20 pixel；
……等等

调整环境：IE7,ff,IE6,IE5.x,Opera。

PS：其实更多是你在构建的时候细节上的问题，好了不多说了。呵呵

本文作者：孙佳转载需注明来自：www.sjweb.cn 谢谢

查看端口占用程序(80端口被占用的解决办法)

sunjia73@163.com(孙佳) — Mon,21 Jul 2008 19:46:45 +0800

快速查看本机端口占用程序(80端口被占用的解决办法)
TOMCAT启动时总是报"另一个程序正在使用此文件,进程无法访问"的错误，
原来是因为TOMCAT默认的80端口被占用，
到底是什么程序占用了80口呢？
进入CMD，
输入netstat -ano 就可以很清楚的看到本地80口占用程序的PID，
然后再去任务管理器里查找到PID所对应的进程
(如果任务管理器没有PID,查看-->选择列)，
查看是什么软件占用，然后强行关闭或改掉设置。

CSS hack浏览器兼容一览表

sunjia73@163.com(孙佳) — Sat,16 Feb 2008 16:28:22 +0800

CSS hack浏览器兼容一览表

CSS hack是指我们为了兼容各浏览器，而使用的特别的css定义技巧。这是国外摘来的一张CSS hack列表，显示了各浏览器对css hack的支持程度，对我们制作兼容网页非常有帮助。

	Windows													Mac OS X											Macintosh								Other
	IE					Mz	Ns			Op				iC	IE	Mz	Ns		Om	Op				Sf	IE		Mz	Ns			Op		Ko
	7	6	5.5	5	4	1	7	6	4	8	7	6	5	2	5	1	7	6	4	8	7	6	5	2	5	4	1	7	6	4	6	5	3
	7	6	5.5	5	4	1	7	6	4	8	7	6	5	2	5	1	7	6	4	8	7	6	5	2	5	4	1	7	6	4	6	5	3
	IE					Mz	Ns			Op				iC	IE	Mz	Ns		Om	Op				Sf	IE		Mz	Ns			Op		Ko
	Windows													Mac OS X											Macintosh								Other
`voice-family:"\"}\""; voice-family:inherit; property:value;`	Y	Y	N	N	N	Y	Y	Y	N	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	N	Y	Y	Y	N	Y	Y	Y
`p\roperty:value;`	Y	Y	N	N	N	Y	Y	Y	N	Y	Y	Y	N	N	Y	Y	Y	Y	N	Y	Y	Y	N	Y	Y	N	Y	Y	Y	N	Y	N	N
`///property:value;/* */`	Y	Y	Y	Y	Y	Y	Y	Y	N	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	N	Y	Y	Y
`/////property:value;/ */`	N	N	N	N	N	N	N	N	Y	N	N	N	Y	N	N	N	N	N	N	N	N	N	Y	N	N	N	N	N	N	Y	N	Y	N
`div#test`	Y	Y	Y	Y	Y	Y	Y	Y	N	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	N	Y	Y	Y
`head:first-child+body div`	Y	N	N	N	N	Y	Y	Y	N	Y	Y	N	N	N	Y	Y	Y	Y	N	Y	Y	N	N	Y	Y	N	Y	Y	Y	N	N	N	Y
`body>div`	Y	N	N	N	N	Y	Y	Y	N	Y	Y	Y	Y	N	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	N	Y	Y	Y
`html[xmlns] div`	Y	N	N	N	N	Y	Y	Y	N	Y	Y	Y	Y	N	N	Y	Y	Y	N	Y	Y	Y	Y	Y	N	N	Y	Y	Y	N	Y	Y	Y
`@import 'styles.css'`	Y	Y	Y	Y	N	Y	Y	Y	N	Y	Y	Y	Y	Y	N	Y	Y	Y	Y	Y	Y	Y	Y	Y	N	N	Y	Y	Y	N	Y	Y	Y
`@import "styles.css"`	Y	Y	Y	Y	N	Y	Y	Y	N	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	N	Y	Y	Y	N	Y	Y	Y
`@import url(styles.css)`	Y	Y	Y	Y	Y	Y	Y	Y	N	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	N	Y	Y	Y
`@import url('styles.css')`	Y	Y	Y	Y	Y	Y	Y	Y	N	Y	Y	Y	Y	Y	N	Y	Y	Y	Y	Y	Y	Y	Y	Y	N	N	Y	Y	Y	N	Y	Y	Y
`@import url("styles.css")`	Y	Y	Y	Y	Y	Y	Y	Y	N	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	N	Y	Y	Y
`@import "null?\"\{"; @import "styles.css";`	Y	Y	Y	N	N	Y	Y	Y	N	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	N	Y	Y	Y	N	Y	Y	Y
`@media all{/* rules */}`	Y	Y	Y	Y	N	Y	Y	Y	N	Y	Y	Y	Y	N	N	Y	Y	Y	N	Y	Y	Y	Y	Y	N	N	Y	Y	Y	N	Y	Y	Y
	Y	Y	Y	Y	Y	Y	Y	Y	N	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	N	Y	Y	Y
	Y	Y	Y	Y	Y	Y	Y	Y	N	Y	Y	Y	Y	Y	Y	Y	Y	Y	N	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	N	Y	Y	Y
`* html div`	N	Y	Y	Y	Y	N	N	N	N	N	N	N	N	N	Y	N	N	N	N	N	N	N	N	N	Y	Y	N	N	N	N	N	N	N
`*+html div`	Y	N	N	Y	?	N	?	?	?	?	?	?	?	?	?	?	?	?	?	?	?	?	?	?	?	?	?	?	?	?	?	?	?
`i{content:"\"/*"} div{property:value}`	Y	Y	N	N	N	Y	Y	Y	N	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	N	Y	Y	Y	N	Y	Y	N
`/* \/ div{property:value} / */`	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	N	Y	Y	Y	Y	Y	Y	Y	Y	Y	N	Y	Y	Y	Y	Y	Y	Y	Y
`html*#test`	Y	Y	Y	N	N	Y	Y	Y	N	N	N	N	N	N	Y	Y	Y	Y	N	N	N	N	Y	Y	Y	N	Y	Y	Y	N	?	Y	N
`_property:value`	N	Y	Y	Y	Y	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	Y	Y	N	N	N	N	N	N	N
`*property:value`	Y	Y	Y	Y	?	N	?	?	?	?	?	?	?	?	?	?	?	?	?	?	?	?	?	?	?	?	?	?	?	?	?	?	?
`@media tty { i{content:"\";/" "/}} @import 'styles.css'; /";} }/ */`	N	N	Y	Y	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N
`@media tty { i{content:"\";/" "/}}; @import 'styles.css'; {;}/";} }/ */`	N	N	N	Y	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N
`@media tty { i{content:"\";/" "/}}@m; @import 'styles.css'; /";} }/ */`	N	N	Y	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N	N
`/\/// @import "styles.css"; /*/`	N	N	N	N	N	N	N	N	N	N	N	N	N	N	Y	N	N	N	N	N	N	N	N	N	Y	N	N	N	N	N	N	N	N

请认识DOCTYPE

sunjia73@163.com(孙佳) — Thu,06 Dec 2007 22:27:37 +0800

DOCTYPE不可怕，但把它拿走，会让你怕了又怕。

最近在论坛转悠，发现很多朋友提出有关DIV+CSS排版问题，以及IE与FF的兼容问题。什么情况的都有，结果就是一个在各个浏览器下显示异常，很难调整。

我们浏览的大多数网站，或者用Dreamweaver创建一个新的网页文档时，源码的顶部都会有DocType声明，但是很多人没有注意它，甚至在创作时候直接将它删掉，其实这往往就是噩梦的开始。在遵循标准的任何Web文档中，DOCTYPE都是一项必需的元素。它会影响代码验证，并决定了浏览器最终如何显示你的web文档。为了避免DOCTYPE的问题重复出现，我根据手头的资料整理了这篇文档，以备自己及有兴趣的朋友参考。

在默认情况下，FF和IE的解释标准是不一样的，也就是说，如果一个网页没有声明DOCTYPE，它就会以默认的DOCTYPE解释下面的HTML。在同一种标准下，不同浏览器的解释模型都有所差异，如果声明标准不同，不用我说，您自己想就可以了。学习网页标准，浏览器兼容，从哪里开始您自己决定，但是，请认识DOCTYPE：

一、什么是DOCTYPE
DOCTYPE是Document Type（文档类型）的简写，在页面中，用来指定页面所使用的XHTML（或者HTML）的版本。要想制作符合标准的页面，一个必不可少的关键组成部分就是DOCTYPE声明。只有确定了一个正确的DOCTYPE，XHTML里的标识和CSS才能正常生效。

二、DOCTYPE的规则
DOCTYPE声明的写法遵循一定的规则，它指出阅读程序应该用什么规则集来解释文档中的标记。在Web文档的情况下，“阅读程序”通常是浏览器或者校验器这样的一个程序，“规则”则是w3c所发布的一个文档类型定义（dtd）中包含的规则。
每个dtd都包括标记、attributes、properties等内容，它们用于标记web文档的内容；此外还包括一些规则，它们规定了哪些标记能出现在其他哪些标记中。每个web建议标准（比如html 4 frameset和xhtml 1.0 transitional）都有自己的dtd。
以下是从手册上摘抄的规则：
语法：
HTML 顶级元素可用性 "注册//组织//类型标签//定义语言""URL"
可能值：
- 顶级元素：指定 DTD 中声明的顶级元素类型。这与声明的 SGML 文档类型相对应。 HTML 默认。HTML。
- 可用性：指定正式公开标识符(FPI)是可公开访问的对象还是系统资源。 PUBLIC 默认。可公开访问的对象。SYSTEM 系统资源，如本地文件或 URL。
- 注册：指定组织是否由国际标准化组织(ISO)注册。 + 默认。组织名称已注册。
- 组织名称未注册。Internet 工程任务组(IETF)和万维网协会(W3C)并非注册的 ISO 组织。
组织：指定表明负责由 !DOCTYPE 声明引用的 DTD 的创建和维护的团体或组织的名称，即 OwnderID。 IETF IETF。 W3C W3C。
- 类型：指定公开文本类，即所引用的对象类型。 DTD 默认。DTD。
- 标签：指定公开文本描述，即对所引用的公开文本的唯一描述性名称。后面可附带版本号。 HTML 默认。HTML。
- 定义：指定文档类型定义。
　　Frameset 框架集文档。
　　Strict 排除所有 W3C 专家希望逐步淘汰的代表性属性和元素，因为样式表已经很完善了。
　　Transitional 包含除 frameSet 元素的全部内容。
- 语言：指定公开文本语言，即用于创建所引用对象的自然语言编码系统。该语言定义已编写为 ISO 639 语言代码(大写两个字母)。 EN 默认。英语。
- URL：指定所引用对象的位置
为了获得正确的DOCTYPE声明，关键就是让dtd与文档所遵循的标准对应。例如，假定文档遵循的是xhtml 1.0 strict标准，文档的doctype声明就应该引用相应的dtd。另一方面，如果doctype声明指定的是xhtml dtd，但文档包含的是旧式风格的html标记，就是不恰当的；类似地，如果doctype声明指定的是html dtd，但文档包含的是xhtml 1.0 strict标记，同样是不恰当的。

三、选择什么样的DOCTYPE
如上例所示，XHTML 1.0中有3种DTD（文档类型定义）声明可以选择：过渡的（Transitional）、严格的（Strict）和框架的（Frameset）。这里分别介绍如下。
1．过渡的
一种要求不很严格的DTD，允许在页面中使用HTML4.01的标识（符合xhtml语法标准）。过渡的DTD的写法如下：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2．严格的
一种要求严格的DTD，不允许使用任何表现层的标识和属性，例如
等。严格的DTD的写法如下：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3．框架的
一种专门针对框架页面所使用的DTD，当页面中含有框架元素时，就要采用这种DTD。框架的DTD的写法如下：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
使用严格的DTD来制作页面，当然是最理想的方式。但是，对于没有深入了解Web标准的网页设计者，比较合适的是使用过渡的DTD。因为这种DTD还允许使用表现层的标识、元素和属性，比较适合大多数网页制作人员。

四、需要注意的问题
一定要将DOCTYPE声明放在XHTML文档的顶部，上面哪怕多个HTML注释标记都不行。
最好示例代码也加上DOCTYPE，否则效果会有差异。