在Web开发时，不可避免要用到CSS，把我这几年在Web开发过程中积累的一些不常用但是很实用的CSS整理了一下，希望对大家有所帮助！
filter:chroma(color:#FFFFFF);
让指定的背景色透明，例:
 | |
| 未使用该滤镜 | 使用该滤镜 |
word-break:break-all;
强制换行，例:
当未使用该样式时，虽然我设置了表格宽度为100px，但是面对这样连续的字符，表格无法自动换行，表格会被撑破:
| aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa |
再看看使用该样式后的效果:
| aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa |
writing-mode:tb-rl;
用于设置文本的书写方向，可以有两个取值：
lr-tb：表示左右-上下，left right - top bottom
tb-rl：表示上下-右左，top bottom - right left
需要 IE 5.5+ 才支持，例:
第一组垂直文字
第一组水平文字第二组水平文字
第二组水平文字第三组竖直文字
第三组水平文字
text-indent:2em;
首行缩进，例:
有时候，我们需要将段落的首行缩进两个文字，一般我们都是用4个HTML的空格( )来实现，其实我们还可以用样式表来达到这种效果！
background-color: transparent;
transparent表示透明色，例:
border-collapse:collapse;
它会自动把相同的边框线合并，例:
不使用border-collapse:collapse;
使用border-collapse:collapse;
background-position: 0 -78;
设置背景图片的位置，例:
《background-position的妙用》
table-layout: fixed;
固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。也就是说，内容可能被裁切，例:
看看我以前写的一个仿msn的htc网格中应用这个属性的效果吧，仿照MSN的网格，单元格中文字过长会自动被截取（在Table中使用样式table-layout: fixed;），鼠标移上会全部显示(使用一个浮动的层覆盖在上面)： 演示 下载
display:inline;
设置或检索对象是否及如何显示，inline表示内联，例:
大家都知道两个表格在一起，默认是会自动换行的，但是利用display:inline;属性可以让两个表格并排在一起：
overflow: auto;
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。auto : 在需要时剪切内容并添加滚动条，例:
font:12px/18px;
字体大小/行高，例:
| 未使用CSS | 使用该CSS |
| 在这里行高是系统默认的，不会受影响的 | 这里的12px就表示字体大小，18px其实就等价于css中的line-height。 |
clip : rect ( 0 64 64 0 )
字体大小/行高，例:
原图： 
裁减后：
可以利用这个来做动画:)
font-size: expression(document.body.clientWidth / 20);
expression是IE浏览器特有的功能，可以直接执行脚本而算出css的值，例:
《CSS也能控制表格的交替颜色 》
字体大小随着浏览器大小而变化，始终为浏览器宽度的1/20
对于支持HTML的BBS来说，这可能会是一个安全隐患！
position: absolute;
这个我想绝大多数人都知道——绝对定位，我所要说的是偶然发现的一个隐含功能，例:
当给一个网页元素的CSS设置为"position: absolute;"，那么它会绝对定位，然后根据css中的left,top属性确定自己的位置。但是如果我们仅仅设置一个元素样式表的"position: absolute;"属性，而不设置其left,top属性，那么该元素会浮在其html所在位置。看个例子，我将一个tr的CSS设置为"position: absolute;"：
第一行浮在第二行上了，这个特性可以很方便的来制作重叠效果，例如我以前写过的自定义按钮和flash播放器都用到了这个特性来实现重叠：
自定义按钮：一个自定义按钮，底下是一个普通的Button，利用"position:absolute;"在Button上面覆盖图片，这样看起来就像自定义按钮，而实际点击确是点击底下真实的Button（下载）
Flash播放器：这个播放器的进度条就是通过这种方法来重叠的。（下载）
Input
{
BACKGROUND-COLOR: #F7F9FD;
BORDER-BOTTOM: #89a5e6 1px solid;
BORDER-LEFT: #89a5e6 1px solid;
BORDER-RIGHT: #89a5e6 1px solid;
BORDER-TOP: #89a5e6 1px solid;
COLOR: #082D71;
HEIGHT: 18px;
border-color: #082D71 #082D71 #082D71 #082D72; font-size: 9pt
}
下面是我写的一个css文件 可以把下面的代码复制到一个写字板里另存为*。css
的文件，例如命名为1024.css
/*---------------------------Datagrid--------------------------------*/
.datagrid
{
font-family: Verdana, Arial, Helvetica, sans-serif;
width :100%;
border :solid 1px blue;
table-layout :fixed ;
border-collapse :separate ;
}
.dg_header
{
font-weight :bold ;
color:#ffffff;
background-color :#4a3c8c;
border :solid 1px red;
}
.dg_alter
{
background-color :#E7E7FF;
border :solid 1px red;
}
.dg_item
{
color :#330099;
background-color:#F7F7F7 ;
border :solid 1px red;
}
.dg_page
{
border :solid 1px red;
}
|
 圆角表格代码 | songsu» 2006-5-27 12:15:00 |
<v:RoundRect Stroked="t" fillcolor="#e9e9e6" strokecolor="#69c" style="VISIBILITY:visible;WIDTH:491px;POSITION:relative;HEIGHT:60px;stokecolor:#FFA800"
arcsize="4321f" coordsize="21600,21600">
<v:shadow on="f" type="single" color="#ffa800" offset="3.75pt,3.75pt" />
<v:textbox style="MARGIN-TOP:5.437pt; FONT-SIZE:12px; LEFT:auto; MARGIN-LEFT:9.156pt; WIDTH:351.437pt; TOP:auto; HEIGHT:35.625pt">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<TR>
<TD>
</TD>
<TD>在这里您可以管理所有新闻数据并对它们进行操作，这包括删除，查看以及修改功能！</TD>
</TR>
</table>
</v:textbox>
</v:RoundRect> |
|
|
| CSS细线表格 | songsu» 2006-7-9 11:49:00 | |
css定义如下： table{ border-collapse:collapse; }
td{ border:1px solid #f00; } border-collapse : collapse | collapse 说明：
separate : 默认值。边框独立（标准HTML）
collapse : 相邻边被合并 |
|
|
| 渐变色标准代码 | songsu» 2006-5-27 21:06:00 | |
<%@ Control Language="c#" AutoEventWireup="false" Codebehind="uc_visita_banner.ascx.cs" Inherits="rwnews.BBS.USControls.uc_visita_banner" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>
<style type="text/css">
BODY { FONT-SIZE: 12px; MARGIN: 0px; FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: none }
a.{ text-decoration:none;}
.ForDreamLinkA { FONT-WEIGHT: normal; FONT-SIZE: 12px; CURSOR: hand; COLOR: #ffffff; FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-VARIANT: normal; TEXT-DECORATION: none }
.ForDreamFont { FONT-WEIGHT: bold; FONT-SIZE: 30px; COLOR: #ffffff; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif }
.GenerFont { FONT-SIZE: 12px; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: none }
.style3 {
color: #FFFFFF;
font-size: 10px;
}
</style><script language="javascript">
function ShowStyle()
{
var aa = document.getElementById("ms_ID");
var m_table = document.getElementById("ms_table");
m_table.border = 1;
aa.style.borderStyle="solid"; //样式
aa.style.backgroundColor="#535353"; //背景色
aa.style.borderColor="#8B8B8B"; //边框色
}
function HiddenStyle()
{
var aa = document.getElementById("ms_ID");
var m_table = document.getElementById("ms_table");
m_table.style.borderStyle = "none";
//aa.style.backgroundColor="#000000"; //背景色
//aa.style.borderStyle="solid"; //样式
aa.style.borderColor='#000000'; //边框色
aa.style.backgroundColor = 'transparent';
}
</script>
<Meta http-equiv="Content-Type" Content="text/html; charset=gb2312"> <!-- 顶部开始 -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<TR>
<TD width="30%" height="20" style=" FILTER:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#000000', endColorStr='#FFFFFF', gradientType='1'); height:20px;"></TD>
<TD width="50%" style=" FILTER:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#000000', gradientType='1'); height:20px;"></TD>
<TD width="20%" bgcolor="#000000" height:"20px;">
<div style="z-index:2; position:absolute; right:30px; top:0px; ">
<table height="15" border="0" cellPadding="0" cellSpacing="0" bordercolor="#000000" onMouseOver="ShowStyle();" onMouseOut="HiddenStyle();" id="ms_table">
<TR>
<TD bordercolor="#000000" id="ms_ID" align="center" valign="middle">
<a href="../../index.aspx" target="_top">
<span class="style3">
人文社科学部首页
</span>
</a>
</TD>
</TR>
</table>
</div>
</TD>
</TR>
</table>
<!-- 下面开始 -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<TR>
<TD width="20%" bgcolor="#000000">
<font color="#FFFFFF" face="Arial, Helvetica, sans-serif">
WAS BBS 1.2(Beta)
</font>
</TD>
<TD style=" FILTER:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#000000', endColorStr='#FFFFFF', gradientType='1');WIDTH:60%;HEIGHT:40px">
</TD>
<TD width="20"> </TD>
</TR>
</table |
| 防止表格被撑破 | songsu» 2006-5-20 13:14:00 | |
关键是style=word-break:break-all | |
|
下面是我写的一个css文件 可以把下面的代码复制到一个写字板里另存为*。css
的文件，例如命名为1024.css
/*---------------------------Datagrid--------------------------------*/
.datagrid
{
font-family: Verdana, Arial, Helvetica, sans-serif;
width :100%;
border :solid 1px blue;
table-layout :fixed ;
border-collapse :separate ;
}
.dg_header
{
font-weight :bold ;
color:#ffffff;
background-color :#4a3c8c;
border :solid 1px red;
}
.dg_alter
{
background-color :#E7E7FF;
border :solid 1px red;
}
.dg_item
{
color :#330099;
background-color:#F7F7F7 ;
border :solid 1px red;
}
.dg_page
{
border :solid 1px red;
}
又一种修改input属性的方法
1439
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
