CSS条件注释是一微软从IE5开始就提供的一种非标准逻辑语句，作用是可以灵活的为不同IE版本浏览器导入不同html元素，如：样式表，html标签等。很显然这种方法的最大好处就在于属于微软官方给出的兼容解决办法而且还能通过W3C的效验。

总结一下通用的语法是这样的（注意红色部分）：

<!--[ if rang IE no]>
......
<![ endif ]-->

“rang”的取值有以下几种：

• lie: Less than or equal to的缩写，表示小于或者等于
• lt: Less than的缩写，表示小于
• Gte: greater than or equal to的缩写，表示大于或者等于
• Gt: greater than的缩写，表示大于
• !: 不等于，编程语言中逻辑非的符号

“no”即表示IE的具体版本号，如：5,6,7,8

“……”省略号表示在以上条件下显示出来的html代码，如:

<!--[ if lte IE 6]>
<style type="text/css">
	body{ text-align:center; }
</style>
<![ endif ]-->

这条代码表示：在IE6以下版本的浏览器中body元素的文字对齐方式为居中。

使用缩写的代码行式自然有很多好处：如加快代码输入速度，减少CSS文件大小，便于阅读等。那好吧我们研究一下。大概总结了四种：

1.盒模型代码简写

关于边框如：

• border-color:#f00;
• border-with:1px;
• border-style:solid

可以简写成：

border:1px solid #f00;

关于margin或padding如：

• margin-top:10px;
• margin-left:15px;
• margin-bottom:16px;
• margin-right:17px;

继续阅读 »

听着挺新鲜的，其实现起来很简单。让我忽发其想的是网友说到这个网页中幻灯片的效果：http://www.fullyillustrated.com/portfolio/

当你鼠标移动上去的时候图片会由黑白变成彩色的效果。刚看风的时候还以为用了js或者jquery呢。再用firebug一看就明白了：用到的只是一个简单的css sprite技术。

步骤是这样的：

1.先把你想要做的图片放到PS里面进行去色处理-“图像–调整–去色”或者“ctrl+shift+u”

2.将此图和原图片整合成上下两张的图片，如下图：

3.下一步写下代码：

xhtml代码：

<div id="box"> <a href="#"> <span></span> </a> </div>

CSS代码：

a {
	float:left;
}
#box span {
	border:3px solid #ccc;
	display:block;
	width:170px;
	height:120px;
	background:url(flower.jpg) center top no-repeat;
}
#box a:hover span {
	background:url(flower.jpg) center -120px no-repeat;
}

查看效果及代码