2008-05-9 上午 - html/css/xml/xsl - CSS
在一个前端技术很牛的BLOG里找来的。的确很牛，对技术要求到了这种境界，不得不服！
显示属性
display
list-style
position
float
clear
自身属性
width
height
margin
padding
border
background
文本属性
color
font
text-decoration
text-align
vertical-align
white-space
other text
content
其实也并非必须如此照此书写顺序，只是养成良好书写习惯，对自己还是有好处啊！在前进的道路中不断美化自己的东西。
2008-05-9 上午 - html/css/xml/xsl - CSS - 优化
1、应该将 CSS 放置于结构的上方（一般放置于 head 元素内）。CSS 是解释型语言，Firefox 和 IE 在等待 CSS 传输完成之前不会渲染任何东西。只有将 CSS 前置，才可在浏览器解析结构时，对页面进行渲染。
导致的问题就是，页面会有一段时间“朴素”，突然之间又“华丽”，用户体验很不好。
2、尽量使用 <link rel=”stylesheet” href=”http://www.planabc/yuanxin.css” type=”text/css”> 的样式导入方式，而减少 @import 的使用，更勿使用多层嵌套的 @import 。因为在 IE 里， @import 相当于将 <link> 放在页面尾部。
2008-05-9 上午 - html/css/xml/xsl - CSS
CSS2.1 中规定了关于 CSS 规则 Specificity（特异性）的计算方式，用一个四位的数字串（注：CSS2 中是用三位）来表示，最后以 Specificity 的高低判断 CSS 的优先权。
Specificity 计算规则：
最后逐位相加数字串，得到最终的 Specificity 值，按照从左到右的顺序逐位比较。
除了 Specificity 还有一些其他规则：
2008-05-9 上午 - html/css/xml/xsl, JS/Ajax/AS - CSS
今天看了aoao的blog，学到了这一招，和大家分享一下。
<!– /* window.onload=function(){ document.getElementById(“test2″).innerHTML=”传说中滴JS测试者。如果你看到我，那JS也生效了”; } <!– */ <!– #test1,#test2{border:3px #000 solid;padding:5px;color:#123456;background-color:#ccc;} strong{color:red;}
在网上运行时还要通过程序输出个“*/*”的头，不然MIME不对有的浏览器不干活。PHP的是这样：
<?header(’Content-type: */*’);?>
理论上在服务器上指定某种后缀的MIME是“*/*”应用也行得通，不过我没有试。把JS跟CSS写在同一个文件特别适合第三方调用的那种，虽然文件大了一点，但能少了一半的请求数，帅帅滴。补充说明，直接这样使用会是两个200的，要节省还要涉及到服务器配置，最少我还不知道单程序可以实现的。
如果你有兴趣，那么复制代码。测试一下。怎么样？神吧！其实也没什么，只是充分利用了注释符。不过还真未曾想到还有此一招。佩服佩服！
2008-05-8 下午 - html/css/xml/xsl - CSS - overflow
今天晚上闲了，去了一些大的门户网溜达了一圈，发现了一个仅 IE6会存在的问题（暂时仅发现IE6），在某些区块上，我的鼠标中键居然失效了。很郁闷，一开始还以为自己的鼠标有问题了。后来一想不对劲，怎么就光在这个网站上就会产生呢？html肯定有问题，这就让我想到了之前在一篇文章里面看到了对overflow这个家伙的一些唠叨。
网页另存为一下。仔细一看，这个让我鼠标中键失效的区块的确实加了overflow这个家伙的，我去掉它以后，再次预览，问题得以解决。看来这个家伙不能乱用噢。
我又立刻去网上查了相关的资料。确有此事，而且问题还不仅仅只有一个。
另外存在的一个问题即，导致键盘的Tab键也不听使唤啦！这下用键盘浏览网页的朋友可就麻烦了（我们不排除会有用键盘操作的用户）。
我要说的是，我一直以来不喜欢用到这个家伙，几乎不用，除非在必须要用到区块滚动条的时候才用（为了节省面积，或者说是版式布局上的需要）。
最后，这个其实只是一个很微小的问题，你可以不在乎。如果你注重用户体验及WEB标准，那么就转变一下自己的观点吧，虽然这个家伙很好用，也的确有时候帮忙不少。
2008-04-19 下午 - html/css/xml/xsl - CSS - float
早之前就已经用过这个方法清楚浮动，但一直以来都不喜欢这样用，有点担心其兼容性。一般喜欢利用一个div元素清楚浮动，习惯问题吧，不过这样也确实简单明了！其实用这个方法也算不上很糟糕吧!偶尔也用用overflow。前段时间看了一篇关于overflow的文章，明白了这个属性要慎用，不到必要的时候还是不用为妙！结果就得出一个这样的结论，一般情况下还是利用伪类清除浮动，某些特殊的地方可以利用一个div元素来处理，尽量避免用到overflow。
下面就来讲讲“伪类清楚浮动”如何应用吧！
<style type=”text/css”>
<!–
.f1{float:left; border:1px #000000 solid; margin:2px;}
.clear:after{ content:”.”; display:block; height:0; font-size:0; clear:both; visibility:hidden;}
.clear{ min-height:1px;}
*html .clear{ height:1px;}
.bbc { border:3px solid #ccc; width:200px; margin:0px auto; text-align:center;}
.bbc dl { text-align:center; padding:0px; margin:0px;}
.bbc dl dt { float:left;}
.bbc dl dt dd { float:left; text-align:left; width:100px;}
.bbc ul { text-align:left; padding:0px; margin:0px;}
.bbc ul li { list-style:none; padding:0px; margin:0px;}
–>
</style>
<div class=”bbc”>
<dl class=”clear”>
<dt><img src=”1.jpg” width=”96″ height=”96″ border=”0″ alt=”" /></dt>
<dd>我和旁边的图片都是带上浮动这个武器的哦！</dd>
</dl>
<ul>
<li>我要试试clear这个家伙到底能搞定这两个带上浮动武器的家伙！</li>
</ul>
</div>
关键就在：
.clear:after{ content:”.”; display:block; height:0; font-size:0; clear:both; visibility:hidden;}
.clear{ min-height:1px;}
*html .clear{ height:1px;}
由于IE的兼容，加了后两句。给其设置了最小高度。现在差不多了吧！
这个可是一个很重要的知识点哦！
2008-03-8 上午 - html/css/xml/xsl - CSS - width
让一个层有个最小宽度，但不局限于这个宽度
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类：
这样写CSS吧：
#container{
min-width: 600px;
width:e­xpression(document.body.clientWidth < 600? “600px”: “auto” );
}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
2008-01-21 下午 - html/css/xml/xsl -
在写XHTML+CSS的过程中，你要如何选择CLASS和ID呢？
比如：<div id=”a”></div>和<div class=”a”></div>
以前，我喜欢用ID，但是现在，我更倾向于用CLASS。其实两者都可以用，并不能说用了ID就是错误的。只是CLASS相对而言比ID更易于控制，我们通常把ID留给javascript或其他后台代码。
一个ID名称在一个页面里面通常是唯一的(也就是只有某一个div能套用它),因此在页面里定义CSS通常最好使用CLASS,这样你可以重复使用你的CSS。
你也可以为一个指定的HTML元素应用选择符，把HTML选择符放置在前面就可以了，所以， input .heluyao { css }会应用在有类“heluyao”的input标记上。
顺便说一点，写样式表的时候最好使用嵌套形式，那样会给以后的修改减轻很多的负担。比如多处地方用了同一个CSS,然而你只需要修改其中的某一处，那么你就不要担心修改了这一处而其他地方也跟着变化了。
欢迎订阅我的博客