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 }
看看我们生成的 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; }
如果需要对多个不同的标记定义同一个样式,使用分组选择符
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; }
定义边框粗细、类型、颜色。[59] | |
定义最大高度 | |
代码块超出上面定义的最大高度时,加入一个滚动条 |
我用简单表格来放置一些需要排列整齐的文字
.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; }
包含选择符,类为informaltable 的(div)标记,包含的table 标记,应用下面的样式 |
|
table标记设定的边框为表格顶部和左边的边框,取消 | |
设定顶部的边框为点划线 | |
分组选择符,分别选中表头和表体的单元格 | |
表格底部和右边的边框由单元格设定[60] | |
文字对齐 |