使用 CSS 定制外观

DocBook 输出为 Html 时，如果不使用 CSS 控制，那么它的外观将比较“朴素”

如果自己写一个 CSS 未免太麻烦，可以随便找一个 DocBook 写的文档，将里面的 CSS 文件拿来修改[58]

通过例子简单介绍下 CSS

body {
  font-family: verdana, tahoma, helvetica, arial, sans-serif;
  text-align: left;
  background: #fff;
  color: #222;
  margin: 1em;
  padding: 0;
  font-size: 1em;
  line-height: 1.2em
}

• em是相对尺寸，当前字体的尺寸=1em；px是绝对尺寸，像素，由显示器分辨率决定；
  字体默认为 16px 大小，也就是说 1em=16px

看看我们生成的 Html 文件的源码

<div class="navheader">
<div class="navfooter">

这里的页眉和页脚，使用的都是div标记，只不过类不同，怎么样为它们分别指定样式呢？在 CSS 文件中找到相关段落：

div.navheader {
  border-bottom: 1px solid #dbddec;
}
 
div.navfooter {
  border-top: 1px solid #dbddec;
}  

如果想对包含某一类的所有标记定义样式，可以单独使用类选择符

.command {
color: red;
}

• 不管command这个类出现在什么标记中，它都应用该样式

如果需要对多个不同的标记定义同一个样式，使用分组选择符

div.navheader, div.navfooter {
  background: #ecedef;
  margin: 0;
  padding: 0.1em .5em;
}  

空格为包含选择符

table tr td {
border:dashed #999;
  text-align: left;
}

代码块的样式

我在 DocBook 中使用 screen 输出代码块，看看如何定义它的样式

.screen {
  color: #000;
  background-color: #e9e9e9;
  font-weight: normal;
  border: 1px dotted #666699;
  max-height:20em; 
  overflow:auto;
}

简单表格的样式

我用简单表格来放置一些需要排列整齐的文字

.informaltable table {
 border:0;
 border-top:dashed #999; 
 border-width:1px 1px 1px 1px;
 margin-left: 10px;
 margin-right: auto;
}  
.informaltable table th, .informaltable table tr td {
 border-right:0;
 border-bottom:dashed #999;
 border-width: 0 1px 1px 0;
 padding: 0.2em 0.4em 0.2em 0.8em;
 text-align: left;
}

[58] 这个东西你不想要的时候满地都是，一旦你想找一个，可能还真找不到，没关系，可以用我的改。我也是改别人的：）

[59] 边框类型包括：solid实线、dashed点划线、dotted虚线、double双线、groove槽状、ridge脊状、inset凹陷、outset凸出

[60] 确实很别扭，但这不关 DocBook 的事，别忘了我们是通过 CSS 对 Html 进行定义