|
不知道大家看完前面两篇以后是否对用style已经有了一点心得，其实前文所说的不过是样式表最基本的运用。笔者这里想问一问，读者们有没有感觉到html中所规定的那些标准形式的表格（table）和表单（form）样子过于呆板，而风格又时常与自己网页格格不入呢?而且，对于一个大信息量和交互式的网页而言，表格和表单是需要大量运用并且占有很重要的位置的。现在如果笔者告诉大家用样式表定制自己个人风格的表单和表格的话，您是否会兴奋得跳起来呢?其实，如果恰当的运用style，甚至可以做出比作图更好的效果来。
先给大家说说关于定制表格的一些细节。在第一章里的那个例子里，大家应该看到了许多运用定制表格的地方。应该说定制表格并不复杂，主要的也就是对背景（background）和边框（border）进行定义。用的也不过是这两方面的属性。
块参数（Block-Level Formatting Properties）
参数
含义
举例
Left-margin,right-margin
留的空白
长度值,百分比值
Padding-top…
内容边框间距
长度值,百分比值
Border-width
边框宽度
长度值
Border-style
边框风格
Solid,double,groove
Border-color
边框颜色
颜色值
Width
宽度
长度值,百分比值
Float
对齐
Left,right
颜色参数（Color and Background Properties）
参数
含义
举例
Color
前景色彩
颜色值（red, #FF0000）
Background-image
背景文件
文件地址
Background-color
背景颜色
颜色值
background-attachment
背景是否依附
scroll（随内容滚动）和fixed（固定位置）
background-repeat
背景重复格式
repeat-x（水平重复）
,repeat-y（纵向重复）,no-repeat（不重复）
说起来这些属性在上次介绍文字排版的时候也用过了，不过您这次再看看它在表格里的表现，它们在这里扮演的角色非常重要，笔者决非是简单的老调重弹。需要说明的是所有的边框属性都是分位置的，也就是说，可以对外观的上、下、左、右四个方向分别作设定，也就是说，对于每一项边框属性，都有border-left-width,border-right-width,border-top-width,border-bottom-width这样的四个分属性，也可以在某个属性后面连带四个值，分别表示对top、right、bottom、left的定义。这一点很有用，我们就可以运用它，做出类似光影的效果。而另外一个属性，所谓风格（style）就很难定义了。有些说法，比如说solid（实心），double（双层）很好理解。但是有些效果恐怕要您用过以后才能明白是怎么回事。这里笔者把它们全部列举如下:
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 { 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; border-
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>三< /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" align="center">
< td>甲< /td>
< td>乙< /td>
< td>丙< /td>
< td>丁< /td>
< /tr>
< tr bgcolor="#CCFFCC" bordercolor="#0000CC"
valign="m
[Web开发]css ul li 不换行 [网页制作]如何正确的理解CSS的float浮动属性？
[网页制作]CSS 3 选择器解释 [网页制作]CSS Image Maps—图像地图
[网页制作]一款DIV+CSS导航条效果 [网页制作]xml css htc 的综合运用
[网页制作]用GoLive实现CSS+DIV之二 [网页制作]免费CSS布局和模板大集合！
[网页制作]DIV+CSS网页布局常用的方法与技巧 [网页制作]初学者来看：网页CSS样式表设计十条技巧
| 
注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！ 本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网] 
