我认为这是目前最好的css2.0教程，分类讲解，而且还有源码和范例。已经上传到我们的ftp服务器，在incoming的根目录下，文件名字叫css20.exe。如果大家认为好，请推荐给你的朋友。

[p>今天找到一个探讨css表现能力的网站：

[p><a href="http://www.stunicholls.myby.co.uk/index.html"]http://www.stunicholls.myby.co.uk/index.html[/url]

[p>    如果不是亲眼所见，我绝对不敢相信css对于表现层面有如此之大的控制能力。或许有些人说，flash可以做得更精彩。没错，flash的变化更为丰富，但是不要忘记：google是搜不到flash当中的文字的，而且以文字为主的浏览器也不可能正确识别（诸如手机、pda等等，还包括视力障碍人士的阅读器），所以flash不可能成为表现文字的主要方式。尤其中文不可能，用flash表现文字会使文件非常臃肿。这不仅仅是浏览者带宽问题，更重要的是网站本身占用的服务器带宽流量是要花钱买的！

[p>    下面是几个很有意思的例子，可能你也不相信是css完成的。
1、左边的滚动栏（opera无效）
<a href="http://www.stunicholls.myby.co.uk/boxes/scrollbars.html"]http://www.stunicholls.myby.co.uk/boxes/scrollbars.html[/url]
2、css框架（你能用html实现吗？）
<a href="http://www.stunicholls.myby.co.uk/layouts/frame.html"]http://www.stunicholls.myby.co.uk/layouts/frame.html[/url]
3、翻转按钮<a href="http://www.stunicholls.myby.co.uk/menus/definition.html"]http://www.stunicholls.myby.co.uk/menus/definition.html[/url]
4、图片展览
<a href="http://www.stunicholls.myby.co.uk/menu/gallery.html"]http://www.stunicholls.myby.co.uk/menu/gallery.html[/url]

<h3 align="center"]CSS为进入黄金时期做好准备了吗 </h3>[p>作者： ZDNet China
Friday, January 9 2004 12:36 PM 

[p>    ESPN最近宣布，它特别地使用了基于开放标准的层叠样式表（CSS）重新设计了Web站点。对标准化社区来说，这是非常鼓舞人心的。该站点的重新设计将重心放在利用CSS取代HTML表格上。自从Internet的起步阶段，表格就已经成为Web开发的主流，但其重心最终会转移到基于CSS的开发上。

[p>   CSS的演化
    当前有两个CSS的版本。CSS第一版（CSS1）允许开发人员指定Web页面里的样式，例如尺寸、颜色和元素的字体。第二版（CSS2）加入了对定位（positioning）的支持，简化对表示布局（presentation layout）控制和格式化（formatting）的任务。CSS2使ESPN放弃了表格，从而实现了进步。现在正在开发中的第三版会探索将CSS划分为模块。该版本离正式发布为时尚早。

[p>    如果你是一个经验丰富的Web开发人员，一定清楚处理HTML表格所固有的令人头疼的问题。在嵌套表格里，这个困难又有所增加，其复杂性让更改和更新变得特别麻烦。插入表格的一个有力理由是表达列表数据，但是要明确header正确地定位不再需要表格。此外，统一Web标示语言推动力正在增强推动CSS2发展的力量。

[p>    获取动力
    设计符合可访问性指导方针的网站要求数据和表示的分离，这就明确地要求使用CSS而不是传统的表格。分隔的内容和表示也是同XHTML一起使用时不可缺少的部分，换句话说就是要求使用CSS。在当前，Internet上充斥着完全依赖于HTML表格来进行页面布局的Web网站，而且现在还没有简单的方法来清除原来存在的大量代码――所以强烈建议现在就开始进行无表格的设计，从而为未来铺路。

[p>    您需要做什么？
    对于仍在使用现有技术的开发人员来说，标准常常和现实的期望存在冲突。但是就CSS而言，浏览器软件的发展已经赶上了标准的发展。那么，您在未来会放弃使用表格吗？或者您以抛弃了表格很久，可您是否已经完全熟悉掌握了CSS？加入下面的讨论，把您的想法同Builder社区的成员分享。

[p> 

伟大的hofman先生经常有些创见，我辈的作用也就是把他的想法记录下来，好比《论语》、《圣经》什么的都是这么创作出来的 ：D前几天听他高论一番，怕自己忘记，赶紧记下来，没经过本人修订，^_^。

其实他的本意只是为自己的朋友建立一个好用的同学录――因为传统的同学录太不好用了，其实就是个留言本，有些还要收钱。hofman忍无可忍，要为自己的同学创建以博客为主导的同学录。

这个改变看起来好像只是时髦的举动，现在大大小小网站动辄就要加上博客。其实这是一种根本交往方式的变化。

传统的网络交往方式的主导是BBS+IM，还有聊天室。那么让我们看看如今谁利用地最多？无所事事的家伙是网络交往的主力！因为他们有得是时间。这也就难怪，网络交往充斥的是大量无效信息和错误信息。因为这种网络交往的方式本身就有问题：BBS按照时间排序的方式导致有见解的文章会很快就沉下去，往后很难找到；IM若想起作用，必须满足交流双方同时在线的条件；聊天室更是有闲人的乐园。――――所有这些都不是正常的、忙碌于社会中的人的正常交往渠道。

博客表现的则是正常人的正常生活中的思考、行为和情感，象木子美这样的并非博客常态，而象精英技术人员那样运用博客也不是博客的全部，因为他们本身已经有足够的能力和其他渠道发布自己的信息。正是普通人，最为方便借助博客来记载并且发布、交流自己的日常生活轨迹。

所以，hofman提出，博客应该是虚拟社区的基础。在这个基础之上，bbs和聊天室才有意义。这就如同一个现实小区里面，居民自己的公寓是基础，而会议室和咖啡厅是附属设施一样。居民的大部分时间是在起居室之中度过，只有特定的时间才会去咖啡厅会朋友，去会议室讨论共同感兴趣的话题。

现在的网络虚拟社区，恰恰如同华丽的社区，充满商店、酒店、书店和咖啡店……，但是却没有居民住宅！大家为了聚会而聚会，既然对对方的日常生活都不了解，那么大家见面只能是进行深思熟虑的胡扯――这就是为什么社会主流对当今虚拟社区不满的原因。

博客不会解决所有的虚拟交往问题，但是它至少为我们提供了一个真实交流的基础：如果博客里面没有可以夸张和撒谎的话。木子美女士恰恰是滥用了博客，就如同小区分配她一套房间，但是她却坚持不在房间装上任何窗帘一样。

地址：www.csszengarden.com
下面7张图像，都是出自同一网站的首页截图。大家仔细观察一下可以看到，其中的文字内容是完全一致的，没有丝毫差别。但是通过简单的css风格选择（就是其中Design罗列的部分），网页可以轻松展现出截然不同的视觉风格和排版次序。其中遵循的原则就是形式（css）与内容（xhtml）分离的思路，这在以往运用table来进行网页排版的时期是不可完成的任务。利用table来排版，顶多能够完成基本色调的变化，象是如此改头换面的风格重置，必须要借助新的webstandard排版技术。

web标准的投资回报(ROI)
作者：阿捷 2004-7-6 0:17:49
原文作者：D. Keith Robinson
原文出处：asterisk
原文发表时间：2004年6月1日
用web标准开发能够带来实际利益，这一点还有人怀疑吗？

如果有，我已经为您准备了一些非常引人注目的证据，特别是一些基于CSS设计带来的好处。我将展示给您一组真实的数据，展示给您看采用web标准所带来的、非常明显的投资回报(RIO:Return On Investment)。

我翻查了二个(在范围和交付上)非常类似的网站项目的发票，并记下它们的数据。其中一个在2001年完成，另外一个在2003年底刚完成。我将展示给你看二个项目在花费时间、精力和金钱上的不同，告诉你使用web标准所获得的实际效果。那非常令人惊异。

附带的，我也将说说我们最近才完成的一个医院项目。并不说它完成得多么棒，只是想说通过使用web标准技术，该项目获得了什么真实益处。

分解项目
下面将先给你看看项目的总体数据，它们大部分是精确的，少量的不得不估算的数据，我也会标明。我同时将展示给你相关数据，但并不包含项目的所有事。为了说明方便，我将我的工作成本评估为100美元/每小时。当然这些项目实际的成本评估并不相同，这样做只是为了比较起来有相同的基线。

在数据后面，我将注释说明有关的项目情况并解释这些数据的的含义。

所有这些项目都是比较简单的手册型(brochure-type)站点，采用服务器端包含技术实现，大部分页面是静态的，几乎不需要定置开发复杂的应用程序。

项目一:2001
数据

页面：56页
花费我的时间：112小时
花费在web开发上的时间：80小时(最初完成用了大约40小时，后来调整修改用了约40小时。)
项目总计天数：195天
总成本：11200美元(我的成本100美元/小时，总计11200美元，其中8000美元用于web开发。)
细节说明

很明显，这个项目非常简单，56页花费112小时，从开始到结束前后大约6个月。我从中赚了一笔，但你肯定在想为什么花了这么长时间，这听起来可不怎么好。

站点制作用了相当保守的方法：表格、图片和少量CSS。每当客户有一点的改动意见，往往就要花许多的时间来修正。

随着项目进展，菜单改变了，内容需要重做。一般来说客户都一样，服务小客户不会比大客户更容易。因为非标准化开发非常麻烦，加上我也没有用CSS，我不得不花费许多时间重新在photoshop里面制作导航图片。我记得当时用的表格布局，起初创建的时候还算简单，但随着时间推移变得越来越难以修改。

在我开始学习使用web标准之前，我已经习惯于用传统保守的方法开发网站。类似第一个项目这样的情况非常典型，为了设计得更好，不知道要修改多少次！

项目二:2003
数据

页面：82页
花费我的时间：32小时
花费在web开发上的时间：19小时(最初完成用了大约10小时，后来调整修改用了约9小时。这不包括内容制作花费的8小时)
项目总计天数：15天
总成本：3200美元(我的成本100美元/小时，总计3200美元，其中1900美元用于web开发。)
细节说明

这个项目在许多方面都非常类似第一个项目。网站基本上是静态的，有大量的修改和调整。说实话，这位客户非常有组织性，回应我的emai l很及时。但总的来说，与第一个项目的客户没太大区别。

你可以看到在时间、精力和成本上两个项目有非常大的不同。第二个项目成本低于6000美元，只花费了32小时，项目期限不超过一个月。而页面的制作量又比第一个项目多。

网站采用web标准开发。一旦我做好了模版，修改就非常容易。我可以集中时间调整内容和界面，或者任何时候单独调整。我想不用我强调这产生了多少的变化。

很明显，我用了更少的成本在这个项目上。而且，用第一个项目花费的时间，我几乎能做12个类似第二个的项目，你能想象这样对我来说有多大收益。这样做，我既能为客户节约开支，又能提高我自己的工作成本评估(获得更多收入)。

投资汇报(ROI)

我想现在非常清楚了，采用web标准开发能够节省时间和金钱。我必须承认，学习和掌握新知识需要一个过程，特别是当修补CSS来适应IE会增加项目时间，但即使这样---还是值得的。

为了进一步说明这个观点??象上面的项目那样切实明显。这是一个正在为大量群众服务的站点，我们需要处理大量的已有的遗留下来的内容(内容制作非常困难)。我同样列出项目的一些数据，但这个案例与第一、第二个项目不太相同。

项目三:2004
数据

页面：65页
花费我的时间：65小时
花费在web开发上的时间：15小时(最初完成用了大约8小时，后来调整修改用了约7小时。内容制作时间又长又困难约30小时，主要是因为修改原有代码)
项目总计天数：32天
总成本：6500美元(我的成本100美元/小时，总计6500美元，其中1500美元用于web开发。)
细节说明

这个项目预计花费的时间比实际完成要长得多。因为我们的web开发团队处于内部客户和外部用户之间。我们既要设计好页面细节，又不能停止内容的每日维护，我们非常可能做砸。

因为我采用了CSS建造站点，使我能够在设计全部完成前先处理内容，并允许站点不断前进。我花费了非常多的"我的时间"在这个项目上，注意"我的时间"和"web开发时间"的差别，如果我花更多时间在web开发上，这个项目就不会这么顺利了。

理想情况下，应该与客户和用户有更多的交互沟通，但我们的web开发团队不得不在糟糕的情况下保持项目的推进。基于CSS和web标准的开发让我们做到了这一点。终于，最大的阻碍被克服，我们开始转换原有的内容。坦白说，我们需要大量时间来完成，幸好时间还比较多，最后居然在最终期限前交付了项目。

真的，项目并不完美，我不得不等待设计是否被最终定稿。如果不是CSS的强大功能帮助减轻设计和内容的变更，这个项目很可能要延期，这样就会增加医院的成本。

所有的工作仅仅只用了一月多点，这在我已经做过的医院项目中是令人惊异的。web标准对项目的帮助促进已经对我们的处理方法产生了积极的影响。

总结
当你分析上面例子可以非常简单得出结论：web标准能节省你和你的客户的时间和金钱，它不是一个银弹，而是在正确方向上的巨大一步。

参见“禅意花园”。
http://www.csszengarden.com/，运用一下首页的各种Design，要是有一天我们的blog也有如此简易的“化妆”方式该多么美妙。谢谢小圣的那篇《css布局入门》，本来以为拣到的是条普通绳子，没想到绳子那头还栓这一头大牛呢。
希望早点学会新的方法，以免hofman被一大堆嵌套在一起的table弄得心烦意乱。
“快快回头吧，迷茫的孩子们。通向地狱之门是由透明分隔gif图像和嵌套表格铺成的！”^_^
如果你不知道我在说什么，http://www.onestab.net/seybold/index.html有个很好玩的简要教程。

Alternative Style: Working With Alternate Style Sheets

by Paul Sowden http://www.alistapart.com/articles/alternate/

So you've got a web page. You’ve marked it up with structural XHTML. You’ve also been a good little web developer and used style sheets to control what your document looks like. You’ve even gone the extra mile and created several alternative style sheets to show how hardcore you are.

Great. But now you need a cross-browser way to dynamically switch between the style sheets.

Styling your site
Style sheets can be associated with documents using a list of link elements in the head. There are three different relationships external style sheets can have with the document: persistent, preferred, and alternate.

Persistent
These style sheets are always enabled (they are always “on”) and are combined with the active style sheet. They can be used for shared rules common to every style sheet. To make a style sheet persistent, the rel attribute is set to “stylesheet” and no title attribute is set.

To make the style sheet paul.css persistent, the following link element would be included in the head:

<link rel="stylesheet"
type="text/css" href="paul.css" />
Preferred
These style sheets are enabled by default (they are “on” when the page is loaded). They can then be disabled if the user selects an alternate style sheet.

To make a style sheet preferred, the rel attribute is set to “stylesheet” and the style sheet is named with the title attribute.

Several preferred style sheets can be grouped together by giving them identical title attributes. These grouped style sheets are then all enabled and disabled together. If more than one group of preferred style sheets are declared, the first group takes precedence.

To make paul.css preferred, a title attribute is added, giving the default style a name.

<link rel="stylesheet"
type="text/css" href="paul.css"
title="bog standard" />
Alternate
These style sheets can be selected by the visitor as alternatives to the preferred style sheet. This allows the visitor to personalize a site and choose his or her favorite scheme. They can also be used for accessibility.

To specify an alternate style sheet, the rel attribute is set to “alternate stylesheet” and the style sheet is named with a title attribute. As with preferred sheets, these style sheets can also be grouped together by giving them identical title attributes.

Using the previous example again; to make paul.css into an alternate style sheet, the keyword “alternate” is added to the rel attribute.

<link rel="alternate stylesheet"
type="text/css" href="paul.css"
title="wacky" />
Note that these relationships only apply to external style sheets which are included using the link element.

Swappin’ Styles
When a document is initially loaded, the persistent and preferred style sheets are applied to the document. The alternate style sheets can then be selected by the user. The W3C tells us that the browser should give us a choice of the style sheet we want to use, and suggests that perhaps a drop？Cdown menu or tool bar will be provided.

So far, so good. We have several style sheets and the visitor can choose their favorite from a menu. But then we encounter a problem. A major one. Mozilla provides a menu to select the style sheet we want to use under the view menu item. But Microsoft Internet Explorer (MSIE) provides no such menu. So we have several style sheets, and no way to access them in MSIE.

Here’s where a little bit of JavaScript can be used along with the DOM to provide a way for MSIE and Mozilla users to select the style sheet they want to use. Their preference can also be stored in a cookie. And because we are using the link tags as the W3C tells us to, the JavaScript doesn’t interfere with the menu in Mozilla, and it degrades very gracefully.

The Script
First we need the script to be able to differentiate between the three different types of style sheet. This is relatively easy to do, as we only need to check two of the attributes of each link element.

Is it a link to a style sheet?

HTMLLinkElement.getAttribute("rel").indexOf("style") != -1
Is there a title attribute?

HTMLListElement.getAttribute("title")
Does the rel attribute contain the keyword "alternate"?

HTMLLinkElement.getAttribute("rel").indexOf("alt") != -1
Note that we check for the string “alt” because some browsers accept the keyword “alternative” in place of “alternate.”

Using these three checks we can write a function to switch style sheets. This involves looping through every link element in the document, disabling all preferred and alternate style sheets that we don’t want active, and enabling all preferred and alternate style sheets that we do want active.

Note that only preferred and alternate style sheet link elements will have a title attribute.

The change function looks like this:


function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
Cookies
Now we can change the style sheet. Cool. We have a more personalized page. Excellent. But we don’t have a personalized site. The preference is only applied to the current page; when we leave the current page the preference leaves with us. This situation, however, can be rectified with a cookie.

To store a cookie we need another function to return the current style sheet. We also need two functions to store and read the cookie.

To return the current style sheet we look for an active preferred or alternate style sheet and check its title.

First we loop through all the link elements in the document again. We then check whether the link is a style sheet. If it is, we check whether the style sheet has a title. This tells us that the style sheet is either preferred or alternative.

The last check is to see whether or not the style sheet is active. If all three checks return true, we have the current style sheet and we can return the title.

The function ends up looking like this:


function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("title")
&& !a.disabled) return a.getAttribute("title");
}
return null;
}
As this is an article on style, and cookies are a completely different topic, I won’t explain the cookie functions here, but I will include them for your convenience (these functions are written by ALA author Peter-Paul Koch).


function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca;
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
To use these cookie functions, we need to add onload and onunload event listeners to the window.

onLoad
There is a w3c specified DOM Level 2 attribute, “disabled,” that is set to false when a style sheet is applied to the document. This attribute is correctly implemented in Mozilla, but unfortunately not in MSIE.

MSIE does have a proprietary HTML attribute, also called “disabled,” that applies to link elements. This attribute is initially set to false for all link elements.

To set the MSIE disabled attribute to match the DOM Level 2 disabled attribute, we can call the setActiveStyleSheet() function with the name of the preferred style sheet.

To find out which style sheet is the preferred style sheet, we need another function. Because this function is so similar to the getActiveStyleSheet() function I’m not going to explain how it works, but here is what it may look like:


function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
In the onload function, we first set a title variable. This either holds the value of the previous style sheet that is stored in the cookie, or if there isn’t one, the title of our preferred style sheet. To keep things logical, let’s call the cookie “style.”

Next we call up the setActiveStyleSheet() function passing the title variable as the title. Our onload function looks something like this:


window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}Note that it may be desirable to call this function before the onload event as well, causing the document to “paint” with our style sheet preference.

If you choose to do this, make sure the function is called after the functions and the link elements have been defined.

onUnload
To save the cookie in the onunload event is simpler. All we have to do is use the getActiveStyleSheet() function to return the active style sheet, and save this in a cookie. Using the function to store a cookie we will end up with something like this:


window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
Puttin’ it all together
To use these functions to make your website more sexy, you need to include them in your document. To make it easy, I have put them all together in a javascript file, ready for you to download and add to your site.

Download styleswitcher.js
To include the javascript file, you add a script element to the head of your document, making sure that it is put below all the style sheet link elements you have. The HTML would look like this:

<script type="text/javascript"
src="/scripts/styleswitcher.js"></script>
To allow the visitor to change the active style sheet, you could use javascript onClick events. For example, to have the option to switch between two themes with titles “default” and “paul,” you could use the following HTML:

<a href="#"
onclick="setActiveStyleSheet('default');
return false;">change style to default</a>

<a href="#"
onclick="setActiveStyleSheet('paul');
return false;">change style to paul</a>
Once the visitor has selected a theme, it will be stored in a cookie. To use the same theme throughout your website, the same style sheet and javascript link elements should be included in the head of every page of the site.

That’s all, folks!
There you have it, a customizable website that uses link elements to link to style sheets as the W3C has told us we should. Enjoy!

Paul Sowden is a teenager from London, England. He believes the web would be a better place if everyone used standards？Ccompliant design techniques.

使用DIV之后,什么时候使用TABLE
作者：allan 2004-11-9 15:47:29
作者：allan
转载自：Allan.Blog(本文经作者同意转载,版权归作者所有.如果您需要引用或转载请与作者联系。)
原文发表时间：2004年11月9日
今天有一好友MSN上突然问我这个话题,突然想到其实在论坛里面,关于DIV和TABLE表格的使用疑问有不少人发过贴子问过,这里我想整理一下我的思路!

关于表格
使用WEB标准之后,并不是说排除表格的使用,表格并不是鸡肋,而正好相反是一道大餐, 之所以在很多关于CSS布局的文章中常提到"为什么使用表格排版是不明智的"这句话,可能是大家对他的理解有误,这里注意一点"使用表格排版"是"不明智"的.指的是我们使用了很多年的,用表格来排版是不明智的,表格归根截底是一种显示"数据"的方式,大家可以想象一下EXCEL,表格就是起这个使用的,有的时候信息使用表格显示让我们能清晰易读,所以才使用表格,比如公司员工联系表,产品与型号对应表等.

那么所谓表格大餐呢,其实意见上升到了一个层次,也就是说你如果能像专业市场分析公司那样,灵活使用表格来显示客户数据和调查数据等消息的时候,那才是真正利用了表格的优势.

所以,关于那句使用以久的话,应该改为"使用表格作为网页排版, 布局页面元素是不合理的,表格是用来显示数据的"。

关于其它元素
我这里按我的使用经验,把XHTML标准中的一些元素,分为三大类:

第一类是我称之为辅助布局设计元素:
这里我指的是DIV,SPAN等,这类元素的主要功能是用来布局整个页面的,灵活使用这些元素的各种属性,可以让你的页面表现丰富多彩.
第二类我称为结构化元素或叫信息元素
这里指的是TABLE,UL,PRE,CODE类元素是一种信息显示与整理方式,比如TABLE很明显就是用来显示表格信息的,UL是用来显示列化信息的,当需要用表格或列表的时候,用这二种方式来显示是明智的。
第三类指的是 这样的,完全是为了实现一些功能,如填上关键字的META keyword,还有做链接的A。
那么正确的符合标准的设计思路是:

使用DIV等布局元素来制作页面的设计布局,定位,色块,图片等
使用TABLE,UL等这样的元素来显示页面中需要展示数据

当然,DIV也起整理数据的作用,使用DIV的ID属性可以很方便的将一个DIV作为一个你名命的数据块。

所以使用WEB标准来制作网站,实际是一个信息合理化整合的一个过程,什么地方该用什么元素还是照用不误,别把表格当布局工具就行。

初学web标准的几个误区
出处：网页设计师
责任编辑：pcedu

[04-8-18 10:08] 作者：阿捷


　　非常高兴地看到很多设计师开始关注和尝试使用web标准制作网页。但从网友们的问题和制作中发现几个问题，在这里特别提醒一下：

1.不是为了通过校验才标准化。
　　web标准的本意是实现内容(结构)和表现分离，就是将样式剥离出来放在单独的css文件中。这样做的好处是可以分别处理内容和表现，也方便搜索和内容的再利用。

　　W3C校验仅仅是帮助你检查XHTML代码的书写是否规范，CSS的属性是否都在CCS2的规范内。代码的标准化仅仅是第一步，不是说通过的校验，我的网页就标准化了。我们不是为了虚名，或者向别人炫耀：“看我的页面通过了校验”而去标准化，我们的目的是为了使自己的网页设计工作更有效率，为了缩小网页尺寸，为了能够在任何浏览器和网络设备中正常浏览。

　　请大家沉下心来，仔细研究和理解web标准的内涵。网络上已经充满了不要浮躁和虚荣，请不要将这种风气带到web标准应用中来，这样做只会影响和损害web标准的推广。

2.不要用传统的表格思维来套div
　　“CSS布局就是将原来用table的地方用div来替代，原来是表格嵌套，现在是DIV嵌套。”这种观点是错误的！

　　请跳出原来表格布局的禁锢，抛弃一个td接一个td放置图片和内容的思维方式。我们上面说过web标准的目的是分离内容和表现，你可以这样思考，页面里有的仅仅是内容，没有修饰的情况下，它看上去就是一张白白的页面，上有一些文字和图片(这个图片是指内容中的图片，是有真实意义的图片)。这些文字图片仅仅是依次罗列下来，只有结构，没有任何样式。然后加入表现，将所有修饰的图片作为背景，用C SS来定义每一块内容的位置、字体、颜色等。

　　这样制作的页面才是内容与表现分离的，就是说，当你抽掉css文件，剩下的就是干净的内容。这样才能在文本浏览器中阅读，才能在手机、PDA中阅读，才能随时修改CSS实现改版。

3.不必为每块内容都建立一个id
　　有网友抱怨css文件太大、太复杂。仔细看他们的代码，发现原因是他们对每块内容、甚至每句话都定义一个div，建立一个ID。这一方面是对样式表应用的不熟悉，另一方面也表现出对web标准没有彻底理解。

　　我们知道内容都是有结构的(如果不明白，请阅读：理解表现和结构相分离),相同的结构的内容我们可以用同一个样式来定义，比如相同级别的标题、正文、图片。对于多次引用的样式可以用class来定义，不需要每个都用id；另外也不是说一定要用<div>，你完全可以用<p>来代替，同样都是块级元素，一样有盒模型的七个参数，<div>仅仅方便浮动。

　　至于仅仅为了行高、间距、一个修饰图片而增加额外的div，我想随着对CSS的应用和理解，你很快就可以省略掉这些。我们反对用DIV的嵌套取代table的嵌套，这没有任何意义，不能体现内容的结构化。希望大家多研究CSS，写出最简练，最有效的样式表。

4.不要因为一点挫折就轻言放弃
　　我想这是一个态度和处事方法问题，这不仅仅针对学习web标准。学习任何新知识，接受新概念，都有困难，特别是需要你改变原来已有的习惯和思维时。唯一的问题就是：你认为学习web标准是否值得？你可以问问自己：你是否认可web标准带来的这些好处(简化代码、加速开发、压缩文件尺寸、提高下载速度、更好的易用性、获得更多用户、更易于维护、多平台兼容)？你是否觉得世界通用的XML离你还很远？你是否认为现在掌握的HTML知识就已经足够了？

　　自从99年以后，网页制作技术在国内就没有怎么进步和变革过(除了flash的兴起)，而在国外前进的脚步就一直没有停止过，xhtml1.0、xhtml1.1、xml、xsl...，W3C和各大软件公司都在不断的研究和推进web技术，使它更方便、更有效、更强大。web标准的应用和推广国外已经开展了八年多(以zeldman的web标准组织网站为起点)，虽然困难重重，但正在逐步被人们接受和认可。为什么我们依然陶醉在网站表面的“繁华”上，不去思考页面背后本质的东西。

　　你愿意中国继续落后吗？你愿意自己继续落后吗？一切决定在于你自己。