10.16　装饰文本

可以使用样式表对文本进行装饰，如添加下划线和删除线（可能用来表示修改），参见图10.16.1和图10.16.2。

  1. body {
  2.      background: #eef;
  3.      color: #909;
  4.      font: 100% "Palatino Linotype", Palatino, serif;
  5. }
  6.  
  7. h1,
  8. h2 {
  9.      color: navy;
  10.      font: 1.375em "Arial Black", Arial, sans-serif;
  11.      letter-spacing: .4em;
  12.      text-align: center;
  13. }
  14.  
  15. h1 {
  16.      text-transform: uppercase;
  17. }
  18.  
  19. h2 {
  20.      font-size: 1.15em;
  21.      font-variant: small-caps;
  22. }
  23.  
  24. p {
  25.      font-size: .875em;
  26.      line-height: 1.6;
  27.      text-align: justify;
  28.      text-indent: 1.5em;
  29. }
  30.  
  31. em {
  32.      font-weight: bold;
  33. }
  34.  
  35. /* 链接 */
  36. a:link {
  37.      color: #74269d;
  38.      font-weight: bold;
  39.      text-decoration: none;
  40. }
  41.  
  42. a:visited {
  43.      color: #909;
  44.      text-decoration: none;
  45. }
  46.  
  47. a:hover {
  48.      color: #c3f;
  49.      font-weight: bold;
  50.      text-decoration: underline;
  51. }
  52.  
  53. /* 目录导航 */
  54. .toc {
  55.      background: #ebc6f9;
  56. }
  57.  
  58. .toc a {
  59.      font-size: .75em;
  60. }

图10.16.1　这是图10.16.2显示的整个页面的样式表，包括改变链接样式的text-decoration。不过，下划线等文本装饰并不限于a元素，它们还可以应用于其他元素

10.16　装饰文本 - 图1

图10.16.2　在最上面的图中，可以看到所有链接（包括目录中的链接）的下划线都被移除了。页面下方有另外一个链接，它以斜体显示，它是一本书的书名，因此笔者使用了位于链接里的cite元素标记（cite元素的默认样式为斜体）。最下面的图显示了鼠标停留时链接的下划线样式，它们提醒访问者可以进一步采取行动。本章前面部分已经将a:hover的颜色设为#c3f

  1. 装饰文本的步骤

  • 输入text-decoration:。

  • 在冒号（:）后输入underline以添加下划线；

或者输入overline以添加上划线；

或者输入line-through以添加删除线。

  1. 取消文本装饰的方法

输入text-decoration: none;。

提示　对于正常情况下有装饰的元素（如a、del、ins）以及从父元素继承了装饰样式的元素，可以取消它们的装饰。

　

提示　将链接的下划线去掉固然很好，但是必须用别的方式将链接与周围的内容进行区分，否则访问者就无法知道它们是可激活的链接。