CSS小技巧
WEB设计，就是要以最简洁的HTML来实现想要的效果，实际工作中也逐步收集一些常用的CSS小技巧，分享给大家，也集中在这里供自己查阅。
1、网页背景图片居中
<style>
<!--
body {
background-color:#eee;
background-image:url(bg.jpg);
background-repeat:repeat-y;
background-position:top center;
background-attachment:fixed;
}
body { background:#eee url(bg.jpg) repeat-y top center fixed; }
-->
</style>
其中:
background-color:#eee; 网页背景默认为灰色，无背景图片、背景图片未加载成功或背景图片无法布满整个页面时起作用。
background-image:url(bg.jpg); 为网页背景图片。
background-repeat:repeat-y; 实现背景图片只纵向平铺，做网页整体边缘效果时常用，如渐变背景图平铺。
background-position:top center; 实现背景图片[top]上下顶端对齐左右中间[center]对齐效果。
background-attachment:fixed; 实现背景图片不随网页移动效果。
－－－
2、CSS字体属性简写
<style>
<!--
body {
font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:"Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体, sans-serif;
}
-->
</style>
简写：body_j { font: bold italic small-caps 1em/1.5em "Lucida Grande", Verdana; }
注：这种简写方法只有在同时指定font-size和font-family属性时才起作用。当没有设定font-weight, font-style, 及font-varient时，浏览器会使用缺省值。
定义规则：font-style font-weight font-size line-height font-family；而color设定文字颜色需要单独进行定义。
－－－
3、同时使用两个类
一般我们设计时都只给一个元素设定一个类（Class），事实上，我们可以同时使用两个类：
<p class="text side">...</p>
同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。
注：对于一个ID，不能这样写<p id="text side">...</p>
－－－
4、去掉超链接的虚线
当我们点击一个超链接时会在外围出现一个虚线轮廓，在FireFox下可以很好地处理，只需要在标签样式中加入outline:none;就可以解决。
<style>
<!--
a {
outline:none;
}
-->
</style>
不过这个CSS在IE中并不支持，我们可以用htc来删除超链接虚线框，先建立一个htc文件，如a.htc，内容如下：
<public:attach event="onfocus" onevent="example()" />
<script language="javascript">
function example(){
this.blur();
}
</script>
然后在CSS中引用这个htc就可以了：
<style>
a {
behavior:url(a.htc)
}
</style>
－－－
5、另一种盒模型Hack
<style>
<!--
div {
padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;
}
-->
</style>
由于IE5解释不了冒号前的/**/（或者说解释到/**/就停止了），而冒号后面的/**/又会使IE5.5忽略后面的值，因此此方法可以对IE5.x隐藏正确值，而不会影响IE6+和Firefox/Mozilla的渲染。
示例定义不同浏览器的上边距：
margin-top: 3px !important; margin-top: 3px; margin-top/**/:/**/ 4px;
Firefox会选择第一个值，因为它懂!important的含义，即使其它两个值它也读到了，但它很“坚定”；IE5.x会读到/**/前停止，因此是第二值；IE6能通过/**/的障碍却又不懂!important的含义，所以会用到最后一个值。
－－－
6、用于IE的min-width
由于IE一直没有支持min-width/max-width，有时对CSS进行图片大小控制或制作自动伸缩式的页面时会感觉很麻烦。
<style>
<!--
.minwidth {
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}
-->
</style>
第二行的Javascript只有IE认识，但是因为有它的存在，会把CSS变得无法通过W3C的有效性检查，但这也不失为一种IE实现min-width的解决方法。
－－－
7、表单CSS布局
在对表单布局进行设计时，常常让人忍不住想使用Table，quirksmode有一种解决办法：Tableless forms。
原理就是让<label>和<input>（包括其它的form元素，如：<select>, <textarea>）的display属性为block再浮动到左侧，行末有<br />负责清除浮动。有固定的宽度，并且文字又对齐，这样漂亮的布局就出来了！
HTML部分：
<form>
<label for="name">Name</label>
<input id="name" name="name"><br>
<label for="address">Address</label>
<input id="address" name="address"><br>
<label for="city">City</label>
<input id="city" name="city"><br>
</form>
CSS部分：
<style>
<!--
label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
label {
text-align: right;
width: 75px;
padding-right: 20px;
}
br {
clear: left;
}
-->
</style>
－－－
8、打印网页时强制换页
h2{
page-break-before:always;
}
这个可以强制打印网页时换页。
9、去除IE中textarea的垂直滚动条
textarea{
overflow:auto;
}
10、防止链接换行
a{
white-space:nowrap;
}
很多时候，链接会非常长，如果换行变成2行乃至多行，可能对用户造成误导，建议使用这个方法防止该情况。平常用li做导航时常用。
－－－
11、显示固定宽度内容
#main{
overflow:hidden;
}
常常在确定宽度的容器里，内部元素超宽(如一张大图)时只显示固定宽度的内容，超过确定宽度部分隐藏，以确保整体布局不被破坏。
12、CSS滤镜做鼠标经过图片
实现一个网页上的图片，平常看上去是黑白的，当鼠标移动到图片上图片就变成彩色的。虽然比较简单，但也有代表性，只要我们有足够的想象空间，那么利用CSS和Javascript可以做出很多眩目的功能。
代码如下：
<head>
<style type="text/css">
.over {}
.out {filter: Gray}
</style>
</head>
<body>
<p><img border="0" src="1.JPG" width="500" height="500" onmouseover="this.className='over'" onmouseout="this.className='out'"></p>
</body>
注意：onmouseover事件代表鼠标移动到图片上时，那么this.className="over" 表示当前对象的class名为over，看到样式表里定义over为什么都不做，即显示原图。onmouseout事件代表鼠标离开，那么使用out样式，采用滤镜把图片变为黑白，注意字母的大小写，js对大小写是敏感的。
13、让hr在FF（Firefox）中显示1px
hr {color: red; background: red; border: 0; height:1px;}
除了给hr一个颜色之外，再给一个背景色，这样的话在FF里就可以以1px高度显示了。
逐步更新。