xrQ第一天空网络

这一节我们将讨论如何用 CSS 来控制网页中文字定位, 这些性质是 xrQ第一天空网络

• line-height: 行距
• text-align: 向那个方向看齐
• vertical-align: 向上还是向下看齐
• text-indent: 段落第一行空格
• text-transform: 字母的大小写
• text-decoration: 给文字加装饰, 比如下滑线

行距 xrQ第一天空网络

我们有时候可能会想把行距加大点使得文字看的清楚一些. CSS 中的 line-height 可以取得这种调节 xrQ第一天空网络

  P.double {line-height: 2}

请看下面的比较.

你要让 line-height 等于 3 的话, 那行距就更大了.xrQ第一天空网络

看齐 xrQ第一天空网络

一般来说我们都是向左边看齐. 但有的时候也有其他的选择, 比如说向右边看齐. xrQ第一天空网络

    P.right {text-align: right}
    P.center {text-align: center}
    P.justify {text-align: justify}

请看下面的比较.

text-align 可以有 left, right, center, 和 justifyxrQ第一天空网络

段落的首行空格 xrQ第一天空网络

如果我们想让第一行的开头空几格, 可以用 text-indent, 比如 xrQ第一天空网络

  P {text-indent: 1cm}

请看下面的例子.

这个性质显然跟中文没关系, 但如果我们要处理英文, 你可以 用 text-transform 来改变英文的大小写. 比如, 让每个字的 第一个字母大写 xrQ第一天空网络

    P.capitalize {text-transform: capitalize}
    P.up {text-transform: uppercase}
    P.low {text-transform: lowercase}

请看下面的比较.

就是在文字上加下滑线, 或中间加条线的. 比如 xrQ第一天空网络

    P.underline {text-decoration: underline}
    P.line-through {text-decoration: line-through}

请看下面的比较.

其实最常用的是我们想去掉联接下面的下滑线.xrQ第一天空网络
A {text-decoration: none}xrQ第一天空网络

无序： disc, circle, square, decimal
有序： upper-roman, lower-roman, upper-alpha, lower-alpha.

  LI.upperroman {list-style-type: upper-roman}

  P.greentext {color: green}

  P.greenbg {background-color: #CCEFCC}

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

  body {background-image: url(../image/cdbk009a.jpg);
        background-repeat: repeat-y}

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

xrQ第一天空网络

这一节我们讨论如何用 CSS 来控制四周的空格以及边框的设定 xrQ第一天空网络

元素周边的空格 margin

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

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

H3 的负值 -5em 抵销了 BODY 5em 的空格。 xrQ第一天空网络

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

元素内部周边的空格 padding

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

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

我们同样可以用 padding-left, padding-right, padding-top, 和 padding-bottom 来分别控制左，右，上，下的元素内部的周边空格。 xrQ第一天空网络

元素边框的宽度

我们可以用 border-width 性质来调节边框的宽度。 比如 xrQ第一天空网络

  P.width5 {border-width: 1px}

这个 P 元素的边框宽度是 1 pxxrQ第一天空网络

你可以用 border-left-width, border-right-width, border-top-width, 和 border-bottom-width 来分别决定左，右，上，下边的宽度 xrQ第一天空网络

元素边框的颜色

我们可以用 border-color 性质来调节边框的颜色。 比如 xrQ第一天空网络

  P.colorred {border-color: red}

这个 P 元素的边框的颜色是红色的xrQ第一天空网络

元素边框的形态

我们可以用 border-style 性质来调节边框的形态。 比如 xrQ第一天空网络

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

这个 P 元素的边框的形态是 insetxrQ第一天空网络

这个 P 元素的边框的形态是 outsetxrQ第一天空网络

这个 P 元素的边框的形态是 doublexrQ第一天空网络

这个 P 元素的边框的形态是 groovexrQ第一天空网络

这个 P 元素的边框的形态是 ridgexrQ第一天空网络