最新消息：20210917 已从crifan.com换到crifan.org
    你的位置：在路上 > 工作和技术 > Document Generation > Docbook > 【记录】docbook中借鉴别人的css配置以制作自己的css：docbook_crl.css

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

    Docbook crifan 2741浏览 0评论

    【背景】

    在折腾了：

    【记录】寻找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
* https://www.crifan.org/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

    与本文相关的文章

    发表我的评论
    取消评论

    表情

    Hi，您需要填写昵称和邮箱！

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址
    87 queries in 0.205 seconds, using 20.44MB memory