简介这份文档面向电子书制作初学者与希望提升排版水平的爱好者系统讲解ePub格式电子书的排版与样式知识帮助解决标签使用不规范、样式设置混乱等常见问题。资源包内含1个doc文件大小约869KB以图文教程形式呈现便于边看边在epubBuilder中实践。内容从ePub本质讲起说明其建立在html与css规范之上随后依次展开文件结构、标签文本、属性声明、元素与空元素、关闭标签等基础知识并重点介绍text-indent、text-align、font-size、color、font-weight等常用属性的取值与写法配合代码范例演示段首缩进、对齐方式、字号与颜色控制等排版效果。目前已有946人学习适合想掌握ePub排版规则、制作更精美电子书的读者参考。1. 拆开一本 ePub 之后为什么你的排版总在阅读器里翻车很多人第一次做 ePub 电子书都会经历同一个场景在编辑器里看着整整齐齐的段落导出来往阅读器里一丢首行缩进没了、行距变了、图片跑到文字上面去了。这不是阅读器跟你作对而是因为 ePub 本质上就是一套 HTML CSS 的网页打包阅读器就是浏览器内核它只认标签和样式表不认你在编辑器里看到的“视觉效果”。这份资源围绕 ePub 的排版与样式展开核心讲的是标签文本、常用属性、CSS 外部样式表以及类选择器的实际用法。它适合两类人一类是刚接触 ePub 制作、想搞清楚“为什么改这里那里会变”的新手另一类是用 epubBuilder 做书做了几本但遇到复杂排版就不知道怎么下手的人。读完你至少能明白ePub 里每一个元素都是一个框排版就是控制这些框的位置、大小和间距。2. 标签文本与元素包含从[p]到[div]的嵌套规则2.1 标签、属性、元素三者的关系在 epubBuilder 里写排版你面对的不是 Word 那种“选中文字点按钮”的操作而是一行一行的标签文本。被一对标签包起来的内容叫元素比如[p]这是一段文本[/p]就是一个 p 元素。开始标签里的styletext-align:center是属性声明用来告诉阅读器这个元素该怎么显示。这里有一个容易混淆的点epubBuilder 用方括号[]写标签但导出成 ePub 之后实际文件里是尖括号。你在编辑器里写[p]最终生成的是p。所以如果你用 WinRAR 打开做好的 ePub 去看不要惊讶为什么标签变了——它们本来就是同一套东西的两种写法。标签必须成对关闭这是铁则。[div][p][span]元素[/span][/p][/div]这种嵌套顺序不能乱先开的后关后开的先关。常见包含顺序是html → body → div → p → span你不能在span里塞一个p就像你不能把一个大箱子装进一个小盒子里。2.2 空元素与自闭合写法有些元素没有实际内容比如换行和横线。这类空元素不需要单独的关闭标签直接在开始标签末尾加/就行[br /] !-- 插入一个空行 -- [hr /] !-- 插入一条横线 --逻辑说明br和hr在 HTML 里就是空元素没有内容可以包裹所以不需要[/br]这种写法。参数上没有什么可调的br就是换行hr就是一条默认样式的横线。如果你需要控制横线的颜色或粗细那得用border属性去做而不是靠hr本身。2.3 元素包含顺序的实际影响元素包含顺序不只是“规矩”它直接影响阅读器怎么解析你的样式。举个例子如果你写[span][p]文字[/p][/span]阅读器会认为你在一个行内元素里放了一个块级元素解析结果不可预测——有的阅读器会强行拆开有的会直接忽略样式。我一般会这样记div是大框用来包一整块内容p是段落框里面放文字span是行内小框只用来标记段落里的某几个字。需要给连续多个段落加同样的样式用div一次性声明而不是每个p都写一遍。3. 常用属性实战缩进、对齐、字号、行距怎么设才不翻车3.1 单位的选择px、em、% 到底用哪个ePub 排版里最常用的三个单位是px、em和%。px是像素绝对值设成多少就是多少em是相对当前字号的高度1em 等于一个字符的高度%是相对于默认值的百分比。这里有一个血泪经验正文缩进和行距尽量用 em不要用 px。因为不同阅读器、不同设备上默认字号不一样你用px固定死了在小屏手机上可能缩进看起来正常到了平板上就缩进过头或者几乎看不见。用em的话缩进会跟着字号自动缩放。[p styletext-indent:2em]这段文字首行缩进两个字符。[/p] [p styletext-indent:0em]这段文字取消首行缩进。[/p]逻辑说明text-indent控制段首缩进epubBuilder 默认是2em。如果你要做悬挂缩进或者首字下沉就需要先用text-indent:0em把默认缩进覆盖掉否则会出现双重缩进的怪现象。3.2 对齐、字号、粗细、斜体、行距的组合写法text-align控制水平对齐取值有left、right、center、justify。中文书正文一般用justify两端对齐标题用center。font-size控制字号可以用px也可以用em我一般用em做相对缩放比如1.3em表示默认字号的 1.3 倍。[p styletext-align:center;font-size:1.5em;font-weight:bold]这是居中加粗的标题[/p] [p styletext-align:justify;line-height:1.5em;font-style:italic]这是两端对齐、行距 1.5 字符、斜体的正文。[/p]逻辑说明多个属性写在同一个style里用英文分号隔开。font-weight:bold是加粗font-style:italic是斜体。line-height控制行与行之间的距离注意它控制的是行距不是段落间距。如果你想让段落之间拉开距离应该用margin-top和margin-bottom而不是把line-height调大。参数上line-height最小是 0不能为负数。设成 0 的时候段落不会换行超出容器的文字会直接跑到显示区域外面去这个坑我踩过一次调了半天才发现是行距设成了 0。3.3 颜色与背景的简单用法color控制文字颜色background-color控制元素背景色。这两个属性在 epubBuilder 里部分已经集成到界面上了但如果你要精确控制还是得手写。[p stylecolor:darkred;background-color:pink]这段文字是深红色背景是粉色。[/p]逻辑说明颜色值可以用英文单词也可以用十六进制。背景色一般用在提示框、引用块上配合border和padding能做出比较醒目的效果。注意背景色不要用太深的颜色配深色文字阅读器上对比度不够会很难看。4. 盒模型与浮动width、margin、padding、float 的配合逻辑4.1 每个元素都是一个框这是理解 ePub 高级排版的起点每一个元素都是一个矩形框。一个元素包含另一个元素就是大框套小框。width和height控制框的宽高margin控制框与框之间的距离外边距padding控制框与框内内容之间的距离内边距。[div stylewidth:80%;margin:1em auto;padding:0.5em;border:1px solid gray] [p styletext-indent:0em;text-align:center]这是一个带边框的盒子[/p] [/div]逻辑说明width:80%让盒子占父容器宽度的 80%margin:1em auto表示上下外边距 1em、左右自动居中。padding:0.5em让内容和边框之间留出 0.5 字符的间距。border:1px solid gray是简写分别设置边框宽度、样式和颜色。margin和padding的赋值方式有三种写一个值表示四边相同写四个值按“上右下左”顺序分别设置或者用margin-top、margin-right这种独立属性单独声明。我一般做提示框的时候用简写做精细调整的时候用独立属性。4.2 float 浮动与 clear 清理的配合float让元素脱离默认的从上到下排列规则浮动到左侧或右侧。在 ePub 里float最主要的应用场景是图片——让图片浮到段落旁边文字自动绕排。[div stylefloat:right;margin:0.5em;max-width:50%] [img srcimages/1.jpg/] [/div] [p]这段文字会自动绕排在图片左侧。[/p]逻辑说明float:right让图片浮到右侧margin:0.5em让图片和周围文字保持距离max-width:50%限制图片最大宽度不超过容器的一半防止图片太大把文字挤得没法看。但这里有一个经典翻车场景如果你连续插入两张浮动图片它们会挤在一起第二张紧贴着第一张而不是各占一行。这时候就需要clear属性[div stylefloat:right;margin:0.5em;max-width:50%;clear:right] [img srcimages/2.jpg/] [/div]逻辑说明clear:right表示这个元素的右侧不允许出现浮动元素所以第二张图会被推到第一张图下方。float:left对应clear:leftfloat:right对应clear:right如果两边都不想有浮动元素就用clear:both。4.3 悬挂缩进与首字下沉的实现思路悬挂缩进的效果是段首的编号或标题突出到段落外面正文整体向右缩排。实现方式是负缩进加外边距[p styletext-indent:-2em;margin-left:2em]一、这是悬挂缩进的段落编号突出在左侧。[/p]逻辑说明text-indent:-2em让第一行向左缩进两个字符margin-left:2em让整个段落向右偏移两个字符。两者配合第一行的编号就“悬挂”在段落外面了。注意必须同时设置外边距否则负缩进会让文字跑到显示区域外面去。首字下沉则是用float把第一个字浮起来[p styletext-indent:0em] [span stylefloat:left;font-size:2.5em;margin:0.2em]当[/span]身为好友的花城摩理离开人世后…… [/p]逻辑说明float:left让第一个字浮到左侧font-size:2.5em放大字号margin:0.2em控制大字与周围文字的距离。注意段落本身要用text-indent:0em覆盖默认缩进否则首字下沉会和缩进叠加效果很怪。5. CSS 外部样式表与类选择器把内联样式全部替换掉5.1 为什么要从内联样式迁移到外部样式表内联样式写在每个标签的style属性里直观但难维护。如果你有 200 个段落都用了同样的样式哪天要改一个颜色就得改 200 个地方。外部样式表把样式集中写在一个.css文件里改一处全篇生效。ePub 文件里的 CSS 文件一般叫main.css用 WinRAR 打开 ePub 就能看到。用文本编辑器打开它你会看到类似这样的结构p { text-indent: 2em; text-align: justify; line-height: 1.5em; margin-top: 0.3em; margin-bottom: 0.3em; }逻辑说明p是选择器花括号里是声明块每条声明用分号隔开。这段代码的意思是所有p元素都首行缩进 2 字符、两端对齐、行距 1.5 字符、上下外边距 0.3 字符。因为 epubBuilder 没有集成 CSS 编辑功能所以你需要先做出成品再用 WinRAR 打开 ePub把修改好的 CSS 文件替换进去。5.2 类选择器的定义与调用类选择器让你可以自定义样式名称然后在标签里通过class属性调用。定义时用小数点开头.red-big { font-size: 1.5em; text-indent: 0em; color: red; font-weight: bold; }逻辑说明.red-big是类选择器的名称可以自定义但绝对不能用数字开头。.style-1没问题.1-style和.123都是错误的。名称建议用能联想到样式的词比如bigfont-red、float-img甚至拼音也行。调用的时候在标签里写class属性[p classred-big]这段文字会应用 red-big 里定义的样式。[/p] [p classred-big float-img]这段文字同时应用两个类选择器的样式。[/p]逻辑说明多个类选择器之间用空格隔开阅读器会把两个类里的样式合并应用。如果两个类里有冲突的属性后定义的或者更具体的那个会生效——但不同阅读器的优先级处理可能有差异所以尽量不要让两个类定义同一个属性。5.3 用类选择器重构内联样式的实际步骤我一般会按这个顺序做迁移先把所有内联样式按用途分类比如“正文段落”“引用块”“图片说明”“提示框”然后为每一类定义一个类选择器写进 CSS 文件最后把文档里的style...全部替换成class...。/* 正文段落 */ .text-body { text-indent: 2em; text-align: justify; line-height: 1.5em; } /* 引用块 */ .text-quote { text-indent: 0em; font-size: 1.1em; margin-left: 2.5em; margin-right: 2.5em; font-style: italic; } /* 提示框 */ .box-tip { background-color: pink; border: 3px dotted darkred; padding: 0.5em; margin: 1em 0; }逻辑说明.text-body用于正文段落.text-quote用于引用文字.box-tip用于提示框。迁移完成后文档里只需要写[p classtext-body]不用再重复写一长串style。这样做的好处是以后要调整正文行距只需要改 CSS 文件里的一行全篇所有正文段落都会跟着变。6. 避坑与排查浮动挤团、缩进失效、样式覆盖的常见问题6.1 连续浮动图片挤成一团现象在段落右侧连续插入两张浮动图片结果两张图紧贴在一起第二张没有换行。原因float的特性是让元素尽量往指定方向靠如果空间够多个浮动元素会排在同一行。解决给第二张图片的容器加上clear:right如果float:right或clear:left如果float:left强制它换到下一行。6.2 首字下沉时缩进叠加现象做了首字下沉之后第一个字和后面的文字之间距离异常大或者整个段落缩进变得很奇怪。原因epubBuilder 默认给段落加了text-indent:2em首字下沉的float和默认缩进叠加了。解决在首字下沉的段落上显式声明text-indent:0em覆盖默认值。6.3 外部样式表替换后不生效现象修改了 CSS 文件并替换回 ePub但阅读器里样式没变。原因可能是阅读器缓存了旧版本或者 CSS 文件路径不对也可能是 CSS 语法有错误导致整个文件被忽略。解决先换一个阅读器打开确认检查 CSS 文件是否放在正确的目录下用 CSS 校验工具检查语法特别注意花括号是否配对、分号是否漏写。6.4 类选择器名称以数字开头现象定义了.1-style这样的类选择器调用时样式完全不生效。原因CSS 规范不允许类选择器名称以数字开头。解决改成字母开头比如.style-1或.s1。6.5 外边距在部分阅读器上不生效现象用margin控制段落间距在某个阅读器上完全没效果。原因部分阅读器对margin的支持不完整尤其是老版本。解决需要拉开段落距离时优先用[br /]插入空行而不是依赖margin。br标签的兼容性比margin好得多。7. 进阶技巧用 CSS 类选择器组合出可复用的排版模块做多了之后你会发现ePub 排版真正省力的方式不是一个个调属性而是把常用样式做成“模块”用类选择器组合调用。比如我习惯把提示框、引用块、图片说明、悬挂缩进各做一个类然后在文档里按需拼装。/* 基础盒子 */ .box-base { padding: 0.5em; margin: 1em 0; border: 1px solid #ccc; } /* 提示框变体 */ .box-tip { background-color: #fff8e1; border: 2px dotted #e6a23c; } /* 引用块变体 */ .box-quote { background-color: #f5f5f5; border-left: 4px solid #999; font-style: italic; } /* 图片容器 */ .img-box { float: right; margin: 0.5em; max-width: 50%; clear: right; text-align: center; } /* 图片说明文字 */ .img-caption { font-size: 0.9em; text-indent: 0em; text-align: center; color: #666; }逻辑说明.box-base提供盒子的基础内边距、外边距和边框.box-tip和.box-quote在基础之上覆盖背景色和边框样式。调用的时候写[div classbox-base box-tip]就能得到一个提示框。图片容器.img-box已经包含了浮动、外边距、最大宽度和清理属性直接套在div上就行。[div classbox-base box-tip] [p styletext-indent:0em;font-weight:bold;text-align:center]小贴士[/p] [p styletext-indent:0em]麦芽糖作为统称对应的品类很多购买时注意区分。[/p] [/div] [div classimg-box] [img srcimages/1.jpg/] [p classimg-caption]图片说明文字[/p] [/div]逻辑说明提示框里两个段落都显式声明了text-indent:0em因为提示框内的文字不需要首行缩进。图片容器里图片和说明文字一起浮动说明文字用.img-caption控制字号和对齐。验证方法很简单把做好的 ePub 分别用两到三个不同的阅读器打开重点看浮动图片有没有挤团、提示框背景色有没有丢失、行距和缩进是否一致。如果某个阅读器上样式明显跑偏优先检查是不是用了它不支持的属性换成兼容性更好的写法。从那以后我每次做完一本 ePub都会强制走一遍“三阅读器检查”一个桌面端、一个手机端、一个平板端确认排版没有翻车才导出最终版。希望帮到你。本文还有配套的精品资源点击获取