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

HTML/XHTML教程
XHTML中不再使用HTML中的一些废弃元素
语义化的HTML结构怎么理解
Web 标准学习 理解结构和表现相分离
html5 标签
HTML5 新事件 小结
HTML5 b和i标记将被赋予真正的语义
HTML是网页制作者必须要学习掌握的
HTML DOCTYPE的缩写
Readonly和Disabled的区别
16进制颜色代码(完全)
H标记要在网页制作中合理使用
abbr标记和acronym标记
知名浏览器对DOCTYPE模式的选择机制
用标准dl,dt,dd标签抛弃table列表
html 标签ID可以是变量
iframe 自适应大小实现代码
HTML5 解析规则分析
HTML减肥 精简HTML标记制作网页
HTML5 File API改善网页上传功能
HTML 5 Reset Stylesheet

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 56 ::
收藏到网摘: 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。

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