这些样式表，你都用过么？ zz

http://blog.joycode.com/dotey/archive/2004/11/14/38877.aspx

在Web开发时，不可避免要用到CSS，把我这几年在Web开发过程中积累的一些不常用但是很实用的CSS整理了一下，希望对大家有所帮助！

filter:chroma(color:#FFFFFF);
让指定的背景色透明，例:


未使用该滤镜	使用该滤镜

<p><font color="#0000ff"><strong>word-break:break-all;</strong> 
<br>强制换行，例: </font>
</p>
<p>当未使用该样式时，虽然我设置了表格宽度为100px，但是面对这样连续的字符，表格无法自动换行，表格会被撑破: 
   </p>
<table cellspacing="0" cellpadding="0" width="100" border="1"><tbody><tr>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
           </tr></tbody></table>
<textarea aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa><p></p>
<p>再看看使用该样式后的效果: 
   </p>
<table cellspacing="0" cellpadding="0" width="100" border="1" style="word-break: break-all"><tbody><tr>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
           </tr></tbody></table>
<textarea aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa><p></p>
<p><font color="#0000ff"><strong>writing-mode:tb-rl;</strong> 
<br>用于设置文本的书写方向，可以有两个取值： 
<br>lr-tb：表示左右-上下，left right - top bottom 
<br>tb-rl：表示上下-右左，top bottom - right left 
<br>需要 IE 5.5+ 才支持，例: </font>
</p>
<div style="writing-mode: tb-rl">第一组垂直文字<span class="clsHoriz">第一组水平文字</span>第二组水平文字 
<br><span style="writing-mode: lr-tb">第二组水平文字</span>第三组竖直文字<span class="clsHoriz">第三组水平文字</span> 
</div>
<textarea>    <style>
        .clsHoriz
            {
            writing-mode: lr-tb
            }
    </style>
    <div style = "writing-mode:tb-rl">
        第一组垂直文字<span class = "clsHoriz">第一组水平文字</span>第二组水平文字
        <br/>
        <span style = "writing-mode:lr-tb">第二组水平文字</span>第三组竖直文字<span class = "clsHoriz">第三组水平文字</span>
    </div>

text-indent:2em;
首行缩进，例:

有时候，我们需要将段落的首行缩进两个文字，一般我们都是用4个HTML的空格( )来实现，其实我们还可以用样式表来达到这种效果！

border-collapse:collapse;
它会自动把相同的边框线合并，例:

不使用border-collapse:collapse;

1.1	1.2
2.1	2.2

使用border-collapse:collapse;

1.1

1.2

2.1

2.2

background-position: 0 -78;
设置背景图片的位置，例:
《background-position的妙用》

table-layout: fixed;
固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。也就是说，内容可能被裁切，例:
看看我以前写的一个仿msn的htc网格中应用这个属性的效果吧，仿照MSN的网格，单元格中文字过长会自动被截取（在Table中使用样式table-layout: fixed;），鼠标移上会全部显示(使用一个浮动的层覆盖在上面)：演示下载

display:inline;
设置或检索对象是否及如何显示，inline表示内联，例:
大家都知道两个表格在一起，默认是会自动换行的，但是利用display:inline;属性可以让两个表格并排在一起：

表格1

表格2

font:12px/18px;
字体大小/行高，例:

未使用CSS	使用该CSS
在这里行高是系统默认的，不会受影响的	这里的12px就表示字体大小，18px其实就等价于css中的line-height。

可以利用这个来做动画:)

font-size: expression(document.body.clientWidth / 20);
expression是IE浏览器特有的功能，可以直接执行脚本而算出css的值，例:
《CSS也能控制表格的交替颜色》

字体大小随着浏览器大小而变化，始终为浏览器宽度的1/20

<br><font color="#ff0000">对于支持HTML的BBS来说，这可能会是一个安全隐患！</font> 
<p></p>
<p><font color="#0000ff"><strong>position: absolute;</strong> 
<br>这个我想绝大多数人都知道——绝对定位，我所要说的是偶然发现的一个隐含功能，例: </font>
<br>当给一个网页元素的CSS设置为"position: absolute;"，那么它会绝对定位，然后根据css中的left,top属性确定自己的位置。但是如果我们仅仅设置一个元素样式表的"position: absolute;"属性，而不设置其left,top属性，那么该元素会浮在其html所在位置。看个例子，我将一个tr的CSS设置为"position: absolute;"： 
   </p>
<table cellspacing="0" cellpadding="4" border="1"><tbody>
<tr style="position: absolute">
<td>第一行</td>
           </tr>
<tr>
<td>第二行</td>
           </tr>
</tbody></table>
<textarea style="position: absolute;"><br>第一行浮在第二行上了，这个特性可以很方便的来制作重叠效果，例如我以前写过的自定义按钮和flash播放器都用到了这个特性来实现重叠：
<br><a href="http://www.cnforums.net/dotey/button/button.htm" target="_blank" rel="nofollow"><font color="#0000ff">自定义按钮</font></a>：一个自定义按钮，底下是一个普通的Button，利用"position:absolute;"在Button上面覆盖图片，这样看起来就像自定义按钮，而实际点击确是点击底下真实的Button（<a href="http://www.cnforums.net/dotey/button/button.rar" rel="nofollow" target="_blank"><font color="#0000ff">下载</font></a>）
<br><a href="http://webuc.net/MyProject/flashPlayer/Player.htm" target="_blank" rel="nofollow"><font color="#0000ff">Flash播放器</font></a>：这个播放器的进度条就是通过这种方法来重叠的。（<a href="http://webuc.net/MyProject/flashPlayer/flashPlayer.rar" rel="nofollow" target="_blank"><font color="#0000ff">下载</font></a>） 
<p></p>