【记录】docbook中借鉴别人的css配置以制作自己的css：docbook_crl.css

【背景】

在折腾了：

【记录】寻找docbook的通用的css配置

和：

【记录】docbook的docbook-xsl-ns-1.78.1的webhelp：尝试配置参数docbook.css.source给定docbook.css.xml看看是否能生成所需的css

之后，看来还是需要自己去：

借鉴别人已有的docbook的css配置，然后合并成自己要的效果，

存为自己的docbook_crl.css。

然后设置为html的自定义的stylesheet，就好了。

【折腾过程】

1.参考之前的：

【记录】寻找docbook的通用的css配置

去看看之前的几个配置。

2.关于：

Cascading Stylesheet for DocBook XML

中的：

Inline Docbook Elements

有个按钮的3D效果，去试试：

经过一番折腾：

对于docbook中用如下代码：

<para>按<keycap>PrtScn</keycap>键可以截屏。</para>

然后编译后的html中的代码是：

<p>按<span class="keycap"><strong>PrtScn</strong></span>键可以截屏。</p>

然后用对应的css：

/* http://www.badgers-in-foil.co.uk/projects/docbook-css/tests/inlines-gen.xml */

/* give keycaps a '3D' shaded look */
span.keycap {
	padding-left: .2em;
	padding-right: .2em;
	border-style: solid;
	border-top-width: 2px;
	border-left-width: 3px;
	border-right-width: 3px;
	border-bottom-width: 4px;
	border-top-color: #eeeecc;
	border-left-color: #eeeecc;
	border-right-color: #999977;
	border-bottom-color: #999977;
	background-color: #ddddbb;
	/* All these borders may interfere with text on the line bellow.  Make
	   the text a little smaller to try and 'pull up' the bottom edge, */
	font-size: smaller;
}

然后对于此按钮，可以正常显示出3D的效果：

（1）Firefox中的按钮的3D效果：

（2）IE10中按钮的3D效果：

（3）Chrome中的按钮的3D效果：

3.对于：

使用 CSS 定制外观

中的各种效果。

也去试试。

先去试试，关于链接的话，去变成带淡蓝色底色的：

然后用的css配置如下（加上emphasis了）：

/* http://i.linuxtoy.org/docs/guide/ch27s21.html#docbook-css03 */
/* http://i.linuxtoy.org/docs/guide/docbook.css */
/* Emphasis */
.emphasis {
font-weight:bold;
}

/* Links */
a:link { color: #22b;background:#E6E6FA;text-decoration: none; }
a.ulink:link { font-weight: bold; color: #55f;background:#E6E6FA;text-decoration: none; }
a:visited { color: #7e4988 ! important;background:#E6E6FA;text-decoration: none; }
a:hover, a:focus { color: #d30e08 ! important;background:#E6E6FA;text-decoration: none; }
a:active { color: #6b77b1 ! important;background:#E6E6FA;text-decoration: none;}

firefox中的效果是：

4.再去参考：

http://svnweb.freebsd.org/doc/head/share/misc/docbook.css

去下载到最新的：

http://svnweb.freebsd.org/doc?view=revision&revision=42538

->

http://svnweb.freebsd.org/doc/head/share/misc/docbook.css?view=markup&pathrev=42538

下载另存为：

docbook_from_freebsd_org.css

然后，借用其中的，提示，注意等admonitions，以及其他，比如文件名是绿色等等配置：

* http://svnweb.freebsd.org/doc/head/share/misc/docbook.css */

body div {
	margin: 0;
}


div.calloutlist dt {
	float: left;
	width: 1em;
}

div.calloutlist dd {
	clear: right;
	margin-bottom: 1ex;
}

.filename {
	color: #007a00;
}

pre.screen {
/*	white-space: pre; */
	font-family: monospace;
	padding: 1ex;
	background-color: #edc;
	border: 1px solid #ccc;
	border-radius: 6px;
	line-height: 1.1;
}

pre.programlisting {
/*	white-space: pre; */
	font-family: monospace;
	padding: 1ex;
	background-color: #eee;
	border: 1px solid #ccc;
	border-radius: 6px;
	line-height: 1.1;
}

效果如下：

即：

filename是绿色的；

programlisting和screen颜色略有不同，且看着都很舒服；

5.然后后来是用如下配置：

/* http://svnweb.freebsd.org/doc/head/share/misc/docbook.css */

div.example p b,
.question,
div.table p b,
div.procedure p b {
	color: #990000;
}

h1.title, h2.title, h3.title, h4.title, h5.title, h6.title,
h3.author, .corpauthor,
div.abstract div.abstract-title,
div.toc div.toc-title,
div.list-of-figures div.toc-title,
div.list-of-tables div.toc-title,
div.list-of-examples div.toc-title {
	font-weight: bold;
	line-height: 1.3;
	margin-top: 1em;
	margin-left: 0;
	color: #990000;
}


body div {
	margin: 0;
}

div.calloutlist dt {
	float: left;
	width: 1em;
}

div.calloutlist dd {
	clear: right;
	margin-bottom: 1ex;
}

.filename {
	color: #007a00;
}

pre.screen {
/*	white-space: pre; */
	font-family: monospace;
	padding: 1ex;
	background-color: #edc;
	border: 1px solid #ccc;
	border-radius: 6px;
	line-height: 1.1;
}

pre.programlisting {
/*	white-space: pre; */
	font-family: monospace;
	padding: 1ex;
	background-color: #eee;
	border: 1px solid #ccc;
	border-radius: 6px;
	line-height: 1.1;
}

/* admonitions */
.note, .tip, .important, .warning, .caution, .example, div.procedure {
	border-radius: 6px;
	padding: 2ex 2ex;
	margin: .75em 3em .75em 1em;
        line-height: 1.3;
}

.note, div.procedure {
	color: #222;
	background: #eee;
	border: 1px solid #ccc;
	width: 90%;
}

.tip {
	color: #004F00;
	background: #d8ecd6;
	border: 1px solid green;
	width: 90%;
}

.important {
	font-style:italic;
	border: 1px solid #a00;
	border-left: 12px solid #c00;
}

.warning {
	color: #9F1313;
	background: #f8e8e8;
	border: 1px solid #e59595;
	width: 90%;
}

.caution {
	color: #3E3535;
	background: #FFC;
	border: 1px solid #e59595;
	width: 90%;
}

.example {
	background: #fefde6;
	border: 1px solid #f1bb16;
	margin: 1em 0;
	padding: 0.2em 2em;
	width: 90%;
}

.admontitle {
	display: inline;
	line-height: 1;
	margin-right: 0;
}

.procedure-title {
	font-weight: bold;
        line-height: 1;
        margin-right: 0;
}

实现的效果如下：

（1）信息info是绿色背景：

（2）tip提示是浅粉色背景：

（3）对于不同类型的screen和programlisting，也可以嵌套覆盖：

（4）标题是紫红色：

（5）example背景是橘黄色：

（6）programminglist的效果：

（7）table表格的，内嵌screen的效果：

（8）warning警告的背景是淡红色：

IE10和Chrome中对于警告还会显示出表格：

总体来说，效果非常好看。

不同内容，很容易区分出来。

【总结】

此刻，整体上，对于自定义的docbook的css配置，内容如下：

/*
* [Filename]
* docbook_crl.css
* 
* [Function]
* Crifan Li's custermization for docbook elements
* 【记录】docbook中借鉴别人的css配置以制作自己的css：docbook_crl.css
* https://www.crifan.com/docbook_refer_other_docbook_css_config_build_myself_docbook_crl_css_file
* 
* [Note]
* 1. about html color and corresponding name  can refer: 
* http://www.w3schools.com/html/html_colornames.asp
*/

/* programlisting */
pre.programlisting {
/* background-color: #F4F4F4 ; */
  background-color: Lavender ;
  border: 1px solid #006600 ;
}

/* screen */
pre.screen {
/* background-color: #F4F4F4 ; */
  background-color: Lavender ;
  border: 1px solid #006600 ;
}

/* equation */
div.equation {
/* background-color: #F4F4F4 ; */
  background-color: Lavender ;
  border: 1px solid #006600 ;
}


/* table */
/* thead=table header */
thead {
  background-color: antiquewhite ;
}

/* QandA: Question and Answer */
tr.question
{
  background-color: antiquewhite ;
}

/* http://www.badgers-in-foil.co.uk/projects/docbook-css/tests/inlines-gen.xml */

/* give keycaps a '3D' shaded look */
span.keycap {
	padding-left: .2em;
	padding-right: .2em;
	border-style: solid;
	border-top-width: 2px;
	border-left-width: 3px;
	border-right-width: 3px;
	border-bottom-width: 4px;
	border-top-color: #eeeecc;
	border-left-color: #eeeecc;
	border-right-color: #999977;
	border-bottom-color: #999977;
	background-color: #ddddbb;
	/* All these borders may interfere with text on the line bellow.  Make
	   the text a little smaller to try and 'pull up' the bottom edge, */
	font-size: smaller;
}

/* http://i.linuxtoy.org/docs/guide/ch27s21.html#docbook-css03 */
/* http://i.linuxtoy.org/docs/guide/docbook.css */
/* Emphasis */
.emphasis {
font-weight:bold;
}

/* Links */
a:link { color: #22b;background:#E6E6FA;text-decoration: none; }
a.ulink:link { font-weight: bold; color: #55f;background:#E6E6FA;text-decoration: none; }
a:visited { color: #7e4988 ! important;background:#E6E6FA;text-decoration: none; }
a:hover, a:focus { color: #d30e08 ! important;background:#E6E6FA;text-decoration: none; }
a:active { color: #6b77b1 ! important;background:#E6E6FA;text-decoration: none;}


/* http://svnweb.freebsd.org/doc/head/share/misc/docbook.css */

div.example p b,
.question,
div.table p b,
div.procedure p b {
	color: #990000;
}

h1.title, h2.title, h3.title, h4.title, h5.title, h6.title,
h3.author, .corpauthor,
div.abstract div.abstract-title,
div.toc div.toc-title,
div.list-of-figures div.toc-title,
div.list-of-tables div.toc-title,
div.list-of-examples div.toc-title {
	font-weight: bold;
	line-height: 1.3;
	margin-top: 1em;
	margin-left: 0;
	color: #990000;
}


body div {
	margin: 0;
}

div.calloutlist dt {
	float: left;
	width: 1em;
}

div.calloutlist dd {
	clear: right;
	margin-bottom: 1ex;
}

.filename {
	color: #007a00;
}

pre.screen {
/*	white-space: pre; */
	font-family: monospace;
	padding: 1ex;
	background-color: #edc;
	border: 1px solid #ccc;
	border-radius: 6px;
	line-height: 1.1;
}

pre.programlisting {
/*	white-space: pre; */
	font-family: monospace;
	padding: 1ex;
	background-color: #eee;
	border: 1px solid #ccc;
	border-radius: 6px;
	line-height: 1.1;
}

/* admonitions */
.note, .tip, .important, .warning, .caution, .example, div.procedure {
	border-radius: 6px;
	padding: 2ex 2ex;
	margin: .75em 3em .75em 1em;
        line-height: 1.3;
}

.note, div.procedure {
	color: #222;
	background: #eee;
	border: 1px solid #ccc;
	width: 90%;
}

.tip {
	color: #004F00;
	background: #d8ecd6;
	border: 1px solid green;
	width: 90%;
}

.important {
	font-style:italic;
	border: 1px solid #a00;
	border-left: 12px solid #c00;
}

.warning {
	color: #9F1313;
	background: #f8e8e8;
	border: 1px solid #e59595;
	width: 90%;
}

.caution {
	color: #3E3535;
	background: #FFC;
	border: 1px solid #e59595;
	width: 90%;
}

.example {
	background: #fefde6;
	border: 1px solid #f1bb16;
	margin: 1em 0;
	padding: 0.2em 2em;
	width: 90%;
}

.admontitle {
	display: inline;
	line-height: 1;
	margin-right: 0;
}

.procedure-title {
	font-weight: bold;
        line-height: 1;
        margin-right: 0;
}

整体上的效果还是很不错的。

不过，对于这些配置，都还是针对于html类型的（单个html，多个html==chunk，webhelp，website等等）

但是对于FO（即pdf等，print out类型），还是无效。

所以要去：

【记录】把docbook中的html的css的配置效果应用到fo即PDF等输出文件类型中

转载请注明：在路上 » 【记录】docbook中借鉴别人的css配置以制作自己的css：docbook_crl.css