§ ITPOW >> 文档 >> CSS

CSS 控制边框

作者:不详 来源: 日期:2002-8-5
[code]
  <STYLE>
H3 {color: #cc6600}
TABLE.pad {padding: 5mm; background-color: #CCEFCC}
P.width5 {border-width: 1px}
P.colorred {border-width: 2px; border-color: red}
P.inset {border-width: 5px; border-color: red; border-style: inset}
P.outset {border-width: 5px; border-color: red; border-style: outset}
P.double {border-width: 5px; border-color: red; border-style: double}
P.groove {border-width: 5px; border-color: red; border-style: groove}
P.ridge {border-width: 5px; border-color: red; border-style: ridge}
  </STYLE>
[/code]
这一节我们讨论如何用 CSS 来控制四周的空格以及边框的设定 

元素周边的空格 margin性质 margin 可被用来决定周边的空格, 假如我们想让整个网页在
左边有 5em 但让标题没有任何空格 

  BODY {margin: 5em}
  H3 {margin: -5em}

H3 的负值 -5em 抵销了 BODY 5em 的空格。 

另外我们还可以分别用 margin-left, margin-right, margin-top, 
和 margin-bottom 来设定 左,右,上,下的空格 

元素内部周边的空格 padding
初看起来这个性质跟 margin 好象一样。 其实它们之间有
很大的区别。margin 的空格是相对于其他的元素所空的,
而 padding 是在元素的周边和内部的内容所空的空格。在
下面的例子,我们用有背景颜色的 TABLE 来让你注意这
个性质 

  TABLE.pad {padding: 5mm; background-color: #CCEFCC}
[code]
<TABLE class="pad"><TR><TD> 
Petersen was arrested in a modest apartment building in Studio 
City, Calif., which he had been sharing with three other people. The 
Marshals entered the apartment using a key provided by the 
building's manager. When they entered, the Marshals said, they 
found Petersen alone -- sitting on his bed and using his laptop 
computer.  
</TD></TR></TABLE> 
[/code]
我们同样可以用 padding-left, padding-right, padding-top, 和
padding-bottom 来分别控制左,右,上,下的元素内部
的周边空格。 

元素边框的宽度
我们可以用 border-width 性质来调节边框的宽度。 比如 

  P.width5 {border-width: 1px}

这个 P 元素的边框宽度是 1 px 

你可以用 border-left-width, border-right-width, border-top-width, 
和 border-bottom-width 来分别决定左,右,上,下边的宽度 

元素边框的颜色
我们可以用 border-color 性质来调节边框的颜色。 比如 

  P.colorred {border-color: red}

这个 P 元素的边框的颜色是红色的 

元素边框的形态
我们可以用 border-style 性质来调节边框的形态。 比如 

  P.inset {border-style: inset, border-width: 5px}

[code]
<p class="inset">这个 P 元素的边框的形态是 inset </P> 
<p class="outset">这个 P 元素的边框的形态是 outset </P> 
<p class="double">这个 P 元素的边框的形态是 double </P> 
<p class="groove">这个 P 元素的边框的形态是 groove </P> 
<p class="ridge">这个 P 元素的边框的形态是 ridge </P>
[/code]
相关文章