对齐好看的表格css样式

篇一表格表单css样式设计教案

一体化课程教案

编号 QD-0707-05

编制教研室版本号 D/0批准:成振洋流水号

2011/2012学年度 第二 学期 计算机系部 任课教师 颜虹

教学内容课时6 

篇二 BS下漂亮按钮和表格一页CSS全搞定

BS下漂亮按钮和表格一页CSS全搞定不用找其它的了

楼主mac ri 发表于2010-07-01 15:39

-------------------------------标准css

<meta http_equiv=\pragma\ content=\no_cache\<style type=\text/css\ <!-- a {font-size:9pt;text-decoratio n:none;colo r: #000000} td {fo nt-size:9pt; text-decoratio n:none} fo nt{fo nt-size:9pt}a:hover{text-decoration:unde rline}a:visited{ colo r:#000000} --</style

------------------------控制B UTTON的显示(用于html属性

1

的 类 中 )heig ht:20px;backg round-colo r:'#C0C0C0';borde r:1 solid black onMouseOver =this.style.backgroundColo r='#FFC864'onMouseOut

=this.style.backgro undColo r='#f3f3f3'

------------------------在报表表单中使用控制列和输入文本

<style type=\text/css\ <!-- td {font-size:7pt }a:hover {text-decoratio n: unde rline} a:visite d { colo r:#000000} input {width:50px; backg round-colo r: #ffffff;border: 0px #666666 solid ;font-size:7pt} .myinput { background-color:#FFFFFF;border: 1px#000000 solid}--</sty le

---------********---------------标准表格控制(解决不显示表

格线问题)。width=100%align=center cellpadding=0 cellspacing=0style=bo rde r-collapse:collapse bo rde rcolo r=#000000

-----------------------------青绿色表格线可打印

<table border=1 bordercolorlight=#008080cellspacing=0cellpadding=0 bordercolordark=#FFFFFF color=efefef widt h=60%--------------------------色彩变换钮

2

<input type=BUTTON name=close value=关闭窗口onClic k=closeclk() style=font-size:9pt;backgro und-colo r:#ff9900;border: 1 solid onMouseOver=this.style.color='#D9E2F7'onMo use Out=this.style.colo r='#000000'

----------------------白色按钮

<style type=text/css

<!--a {font-size:9pt; text-decoration: no ne;colo r: #000000} td {font-size:9pt; text-decoration:none}fo nt{fo nt-s ize:9pt}a:hover{text-decoratio n:unde rline}a:visited{ colo r:#000000}input { backgro und-colo r: #ffffff; bo rde r: 1px#666666solid;heig ht:20px}

.myinput { background-color: #FFFFFF;border: 1px #000000 solid} --

</s t y le

------------------------

按钮是原形原色

<style type=text/css

<!--

3

a {font-size:9pt; text-decoratio n: no ne;colo r:#000000} td {font-size:9pt; text-decoration:none}fo nt{fo nt-s ize:9pt}a:hover{text-decoratio n:unde rline}a:visited{ colo r:#000000}

.myinput { background-color: #FFFFFF;border: 1px #000000 solid} .clsCursor{ cursor:hand}

--

</s t y le

----------------------------

按钮是原形白色

<style type=\text/css\ <!-- a {font-size:9pt;text-decoratio n: none;colo r: #000000} td {fo nt-size:9pt;text-decoratio n: no ne} font{font-size:9pt} a:hover {text-decoration:unde rline}a:visite d { colo r: #000000} input { backgro und-colo r:#ffffff;border: 1 px#666666 solid;height:

20px} .myinput { background-color:#FFFFFF;border:1px#000000 solid} --</style

----------------------------------

具有行跨列跨粗边框且单元文字上下居中左右居中左不换行 <table border=4 width=80% cellspacing=0

4

cellpadding=4 bordercolor=#800000bo rde rcolo rlig ht=#008000bo rderco lo rda rk=#000000<tr

<td width=25%valign=middle bordercolor=#000000bo rde rc o lo rlight=#000000bo rdercolo rda rk=#000000 align=left nowrapfgdsfgsdfg</td

<t d widt h=25%dfdsfg</t d

--------------------------------

黑细线表格1

<TABLE cellspacing=0 cellpadding=0bordercolor=#000000 bordercolorlight=#FFFFFF BORDER=1

黑细线表格2(最好)border=0 cellspacing=1 cellpadding=1 bgcolor=#000000wid ht=130%

篇三 css样式大全

大小{fo nt-size: x-large;}(特大)xx-small;(极小)一般中文用不到只要用数值就可以单位 PX、 PD

样式 {fo nt-style: oblique;}(偏斜体) italic;(斜体)normal;(正常)

行高{line-height:no rmal;}(正常)单位 PX、 PD、 EM

5

粗细 {font-weig ht: bold;}(粗体) lighte r;(细体)normal;(正常)

变体 {font-varia nt: small-caps;}(小型大写字母)normal;(正常)

大小写 {text-transfo rm: capitalize;}(首字母大写)uppercase;(大写)lowe rcase;(小写)none;(无)

修饰{text-decoration: unde rline;}(下划线) overline;(上划线) line-through;(删除线)blink;(闪烁)

常用字体 (font-fa mily)

Courier New,Courier,monospace,Times New Roman,Times,se rif,Aria l,He lvetica,sa ns-se rif,Ve rda na

背景属性 (background)

色彩{background-color:#FFFFFF;}

图片{background-image:url();}

重复{background-repeat:no-repeat;}

滚动{background-attachment: fixed;}(固定) scroll;(滚动)

位置{backg round-positio n: left;}(水平)top(垂直);

简写方法{background:#000 url(..) repeat fixed left top;}/*简写·这个在阅读代码中经常出现要认真的研究*/

区块属性 (B lo c k)/*这个属性第一次认识要多多研究

*/

6

字间距{lette r-spacing: no rmal;}数值/*这个属性似乎有用 多实践下*/

对齐 {text-a lign: j ustify;}(两端对齐) left;(左对齐)rig ht;(右对齐)cente r;(居中)缩进{text-indent:数值px;}

垂直对齐{vertical-alig n: baseline;}(基线) sub;(下标)supe r;(下标)top; text-top;middle;botto m; text-botto m;

词间距word-spacing:normal;数值

空格white-space:pre;(保留)nowrap;(不换行)

显示{dis pla y:blo ck;}(块) inline;(内嵌) list-ite m;(列表项)run-in;(追加部分) compact;(紧凑)marke r;(标记) table;inline-table; table-raw-group; table-header-group;table-footer-group; table-raw; table-column-group;table-column; ta ble-cell; ta ble-c aptio n;(表格标题) /*display 属性的了解很模糊*/方框属性 (Box)width:;height:; float:; clear:both;margin:;padding:;顺序上右下左

边框属性 (Border)bo rde r-style: dotted;(点线) dashe d;(虚线) solid;double;(双线)groove;(槽线)ridge;(脊状) inset;(凹陷)outset;bo rde r-width:;边框宽度bo rde r-colo r:#;

简写方法borde r width style colo r; /*简写*/

7

列表属性 (List-style)

类型list-style-type:disc;(圆点)circle;(圆圈) square;(方块)decimal;(数字) lower-roman;(小罗码数字) upper-roman;lowe r-alpha; uppe r-alpha; 位 置 list-style-positio n:outside;(外) inside;

图像list-style-image:url(..);

定位属性 (P ositio n)

Position:absolute; relative; static;visibility: inhe rit;visible;hidden;overflow:visible;hidden; sc roll;auto

;clip: rect(12px,auto,12px,auto) (裁切)css属性代码大全

一CSS文字属性c o lo r:#999999; /*文字颜色*/fo nt-family:宋体,sans-se rif; /*文字字体*/fo nt-size:9pt; /*文字大小*/fo nt-style:ite lic; /*文字斜体*/fo nt-va riant:small-caps; /*小字体*/lette r-spacing: 1 pt; /*字间距离*/line-he ight :200%; /*设置行高*/fo nt-we ight:bo ld; /*文字粗体*/

8

vertical-align:sub; /*下标字*/vertical-align:super; /*上标字*/text-decoratio n:line-thro ugh; /*加删除线*/text-decoratio n:overline; /*加顶线*/text-decoratio n:unde rline; /*加下划线*/text-decoratio n:none; /*删除链接下划线*/text-transform: capitalize; /*首字大写*/text-transfo rm:uppercase; /*英文大写*/text-transfo rm: lowe rcase; /*英文小写*/te xt-a lign:rig ht; /*文字右对齐*/text-a lign:le ft; /*文字左对齐*/text-a lign:center; /*文字居中对齐*/text-a lign:j ustify; /*文字分散对齐*/ve rtical-align属性vertical-align:top; /*垂直向上对齐*/ve rtical-align:bottom; /*垂直向下对齐*/ve rtical-alig n:middle; /*垂直居中对齐*/ve rtical-alig n:text-top; /*文字垂直向上对齐*/ve rtical-align:text-botto m; /*文字垂直向下对齐*/

二、 CSS边框空白padding-top:10px; /*上边框留空白*/padding-rig ht:10px; /*右边框留空白*/

9