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] | |
定义最大高度 | |
代码块超出上面定义的最大高度时,加入一个滚动条 |
我用简单表格来放置一些需要排列整齐的文字
.informaltabletable { 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] | |
文字对齐 |