《2022年CSS 循序渐进（三）样式“表”秀CSSHTML教程.docx》由会员分享，可在线阅读，更多相关《2022年CSS 循序渐进（三）样式“表”秀CSSHTML教程.docx（6页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、2022年CSS 循序渐进（三）样式“表”秀CSSHTML教程不知道大家看完前面两篇以后是否对用style已经有了一点心得，其实前文所说的不过是样式表最基本的运用。笔者这里想问一问，读者们有没有感觉到html中所规定的那些标准形式的表格（table）和表单（form）样子过于呆板，而风格又时常与自己网页格格不入呢?而且，对于一个大信息量和交互式的网页而言，表格和表单是须要大量运用并且占有很重要的位置的。现在假如笔者告知大家用样式表定制自己个人风格的表单和表格的话，您是否会兴奋得跳起来呢?其实，假如恰当的运用style，甚至可以做出比作图更好的效果来。 先给大家说说关于定制表格的一些细微环节。在
2、第一章里的那个例子里，大家应当看到了很多运用定制表格的地方。应当说定制表格并不困难，主要的也就是对背景（background）和边框（border）进行定义。用的也不过是这两方面的属性。 块参数（Block-Level Formatting Properties）参数含义举例Left-margin,right-margin留的空白长度值,百分比值Padding-top内容边框间距长度值,百分比值Border-width边框宽度长度值Border-style边框风格Solid,double,grooveBorder-color边框颜色颜色值Width宽度长度值,百分比值Float对齐Left,r
3、ight颜色参数（Color and Background Properties）参数含义举例Color前景色调颜色值（red, #FF0000）Background-image背景文件文件地址Background-color背景颜色颜色值background-attachment背景是否依附scroll（随内容滚动）和fixed（固定位置）background-repeat背景重复格式repeat-x（水平重复）,repeat-y（纵向重复）,no-repeat（不重复）说起来这些属性在上次介绍文字排版的时候也用过了，不过您这次再看看它在表格里的表现，它们在这里扮演的角色特别重要，笔者决非是
4、简洁的老调重弹。须要说明的是全部的边框属性都是分位置的，也就是说，可以对外观的上、下、左、右四个方向分别作设定，也就是说，对于每一项边框属性，都有border-left-width,border-right-width,border-top-width,border-bottom-width这样的四个分属性，也可以在某个属性后面连带四个值，分别表示对top、right、bottom、left的定义。这一点很有用，我们就可以运用它，做出类似光影的效果。而另外一个属性，所谓风格（style）就很难定义了。有些说法，比如说solid（实心），double（双层）很好理解。但是有些效果唯恐要您用过以后
5、才能明白是怎么回事。这里笔者把它们全部列举如下: dotted、dashed、solid、double、groove、ridge、inset、outset。 下面有一个特地的关于表格的例子，大家看看，效果如图一 源码如下: < html>< head>< title>Untitled Document< /title>< meta http-equiv=Content-Type content=text/html; charset=gb2312>< style type=text/css>< !-table
6、3; font-family: 宋体; font-size: 9pt; color: #000033; text-decoration: none; background-color: #FFCCCC; padding-top: 4px; padding-right: 3px; padding-bottom: 2px; padding-left: 2px; border: #CCCCFF; border-style: groove; border-top-width: thick; border-right-width: thick; border-bottom-width: thick; b
7、order-left-width: thick}->< /style>< /head>< body bgcolor=#FFFFFF>< table width=75% border=1 cellspacing=1 cellpadding=1 align=center> < tr bgcolor=#CCFFCC bordercolor=#0000CC valign=middle align=center> < td>一< /td> < td>二< /td> < td&
8、gt;三< /td> < td>四< /td> < /tr> < tr bgcolor=#CCFFCC bordercolor=#0000CC valign=middle align=center> < td>a< /td> < td>b< /td> < td>c< /td> < td>d< /td> < /tr> < tr bgcolor=#CCFFCC bordercolor=#0000CC valign=middle
9、 align=center> < td>甲< /td> < td>乙< /td> < td>丙< /td> < td>丁< /td> < /tr> < tr bgcolor=#CCFFCC bordercolor=#0000CC valign=middle align=center> < td>A< /td> < td>B< /td> < td>C< /td> < td>D< /t
10、d> < /tr>< /table>< /body>< /html>至于表单，由于网页的交互性越来越被人们重视，表单的运用也越来越多。可是HTML本身所制定的那些标准形式的表单件的样子实在让人不敢恭维。文本框一律是内部深陷的长条，而按钮又全是那种灰灰的块块，放在一个精致的网站中实在不成样子。所以可以说适当的调整边框大小、颜色，做出符合网站特性的表单也是网站胜利的一环吧。 大家要看效果的话可以借鉴一下fanso的打开音乐（）的例子。（也可以看图二）大家留意看它右边的一排输入框，其实它是将输入框做到最小了，但是味道却反而足了。 用到的定义语句其实很简洁: .input1 {BACKGROUND-COLOR: #e8e8e8; BORDER-BOTTOM: #a8a8a8 1px solid; BORDER-LEFT: #a8a8a8 1px solid; BORDER-RIGHT: #a8a8a8 1px solid; BORDER-TOP: #a8a8a8 1px solid; FONT-SIZE: 9pt}大家应当可以看到，表格和表单的定制最重要的地方其实在于边框与颜色的选择与搭配，这个是其外观效果的关键。（出处：