当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > CSS 循序渐进(三)样式“表”秀

HTML/XHTML教程
你应该知道的CSS的十八个技巧
初学者很好的参考:HTML标签详尽讲解
学习网页标准制作技术之CSS相关基础知识
学习网页标准制作网页之CSS混合布局应用
HTML基础教程:详细学习常用HTML标签的语义
网页设计基础:基本的页面设计元素布局比例
网页制作基础:图像文件的路径知识
html基础系列教程Ⅰ:从p开始,循序渐进
html基础系列教程Ⅱ:丰富段落里的标签
html基础系列教程Ⅲ:用途相似的标签
html基础系列教程Ⅳ:链接与文本标签们
html基础系列教程Ⅴ:美化段落文本Ⅰ
html基础系列教程Ⅵ:美化段落文本Ⅱ
Web标准知识:(X)HTML Strict 下的嵌套规则
Web标准知识:语义与样式无关
Web标准知识:DIV不是万能膏药
web标准知识:当标题不能显示完整的时候
web标准知识:以图换字的几个方法及思路
CSS教程:legend标签设定宽度的技巧
html基础:常用小技巧几例

HTML/XHTML教程 中的 CSS 循序渐进(三)样式“表”秀


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 43 ::
收藏到网摘: n/a

三、样式“表”秀——介绍样式表中表格与表单的定制

  不知道大家看完前面两篇以后是否对用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。

  下面有一个专门的关于表格的例子,大家看看,效果如图一