pre标签用来显示预格式(preformatted)文本，实际应用中我一般用来显示各种代码。
以前通常会给pre定义这样的CSS，使pre不被过长的文本撑破，而出现滚动条:
pre { overflow: auto; width: 515px; }但是当横向、纵向滚动条同时存在时，很让人抓狂。于是在CSS 3中，white-space有了一个新的值pre-wrap，再加上一些浏览器的私有属性，我们就得到了解决方案：
pre {
white-space: pre-wrap; /* 支持css 3的浏览器 */
white-space: -moz-pre-wrap; /* 老版Mozilla*/
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE 5.5以上 */
}opacity是CSS 3里的一个属性，用来设定元素的透明度。当然现在还只有少部分浏览器支持。
不过各个浏览器都有自己的私有属性来支持,其中包括老版本的Mozilla和Safari：
filter:alpha(opacity)-moz-opacity-khtml-opacity很不幸的是，你没看见Opera，老版本的Opera并没有什么私有属性可以代替opacity。（新版Opera已经支持opacity）
所以以前用CSS设定一个元素半透明的话，可能会这样写:
.opacity{
filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* 老版Mozilla */
-khtml-opacity:0.5; /* 老版Safari */
opacity: 0.5; /* 支持opacity的浏览器*/
}用javascript来设定一个元素为半透明:
object.filter = "alpha(opacity=" + opacity + ")"; /* IE */
object.MozOpacity = (opacity / 100); /* 老版Mozilla */
object.KhtmlOpacity = (opacity / 100); /* 老版Safari */
object.opacity = (opacity / 100); /* 支持opacity的浏览器*/最近不少人问我CSS Validator的时候,发现不少警告(warnings),都是提示“You have no color with your background-color” and “You have no background-color with your color”,很烦人,而且量很大,很难看.其实在不在意还是看个人,但是要明白的是他们为什么这么做?这其中有一个亲和力(accessibility)的因素.文章的大意来自CSS Validator colour warnings are not errors
这些警告源于一个亲和力的因素,提醒你注意运用颜色.CSS Validator想帮你解决你写的样式与用户的自定义样式或者系统的颜色配置之间的冲突.W3C CSS Validator 帮助这样写到:
If you don’t specify color and background-color at the same level of specifity, your style sheet might clash with user style sheets.
问题是这样的,主流的浏览器都可以自己设定背景颜色和文字颜色,比如IE("工具"-"Internet选项"-"常规"-"颜色"),用户如果设定了使用自定义颜色配置,这将会影响到他浏览你的站点时的效果.主要还是体现在背景色和文字颜色上,其实这已经够吓人了(比如文字颜色和背景颜色是相同的...),所以有时候还是有必要去注意某些警告提示的.
错误和警告都有他的原因,你必须学会去理解他们.
“网站前台打杂”现在有了一个很响亮的名字 - “网站前端开发工程师”，但是我是设计师还是开发者呢？以下是一篇讨论这个问题的问题，翻译的有些生硬，浏览不顺的可以看看原文。
翻译至:Are we designers or developers?,作者 Roger Johansson
在站点的关于页面(原作者的about)，我称自己为“开发人员/设计师/应时作家”。这有一点模棱两可，我仍然在寻找一个答案：当别人问我靠什么来维持生计时，我的回答。我是一个设计师？网站开发人员？网站程序员？全部都是？都不是？这是很难用一句简单的话来回答。
我的答案会基于谁来问，什么时候问，为什么问，在什么情况下问。有时我会说“我在网络上工作” 或者 “我是做网站的”，任意一个答案都是真的，但是并没有真正的表达我到底是干什么的。显然给出一个简单明了的答案很容易。
在某个方面，我是一个十足的设计师，虽然最近在做一些没有花哨图案的设计。很多人错误的认为设计单纯的等于图形设计，但是我认为设计也可以是使创意变成现实的过程。当我这么做的时候，我可以称自己为网页设计师。
不可否认，如果“网页设计师”的头衔对我来说只是对工作内容的解释，这违背了我从网络泡沫得来的经验。那经验提醒我许许多多的外行人投身到网络，只是因为膨胀的网络需要更多的人而已。这同时让我想到业余的爱好者们只会使用破解版本的Dreamweaver 或者 GoLive提供的WYSIWYG模式来制作一个网站。所以我发现很有必要称自己为网页设计师。
作为另一个选择，有时我称自己为“网页开发者”。但是问题在于很多人都认为网页开发者更多的做后台程序，而我却很少做此类的工作。但是这听起来比网页设计师更专业。
我们还有什么其他的选择？嗯，还有这么些头衔像UI程序员，前端开发者，UE设计师等等，太多了，然而可以正确表达出我在做什么的却很少，这样对于那些并不是从事网络相关行业的人，就很难理解了。
这真的能成为问题吗？大多数情况下，不是。但是有点棘手的是理发师或者你的邻居并不能通过这些来明白你到底怎么维持生计。虽然“我在网络上工作” 或者 “我是做网站的”看起来很好的回答了问题，但这并没有告诉他们，你做图形设计，程序，或者其他的。
所以我想问那些，并没有真正意义上的做图形设计，但是主要使用HTML, CSS, JavaScript, and accessibility来工作的读者，两个问题：
如果你得到了一个明确的答案，那就向答案的目标进发吧。
首字下沉的效果很常见，特别是以前做WORD文档的时候，效果还不错的。网上目前流行的一种方法是用CSS的:first-letter,实现起来也不麻烦。
.dropcap:first-letter {font-size : 300%;font-weight : bold;float : left;margin-right: 3px;line-height:300%;}为此，还有个首字下沉的wordpress插件。为了练手，想用jQuery实现看看，最后代码如下：
function dropcap() {
$('#content .post .tease').each(function(index) {
var paragraph = $('p',this)[0];
var node = paragraph;
while (node.childNodes.length) {
node = node.firstChild;
}
if (node.nodeValue) {
var text = node.nodeValue;
var first_letter = text.substr(0,1);
if ( /[a-zA-Z]|[\u4e00-\u9fa5]/.test(first_letter) ) {
node.nodeValue = text.slice(1);
$("").addClass("dropcap").text(first_letter).prependTo( paragraph );
first_letter = '';
}
}
});
}