文字的颜色 
我们用 color 可以来决定文字，周边，以及横线的颜色 

  P.greentext {color: green}

请看下面的例子 这一行文字的颜色是绿色的
 

背景的颜色 

背景的颜色可以由 background-color 来控制， 比如我们想叫一些文字段落的背景颜色为浅绿色的， 

  P.greenbg {background-color: #CCEFCC}

请看下面的例子 

这一行的背景颜色是浅绿色的

背景的图象 
我们不但可以给整个网页加个背景图象，我们还可以给其中一个元素加个背景图象，比如说我们给 P 的背景加上天空的背景 

  P.sky {background-image: url(../images/sky.jpg)}

请看下面的例子 

这段文字的背景图案是天空.这段文字的背景图案是天空.这段文字的背景图案是天空.这段文字的背景图案是天空.这段文字的背景图案是天空.这段文字的背景图案是天空. 

我们不但可以决定是否给背景加图象， 还可以确定是否让这个图象重复以及在哪个方向重复。比如我们只让图象在整个网页的竖直方向重复我们就可以产生左边有个图象条的效果。 

  body {background-image: url(sky.jpg); background-repeat: repeat-y top right}

background-repeat可以有这些可能值：no-repeat, repeat-x, repeat-y 

我们还可以用 background-attachment 来决定当别人浏览你的网页的是否让背景图象随着内容一起滚动。比如我们如果不让背景图象动， 

  body {background-image: url(sky.jpg); background-attachment: fixed}

元素周边的空格 margin

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

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

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

元素内部周边的空格 padding

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

  TABLE.pad {padding: 5mm; background-color: #CCEFCC}

padding is five.padding is five.padding is five.padding is five.padding is five.padding is five.padding is five.padding is five.padding is five.padding is five.padding is five.padding is five.  

我们同样可以用 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.inset {border-width: 5px; border-color: red; border-style: inset}的效果:
这个 P 元素的边框的形态是 inset 

P.outset {border-width: 5px; border-color: red; border-style: outset}的效果:
这个 P 元素的边框的形态是 outset 

P.double {border-width: 5px; border-color: red; border-style: double}的效果:
这个 P 元素的边框的形态是 double 

P.groove {border-width: 5px; border-color: red; border-style: groove}的效果:
这个 P 元素的边框的形态是 groove 

P.ridge {border-width: 5px; border-color: red; border-style: ridge}的效果:
这个 P 元素的边框的形态是 ridge 
务器租用、托管；域名注册；虚拟主机

欢迎咨询/