几个比较实用的CSS

几个比较实用的CSS
1、filter:chroma(color:#FFFFFF);    让指定的背景色透明，例:

<table cellspacing = "0" cellpadding = "0" border = "1">

　　<tbody>

　　　　<tr align = "center" bgcolor = "#cccccc">

　　　　　　<td><img src = "http://www.si58.com/up/pin/s_2007-12-04-1196777365.jpg.jpg“></td>

　　　　　　<td> <img style = "FILTER: chroma(color:#ffffff)" src = "http://www.si58.com/up/pin/s_2007-12-04-1196777365.jpg.jpg"></td>

　　　　</tr>

　　　　<tr align = "center">

　　　　　　<td>未使用该滤镜</td>

　　　　　　<td>使用该滤镜</td>

　　　　 </tr>

　　</tbody>     　

</table>

2、word-break:break-all; 强制换行

<table cellspacing = "0" cellpadding = "0" width = "100" border = "1" style = "WORD-BREAK: break-all">

　　<tbody>

              <tr>

　　　　　　<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>

            </tr>

     </tbody>

</table>

3、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>

<div style = "writing-mode:tb-rl">

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

　　第二组水平文字<br/><span style = "writing-mode:lr-tb">第二组水平文字</span>

　　第三组竖直文字<span class = "clsHoriz">第三组水平文字</span>

</div>

4、background-color: transparent; transparent表示透明色，例:
<span style = "background-color: #CCCCCC; padding:20px;">

<textarea style = "background-color: transparent;">

背景透明的TextArea

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

<style>

.grid    {    border-collapse: collapse;    }

.grid td    {    border: solid 1px #cccccc;    }

.gridNoCollapse td    {    border: solid 1px #cccccc;    }

</style>

不使用border-collapse:collapse;

<table border = "0" cellpadding = "4" cellspacing = "0" width = "200" class = "gridNoCollapse">

<tr>

<td>                 1.1</td>

<td>                 1.2</td>

</tr>

<tr>

<td>                 2.1</td>             <td>                 2.2</td>

</tr>

</table>

使用border-collapse:collapse;

<table border = "0" cellpadding = "4" cellspacing = "0" width = "200" class = "grid">

<tr>

<td>                 1.1</td>

<td>                 1.2</td>

</tr>

<tr>

<td>                 2.1</td>

<td>                 2.2</td>

</tr>

</table>

6、两个表格并排

<table border="1" style="display:inline;">

<tr>

<td>表格1</td>

</tr>

</table>
<table border="1" style="display:inline;">

<tr>

<td>表格2</td>

</tr>

</table>

7、overflow: auto; 自适应表格的高，可以自动加滚动条。

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

鼠标移上图片发亮
<style type="text/css">
.opacityit img{ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40); -moz-opacity: 0.4; }
.opacityit:hover img{ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity: 1; }
</style>
<a href="http://cnn.com" class="opacityit"><img border="0" src="email.gif" /></a>

鼠标移上有亮边框

<style type="text/css">
.borderit img{ border: 1px solid #ccc; }
.borderit:hover img{ border: 1px solid navy; }
.borderit:hover{ color: red; /* irrelevant definition to overcome IE bug */ }
</style>
<a href="http://cnn.com" class="borderit"><img border="0" src="email.gif" /></a>

用css定义的按钮

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT="">

</HEAD>

<style>

.btn { BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7b9ebd 1px solid }

.btn1_mouseout { BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid }

.btn1_mouseover { BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CAE4B6); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid }

.btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-1;}

.btn3_mouseout { BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid }

.btn3_mouseover { BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid }

.btn3_mousedown { BORDER-RIGHT: #FFE400 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #FFE400 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #FFE400 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #FFE400 1px solid }

.btn3_mouseup { BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid }

.btn_2k3 { BORDER-RIGHT: #002D96 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #002D96 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); BORDER-LEFT: #002D96 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #002D96 1px solid }

</style>

<body>

<button class="btn" title="好看的按钮">好看的按钮</button>

<P></p>

<button
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'" onmouseout="this.className='btn1_mouseout'" title="好看的按钮">好看的按钮</button>  

<button class="btn1_mouseout" onmouseover="this.className='btn1_mouseover'" onmouseout="this.className='btn1_mouseout'" DISABLED>好看的按钮</button>

<P>

<button class="btn2" title="好看的按钮">好看的按钮</button>

<P>

<button class="btn3_mouseout" onmouseover="this.className='btn3_mouseover'" onmouseout="this.className='btn3_mouseout'" onmousedown="this.className='btn3_mousedown'" onmouseup="this.className='btn3_mouseup'" title="好看的按钮">好看的按钮</button>

<P>

<button class="btn_2k3" title="好看的按钮">好看的按钮</button>

</BODY>

</HTML>

用css定义的页面效果（上，左右，下）

<html>

<head>

<style type="text/css">

body{ text-align:center; background:#999 }

#header{ 776px; padding:0px; background:#eee; height:60px; text-align:left;}

#contain{ margin-right:auto; margin-left:auto; 776px}

#right{ float:right; margin:2px 0px 2px 0px; padding:0px; 574px;
background:#ccd2d3; text-align:left;}

#left{ float:left; margin:2px 2px 0px 0px; padding:0px; background:#f2f3f7; 200px; text-align:left;}

#footer{ 776px; margin-right:auto; margin-left:auto; padding:0px; background:#eee; height:60px;}

</style> </head> <body> <div id="header">header</div> <div id="contain">

<div id="right">

right

<p> </p> <p> </p> <p> </p>

<p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p>

</div>

<div id="left">left <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p>

</div>

<div id="footer">

</div>

</div>

</div>

</body>

</html>

input的样式
INPUT.button { BORDER-RIGHT: #909090 3px double; PADDING-RIGHT: 0.25em; BORDER-TOP: #c0c0c0 3px double; PADDING-LEFT: 0.25em; BACKGROUND: url(../fade-butt[2].png); PADDING-BOTTOM: 0.05em; BORDER-LEFT: #c0c0c0 3px double; COLOR: #333; PADDING-TOP: 0.05em; BORDER-BOTTOM: #909090 3px double }

INPUT.text { BORDER-RIGHT: #909090 3px double; PADDING-RIGHT: 0.25em; BORDER-TOP: #909090 3px double; PADDING-LEFT: 0.25em; BACKGROUND: url(../bg_diag[1].png) repeat-x 50% bottom; PADDING-BOTTOM: 0.2em; BORDER-LEFT: #909090 3px double; WIDTH: 200px; PADDING-TOP: 0.15em; BORDER-BOTTOM: #909090 3px double }

TEXTAREA.text { BORDER-RIGHT: #909090 3px double; PADDING-RIGHT: 0.25em; BORDER-TOP: #909090 3px double; PADDING-LEFT: 0.25em; BACKGROUND: url(../bg_diag[1].png) repeat-x 50% bottom; PADDING-BOTTOM: 0.2em; BORDER-LEFT: #909090 3px double; WIDTH: 520px; PADDING-TOP: 0.15em; BORDER-BOTTOM: #909090 3px double; HEIGHT: 120px }

细线表格

table{border:1px solid #000;border-1px 0 0 1px;margin:2px 0 2px 0;text-align:center;border-collapse:collapse;}

td,th{height:20px; border:1px solid #000;border-0 1px 1px 0;margin:2px 0 2px 0;text-align:left;}

th{text-align:center;font-weight:600;font-size:12px;background-color:#F4F4F4;}
相关阅读:
python使用subprocess及delegator调用第三方程序
 CentOS安装配置nginx-rtmp-module（同时支持IPv4和IPv6）
npm和cnpm安装（for windows）
MySQL中pymysql的具体操作
 浅谈Red Hat和 Centos7
[致]Markdown新手指南
 python面试题
 VB使用ADO中recordeset.delete删除数据记录问题
 VB连接ACCESS数据库，使用 LIKE 通配符问题
 VB6位运算
原文地址：https://www.cnblogs.com/walle2014/p/3660048.html

热门文章
Go 初体验
 Go 初体验
 Go 初体验
 Go 初体验
 Go 初体验
 Go 初体验
 Go 初体验
 Go 初体验
 Go 初体验
 Docker常用命令及示例

几个比较实用的CSS

鼠标移上图片发亮

鼠标移上有亮边框

用css定义的按钮

用css定义的页面效果（上，左右，下）

input的样式