ePub的排版与样式
作者：qway
前　言
在阅读本文前，先要对ePub格式电子书要有一个明确的认识：
“ePub是一种电子书的载体，而不是一种麻烦的文本保存格式！”
如果无法认同我这句话，或者认为txt文本也可以算作电子书的话，请不要继续阅读本文。
好了，言归正传。
本文将对制作ePub时的排版、样式等做一个简要的阐述。其中大部分仅仅是我个人制作ePub的经验，涉及到的专业知识可能与“正确”有所出入。
在阅读本教程时，建议打开你的epubBuilder，然后新建一个章节，边看边实践。相信只要读完本贴后，你就能大致掌握如何使用epubBuilder制作更多、更漂亮的排版样式。
那么，现在就开始，来领略“游戏文字”的魅力吧！
第一章 基础知识
ePub格式电子书是在html与css等等的规范上确立的一种eBook规范。
它的本质，其实就是将文本、图片、样式等等所有ePub规范中允许使用的素材制作成我们平时看到的“网页”，并且通过结构文件来使得阅读器能够分章索引。
如果你已经熟知html语言以及css，请跳过本节内容。
关于ePub文件结构的基础教程，可以看这里：
www.soepub/discuz/thread-60775-1-4.html
既然ePub是建立在html基础上的，那么理论上，只要网页能够做到的效果，ePub也能够做到。
所以，在使用epubBuilder制作排版样式前，我们需要先对简单了解一下html与css的知识。 
我们在使用epubBuilder制作时，应该会看到过类似这样的代码：
[p ]这是一段文本[/p]
这种代码，是用来描述一段文字在阅读器中需要被显示的样式。这就是标签文本。
而在ePub中，所有的一切都是通过标签文本来实现的。我们先来认识一下标签文本。
被一对标签所包括的内容称为〈元素〉 
这段代码就是一个〈元素〉 ，其中：
p
被称为〈开始标签〉，代表一个段落的开始。
 
被称为〈属性〉，声明了一个标签所具有的值。
/p
被称为〈关闭标签〉，代表一个段落的结束。
〈开始标签〉与〈关闭标签〉是成对的，
所有的〈标签〉必须被关闭。
“这是一段文本”是〈元素〉的内容。被一对标签包括的内容都称为〈元素〉。
第二章 标签文本详解
在html中，〈标签〉是被尖括号（<>）所包括的；而在epubBuilder中，〈标签〉则是用方括号（[]）所包括。
epubBuilder会自动为所有的段落添加 p 与 /p 用来标明段落，所以一般情况下不用你自行添加标签。
为标签添加属性的做法叫做〈声明〉或者〈说明〉。
标签文本必须使用小写字母与符号。
关于标签
标签有很多种类，在epubBuilder中经常能看到的有：
[div]   代表一块内容
[p]   　代表一个段落
[span] 　用于段落中
[h3]  代表标题
[a]   　代表链接
[img]   代表图片
关于属性的结构：
在以上属性中：
style 是属性的类型；
text-align:center 是属性的名称与赋值。
属性写在〈开始标签〉中，并且与〈标签〉相隔一个空格；
名称与赋值必须被引号包括。
多个赋值之间使用英文分号（;）隔开。例如：
[p ]
关于元素：
[p ]这是一段文本[/p]
元素的显示方式由〈开始标签〉决定；
以上内容被称为〈p元素〉
如果标签改为 div ，那么这个元素就被称为〈div元素〉
元素可以是文本、图片，甚至是另一个元素。
例如： 
[p ]这是一段[span]文本[/span][/p]
上述范例中，一个〈p元素〉中包括了一个〈span元素〉。
元素有包含顺序，你不能在一个〈span元素〉中加入一个〈p元素〉。
常用标签包含顺序：　
padding是外边距还是内边距
〈html〉→〈body〉→〈div〉→〈p〉→〈span〉
另外，还有一些元素没有实际内容，这类元素被称为〈空元素〉。
〈空元素〉不需要关闭标签，直接在开始标签中加 / 即可关闭。
经常用到的空元素有：　
[br /] 代表一个空行。
[hr /] 代表一条横线。
关于关闭标签：
〔/p〕
在关闭标签中：
/ 声明了这是一个关闭标签；
P 则是声明了你要关闭哪一个标签。
如果涉及元素包括，关闭标签必须按照顺序关闭：
例如开始标签是 [p][span]
那么必须先关闭 span ，然后再关闭 p 。
[div][p][span]元素[/span][/p][/div]
所有标签必须被关闭，这是铁则，请不要忘记。
第三章 常用属性介绍
到此为止，你应该对〈标签文本〉有一个初步的印象。
如果还是觉得不清楚，请回到上一层。
在使用epubBuilder制作书籍时，epubBuilder会自动将所有的段落首行缩进2字符，行距为正常情况下的130%。
这个默认设置可以满足大部分的需要，但是需要特定的排版式样时，就需要我们自己为〈元素〉添加〈声明〉了。
本节内容主要对一些常用的属性进行解释，实际操作时可以按照需要自行组合。
单位
既然是赋值，那么必定会有计量单位。
以下是一些常用的计量单位。
%
这就不用我解释了吧。相对于默认值的百分比。
px
像素，1px就是1个像素的高度或者宽度。
em
字符，1em相当于1个字符的高度或者宽度。这是一个相对值。
比如你设置了默认字符大小为16px，那么1em=16px；
如果默认字符大小是20px，那么1em=20px。
常用属性简介
text-indent
text-indent 用来控制段首缩进。
epubBuilder默认text-indent=2em。
如果需要其他值，在属性中添加text-indent并设置数值。
范例：
[p ]这段文本没有段首缩进。[/p]
text-align
text-align 用来控制段落的水平对齐方式。默认值为〈left〉。
取值：
left  　左对齐（默认）
right  右对齐
center　 居中对齐
justify　 两端对齐
范例：
[p ]这段文本将会居中显示[/p]
font-size
font-sizes 用来控制文字的大小。默认值为〈16px〉。
font-sizes 也可使用large、medium、small等描述来赋值。由于这种方式不够直观，不建议初学者使用。
范例：
[p ]这段文字的大小是25个像素。[/p]
[p ]这段文字的大小是默认的1.3倍。[/p]
color
color 用来控制文字的颜。
这个功能已经被集成在了epubBuilder中，所以不做解释了。
font-weight
font-weight 用来控制文字的粗细，默认值是〈normal〉。
虽然 font-weight 可以用 b 标签来取代，但是在标签文本中使用时不建议这么做。
取值：
bold  　加粗
bolder  超粗
lighter  变细
范例：
[p ]这段文本的字体会加粗[/p]
font-style
font-style 属性控制文字的样式，默认值为〈normal〉。
与 font-weight 属性一样，虽然 font-style 可以用 i 标签代替，但是在标签文本中不建议这么做。
取值：
italic　斜体
范例：
[p ]这段文本会显示为斜体字。[/p]
line-height
line-height 属性用来控制行距。最小值是0，不可以是负数。
当 line-height=0 时，段落将不产生换行行为。
超出浏览器的文字将直接显示到浏览器外，而不是换一行继续显示。
注意：这个属性控制的是行与行之间的距离，而不是段落之间的距离。
范例：
[p ]这段文本的行距是1个字符的高度[/p]
现在，打开你的epubBuilder，新建一个章节。
试试看使用标签文本对文字进行样式设定。
只要成功几次后，相信你一定会学会如何使用标签文本。
第四章 高级属性的应用
在本节内容中，将对以下5个属性的基本应用做一个简单的介绍： 
width　height　margin　padding　float 
在学习这些属性之前，我们先要有一个概念，即： 
“每一个元素都是一个框！” 
请把所有的元素都想象成一个框型结构。 
一个元素包括另一个元素的行为，就是一个大框中套着一个小框！ 
我们来看一个例子：
[div]
[p]这是一个段落。[/p]
[p]这是一个段落。[span]这是一段文本。[/span][/p]
[/div]
请将上述标签文本，想象成下图所示的样子： 
 
如果觉得这一点都不困难，那我们就继续下一步。 
属性简介
width 
顾名思义，控制〈元素〉的宽度。也就是〈框〉的宽度。
height 
控制〈元素〉的高度。也就是〈框〉的高度。
margin 
控制元素的〈外边距〉。也就是〈框〉与其他〈框〉之间的距离。默认值为0。
padding 
控制〈元素〉的〈内边距〉 。也就是〈框〉与元素中所包含内容的距离。默认值为0。
关于取值
width与height使用数值，最小是0。
margin与padding使用数值，但是赋值方法比较特殊，有多种赋值方式。
这里我只讲三种。 
以margin属性为例： 
margin:1px 
方法一：在margin属性中对所有的〈外边距〉赋予同一个值。 
margin:1px 1px 1px 1px 
方法二：在margin属性中同时对四个边距分别进行声明。
    顺序是“上、右、下、左”。 
margin-top:1px;
margin-right:1px;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。