使用 CSS 定制外观

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

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

通过例子简单介绍下 CSS

body1 {2
  font-family: verdana, tahoma, helvetica, arial, sans-serif;3
  text-align: left;4
  background: #fff;5
  color: #222;6
  margin: 1em;7
  padding: 0;8
  font-size: 1em;9
  line-height: 1.2em10
}  

1

选择符,body标记中的内容如果没有专门指定,都应用花括号中定义的样式

2

花括号中的内容为样式定义

3

字体

4

文字左对齐

5

背景色

6

文字色

7

页边距

8

内部页边距

9

行高

10

行距

 

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

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

1

给一个元素指定一个类

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

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

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

1

类选择符,表示类为navheaderdiv标记,应用花括号中的样式

 

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

.command {
color: red;
}  

 

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

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

1

分组选择符

 

空格为包含选择符

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

1

表示table标记中的tr标记中的rd标记

代码块的样式

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

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

1

定义边框粗细、类型、颜色。[59]

2

定义最大高度

3

代码块超出上面定义的最大高度时,加入一个滚动条

简单表格的样式

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

.informaltable 1table {
 border:0;2
 border-top:dashed #999; 3
 border-width:1px 1px 1px 1px;
 margin-left: 10px;
 margin-right: auto;
}  

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

1

包含选择符,类为informaltable的(div)标记,包含的table标记,应用下面的样式

2

table标记设定的边框为表格顶部和左边的边框,取消

3

设定顶部的边框为点划线

4

分组选择符,分别选中表头和表体的单元格

5

表格底部和右边的边框由单元格设定[60]

6

文字对齐


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

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

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