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

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

让指定的背景色透明，例:

未使用该滤镜使用该滤镜 <table cellspacing = "0" cellpadding = "0" border = "1">

<tbody>

<td>

<td>

</tr>

<td>

未使用该滤镜</td>

<td>

使用该滤镜</td>

</tr>

</tbody>

</table>

Word-break:break-all;

强制换行，例: 当未使用该样式时，虽然我设置了表格宽度为100px，但是面对这样连续的字符，表格无法自动换行，表格会被撑破: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <table cellspacing = "0" cellpadding = "0" width = "100" border = "1">

<tbody>

<tr>

<td>

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td></tr></tbody>

</table>

再看看使用该样式后的效果: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <table cellspacing = "0" cellpadding = "0" width = "100" border = "1" style = "WORD-BREAK: break-all">

<tbody>

<tr>

<td>

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>

</tr>

</tbody>

</table>

writing-mode:tb-rl;

用于设置文本的书写方向，可以有两个取值：

lr-tb：表示左右-上下，left right - top bottom

tb-rl：表示上下-右左，top bottom - right left

需要 IE 5.5+ 才支持，例: 第一组垂直文字第一组水平文字第二组水平文字

第二组水平文字第三组竖直文字第三组水平文字

<style>

.clsHoriz

{

writing-mode: lr-tb

}

</style>

第一组垂直文字<span class = "clsHoriz">第一组水平文字</span>第二组水平文字

<br/>

<span style = "writing-mode:lr-tb">第二组水平文字</span>第三组竖直文字<span class = "clsHoriz">第三组水平文字</span>

</div>

text-indent:2em;

首行缩进，例: 有时候，我们需要将段落的首行缩进两个文字，一般我们都是用4个Html的空格( )来实现，其实我们还可以用样式表来达到这种效果！ <p style = "text-indent:2em;width:200px;">

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

transparent表示透明色，例: 背景透明的TextArea

背景透明的TextArea border-collapse:collapse;

它会自动把相同的边框线合并，例: 不使用border-collapse:collapse; 1.11.22.12.2使用border-collapse:collapse; 1.11.22.12.2 <style>

.grid

{

border-collapse: collapse;

}

.grid td

{

border: solid 1px #cccccc;

}

.gridNoCollapse td

{

border: solid 1px #cccccc;

}

</style>

不使用border-collapse:collapse;

<tr>

<td>

1.1</td>

<td>

1.2</td>

</tr>

<tr>

<td>

2.1</td>

<td>

2.2</td>

</tr>

</table>

使用border-collapse:collapse;

<tr>

<td>

1.1</td>

<td>

1.2</td>

</tr>

<tr>

<td>

2.1</td>

<td>

2.2</td>

</tr>

</table>

background-position: 0 -78;

设置背景图片的位置，例:

《background-position的妙用》 table-layout: fixed;

固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。也就是说，内容可能被裁切，例:

看看我以前写的一个仿MSN的htc网格中应用这个属性的效果吧，仿照MSN的网格，单元格中文字过长会自动被截取（在Table中使用样式table-layout: fixed;），鼠标移上会全部显示(使用一个浮动的层覆盖在上面)：演示下载 display:inline;

设置或检索对象是否及如何显示，inline表示内联，例:

大家都知道两个表格在一起，默认是会自动换行的，但是利用display:inline;属性可以让两个表格并排在一起：表格1 表格2

<tr>

</tr>

</table>

<tr>

</tr>

</table>

overflow: auto;

检索或设置当对象的内容超过其指定高度及宽度时如何治理内容。auto : 在需要时剪切内容并添加滚动条，例:

使用前的TextArea使用后的TextArea默认有滚动条只有当文字超出范围时滚动条才会出现font:12px/18px;

字体大小/行高，例:

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

<tr>

<td>未使用CSS</td>

<td>使用该CSS</td>

</tr>

<tr>

<td>

<p>

在这里行高是系统默认的，不会受影响的

</p>

</td>

<td><p style="font:12px/18px;">这里的12px就表示字体大小，18px其实就等价于css中的line-height。</p></td>

</tr>

</table>

clip : rect ( 0 64 64 0 )

字体大小/行高，例:

原图：

裁减后：

可以利用这个来做动画:) font-size: eXPRession(document.body.clientWidth / 20);

expression是IE浏览器特有的功能，可以直接执行脚本而算出css的值，例:

《CSS也能控制表格的交替颜色》

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

<div style="font-size:

expression(document.body.clientWidth / 20);">

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

</div>

对于支持HTML的BBS来说，这可能会是一个安全隐患！ position: absolute;

这个我想绝大多数人都知道——绝对定位，我所要说的是偶然发现的一个隐含功能，例:

当给一个网页元素的CSS设置为"position: absolute;"，那么它会绝对定位，然后根据css中的left,top属性确定自己的位置。但是假如我们仅仅设置一个元素样式表的"position: absolute;"属性，而不设置其left,top属性，那么该元素会浮在其html所在位置。看个例子，我将一个tr的CSS设置为"position: absolute;"：第一行第二行<table border="1" cellpadding="4" cellspacing="0">

</tr>

<tr>

</tr>

</table>

第一行浮在第二行上了，这个特性可以很方便的来制作重叠效果，例如我以前写过的自定义按钮和Flash播放器都用到了这个特性来实现重叠：

自定义按钮：一个自定义按钮，底下是一个普通的Button，利用"position:absolute;"在Button上面覆盖图片，这样看起来就像自定义按钮，而实际点击确是点击底下真实的Button（下载）

Flash播放器：这个播放器的进度条就是通过这种方法来重叠的。（下载）