注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

★★★绝伦天然★★★

★人生如水、水如人生★

 
 
 

日志

 
 

表格边框之css语法  

2015-06-25 12:37:24|  分类: 〖表格〗 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

                       引用:赏心· 的 表格边框之css语法

赏心搜集整理

 

  做网页我用Dreamweaver。

  提到这破事儿,赏心真是惭愧不已。虽然从大二开始接触网页制作(起先用的是FP),但这么多年以来,我做出来的东西至今依旧不能见人(我总说自己是一个有技术而没有艺术细胞的人)。而那个什么HTML,什么CSS,也一直处于只会看不会写的初级状态。

  今天趁着有兴致,来整理一下表格的CSS语法。

  其实,在做博客的时候也会用到的(稍稍有一些不同,不过可以参考一下)。顺便小声地说一句:我也只是个半吊子……

  总的来说,表格的CSS语法包括——边框宽度、边框颜色、边框样式、边框、宽度、高度、有关标签等几个方面。

 

  边框宽度 border-width: <值> 

  允许值:[thin(细线)| medium(中粗线)| thick(粗线)| <长度> ]{1,4}

  初始值:medium

  适用于:所有对象

  向下兼容:否

  语法:上边框  border-top-width: <值> (例:border-top-width:thick)

     右边框  border-right-width: <值>(例:border-right-width:medium)

     下边框  border-bottom-width: <值>(例:border-bottom-width:thin)

     左边框  border-left-width: <值>(例:border-left-width:12px)

  边框宽度属性设置一个元素的边框宽度。如果四个值都给出了,它们分别应用于上、右、下和左边框的式样。如果给出一个值,它将被运用到各边上。如果两个或三个值给出了,省略了的值与对边相等。

 

  边框颜色 border-color: <值>

  允许值: <颜色>{1,4} 边框颜色的定义值可以是HTML默认标记颜色,如:RED,BLUE,GREEN等。也可以是十六进制颜色码,如:#006699 #F8E5DA等。还可以是RGB值,如:RGB(142,230,169) 。

  初始值: 颜色属性的值

  适用于: 所有对象

  向下兼容: 否

  边框颜色属性设置一个元素的边框颜色。如果四个值都给出了,它们分别应用于上、右、下和左边框的式样。如果给出一个值,它将被运用到各边上。如果两个或三个值给出了,省略了的值与对边相等。

 

  边框样式  border-style: <值>

  允许值: [ none(无边框线)| dotted(由点组成的虚线)| dashed(由短线组成的虚线)| solid(实线)| double(双线。双线宽度加上它们之间的空白部分的宽度就等于border-width定义的宽度)| groove(3D沟槽状的边框)| ridge(3D脊状的边框)| inset(3D内嵌边框,颜色较深)| outset(3D外嵌边框,颜色较浅)]{1,4}

  初始值: none

  适用于: 所有对象

  向下兼容: 否

  边框样式属性用于设置一个元素边框的样式。这个属性必须用于指定可见的边框。如果四个值都给出了,它们分别应用于上、右、下和左边框的式样。如果给出一个值,它将被运用到各边上。如果两个或三个值给出了,省略了的值与对边相等。也可以使用略写的边框属性。注意:如果系统不支持这些边框的属性值,那么“dotted”、“dashed”、“double”、“groove”、“ridge”、“inset”和“outset”都会被“solid”代替。

 

  边框  border: <值>

  允许值: <边框宽度> || <边框式样> || <颜色>

  初始值: 未定义

  适用于: 所有对象

  向下兼容: 否

  语法 :上  border-top: <值>  右  border-right: <值>  下  border-bottom: <值>  左  border-left: <值>

  边框属性只能设置四种边框;只能给出一组边框的宽度和式样。为了给出一个元素的四种边框的不同的值,网页制作者必须用一个或更多的属性,如:上边框、右边框、下边框、左边框、边框颜色、边框宽度、边框式样、上边框宽度、右边框宽度、下边框宽度或左边框宽度。

  例:border: #cccccc thin solid

    H2 { border: groove 3em }

    A:link { border: solid blue }

    A:visited { border: thin dotted #800080 }

    A:active { border: thick double red }

 

  宽度  width: <值> 高度  height: <值>

  允许值: <长度> | <百分比> | auto

  初始值: auto

  适用于: 块级和替换元素

  向下兼容: 否

  宽度属性的初始值为“auto”,即为该元素的原有宽度(有就是元素自己的宽度)。百分比参考上级元素的宽度。不允许使用负的长度值。

 

  有关标签

  table:表格标签,对整个表格样式的定义要放在table中;

  td:单元格标签,对单元格样式的定义要放在td中。

  例:<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#f5f5f5" style="border-top: #cccccc 1px dashed; border-bottom: #cccccc 2px dashed">

<tr>

<td width="20%" style="border-right: #404040 1px solid">&nbsp;</td><td width="20%" style="border-right: #404040 1px solid">&nbsp;</td>

<td width="20%" style="border-right: #404040 1px solid">&nbsp;</td>

<td width="20%" style="border-right: #404040 1px solid">&nbsp;</td>

<td>&nbsp;</td></tr></table>

 

         

 

  例:<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" style="border-style:solid; border-width: thin thin thick thick;border-color:#cccccc #cccccc #404040 #404040">

  <tr>

  <td>&nbsp;</td>

  </tr></table>

  在一个边框中采用不同宽度和颜色的边框线。这个效果当然可以用上例中的方法来实现,但那样代码过多,可采用另一种合并的方法,把四条边的属性值分类放在一起。可以把边框线的类型、宽度和颜色归类在一起定义,这里请注意几点:

  1、四条边框线的位置顺序是:上边框线、右边框线、下边框线、左边框线;

  2、本例中边框线的类型只取了一种实线类型,实际上四条边也可以分别定义不同的类型;

  3、属性值可以定义一个、两个、三个或者四个。如果仅定义一个属性值,则其余三个自动取相同值,如:border-style:solid与border-style:solid solid solid solid的效果完全一样;如果仅给出两个或三个值,那么缺失边的属性值将取与对边的值相同。如:boder-width:thin thick与border-width:thin thick thin thick效果相同,border-width:1px 2px 3px与border-width:1px 2px 3px 2px的效果相同。

  还应注意,尽量不要将样式加在<TR>标签内,效果可能无法显示。属性的定义之间以分号隔开,以上都是直接给标签加Style,如果编成CSS样式表把常用的边框线一次定义好,要用时调用一下就行了,非常方便也有效率。当然做成HTC也很棒。在dreamweaver(右键菜单-->CSS样式)中定义CSS非常方便,不用编写代码。

 

  另附:表格边框

 

  评论这张
 
阅读(4)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017