几个比较实用的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>
?鼠標移上圖片發(fā)亮
<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-width: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 οnmοuseοver="this.className='btn1_mouseover'" ?οnmοuseοut="this.className='btn1_mouseout'" ?title="好看的按鈕">好看的按鈕</button>?
<button class="btn1_mouseout" οnmοuseοver="this.className='btn1_mouseover'" ?οnmοuseοut="this.className='btn1_mouseout'" DISABLED>好看的按鈕</button>
<P>
<button class="btn2" title="好看的按鈕">好看的按鈕</button>
<P>
<button class="btn3_mouseout" οnmοuseοver="this.className='btn3_mouseover'" ?οnmοuseοut="this.className='btn3_mouseout'" ?οnmοusedοwn="this.className='btn3_mousedown'" ? οnmοuseup="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{ width:776px; padding:0px; background:#eee; height:60px; text-align:left;}
#contain{ margin-right:auto; margin-left:auto; width:776px}
#right{ float:right; margin:2px 0px 2px 0px; padding:0px; width:574px;
background:#ccd2d3; text-align:left;}
#left{ float:left; margin:2px 2px 0px 0px; padding:0px; background:#f2f3f7; width:200px; text-align:left;}
#footer{ width: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-width:1px 0 0 1px;margin:2px 0 2px 0;text-align:center;border-collapse:collapse;} ? td,th{height:20px; border:1px solid #000;border-width: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;}轉載于:https://www.cnblogs.com/walle2014/p/3660048.html
總結
以上是生活随笔為你收集整理的几个比较实用的CSS的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 百度的一个Ajax跨域方法 JavaSc
- 下一篇： CSS基本知识1-CSS基本概念