【记录】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效果:

firefox show button 3d effect

(2)IE10中按钮的3D效果:

ie10 button 3d effect

(3)Chrome中的按钮的3D效果:

chrome show button 3d effect

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中的效果是:

firefox show links with background and emphasis is bold

 

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 is blue and screen and programlisting diff background

即:

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)标题是紫红色:

title purple read info tip diff background color

(5)example背景是橘黄色:

embed example light within programminglist

(6)programminglist的效果:

programminglist background color is good

(7)table表格的,内嵌screen的效果:

table within is screen is also look good

(8)warning警告的背景是淡红色:

warning is light red is good

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

chrome and ie10 show warning is in table

 

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

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

 

【总结】

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

/*
* [Filename]
* docbook_crl.css
* 
* [Function]
* Crifan Li's custermization for docbook elements
* 【记录】docbook中借鉴别人的css配置以制作自己的css:docbook_crl.css
* http://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等输出文件类型中



发表评论

电子邮件地址不会被公开。 必填项已用*标注

无觅相关文章插件,快速提升流量