外观html与外观css的区别,使用 CSS 定制外观

使用 CSS 定制外观

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

}

选择符，body标记中的内容如果没有专门指定，都应用花括号中定义的样式

花括号中的内容为样式定义

字体

文字左对齐

背景色

文字色

页边距

内部页边距

行高

行距

em是相对尺寸，当前字体的尺寸=1em；px是绝对尺寸，像素，由显示器分辨率决定；

字体默认为 16px 大小，也就是说 1em=16px

看看我们生成的 Html 文件的源码

>

给一个元素指定一个类

这里的页眉和页脚，使用的都是div标记，只不过类不同，怎么样为它们分别指定样式呢？在 CSS 文件中找到相关段落：

div.

navheader {

border-bottom: 1px solid #dbddec;

}

div.navfooter {

border-top: 1px solid #dbddec;

}

类选择符，表示类为navheader的div标记，应用花括号中的样式

如果想对包含某一类的所有标记定义样式，可以单独使用类选择符

.command {

color: red;

}

不管command这个类出现在什么标记中，它都应用该样式

如果需要对多个不同的标记定义同一个样式，使用分组选择符

div.navheader,

div.navfooter {

background: #ecedef;

margin: 0;

padding: 0.1em .5em;

}

分组选择符

空格为包含选择符

table tr td

{

border:dashed #999;

text-align: left;

}

表示table标记中的tr标记中的rd标记

代码块的样式

我在 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]

文字对齐

[58]这个东西你不想要的时候满地都是，一旦你想找一个，可能还真找不到，没关系，可以用我的改。我也是改别人的：)

[59]边框类型包括：solid实线、dashed点划线、dotted虚线、double双线、groove槽状、ridge脊状、inset凹陷、outset凸出

[60]确实很别扭，但这不关 DocBook 的事，别忘了我们是通过 CSS 对 Html 进行定义