简介这份资源围绕“ePub的排版和样式”展开面向希望系统掌握电子书制作基础知识的编辑、独立出版人及爱好者重点解决对ePub规范理解不清、排版样式难以落地的问题。内容从ePub格式的网页本质讲起明确其基于HTML与CSS规范经结构文件实现分章索引随后逐步拆解文件结构、标签文本、属性写法、元素嵌套、空元素、关闭标签等核心概念并结合epubBuilder介绍text-indent、text-align、font-size等常用排版属性与组合方式帮助读者快速上手制作层次清晰、样式美观的电子书。资源包为1个doc文档整包大小869KB篇幅紧凑适合对照epubBuilder边看边练。目前已有956人浏览学习是一份简明实用的ePub入门参考资料。1. 把 ePub 当成网页来做排版的理论起点与能力边界很多人一接触 ePub 电子书脑子里还是 txt 的升级版复制、粘贴、回车分段结果排版一塌糊涂。我建议先扭转观念ePub 是一种电子书的载体不是一种麻烦的文本保存格式。它本质上是把文本、图片和样式按网页规范装进一个压缩包再用结构文件让阅读器分章索引。换句话说你排版 ePub 的思路应该和排一个静态网页完全一样。这篇文章围绕一个非常具体的场景展开——用手工标签、内联样式和外部 CSS 控制段落、图片、边框与间距把普通文稿做成阅读器里耐看的版式。适合刚开始接触 epubBuilder 这类工具的人也适合需要批量整理文档、课程笔记的人当参考。2. 标签文本与元素用手写标签控制每一个段落2.1 元素、空元素与关闭顺序先搞懂这套规则再动手在动手排版之前先把标签文本这个东西弄清楚。所谓标签文本就是用一对结构符号把内容包起来告诉阅读器“这一段该怎么显示”。标准 HTML 里用的是尖括号 而 epubBuilder 这类工具为了输入方便在编辑区里通常用方括号 []。它生成的最终文件依然是标准的 HTML 结构所以你在编辑器里写 [p] 和写本质是一回事只是写法不同。先看一个最小例子[p styletext-align:center]这是一段文本[/p]这段代码里整个内容被称为一个“元素”。p 是开始标签表示一个段落的开始styletext-align:center 是属性声明了段落如何对齐/p 是关闭标签表示段落结束“这是一段文本”是元素的内容。开始标签和关闭标签必须成对出现。“所有标签必须被关闭”这句话在严格的 ePub 体系里是对的。虽然某些网页浏览器能容忍漏掉关闭标签但阅读器内核各异漏一个就可能让后面的整段样式失效。我在刚开始做电子书的时候就因为忘记关闭 [p] 标签结果后面十几个段落的对齐方式全部被带偏了最后只能逐段排查。那次的教训直接改变了我的习惯每写完一段先数一遍开始和结束标签是否配对。除了普通标签还有一种没有内容的空元素。空元素不需要写关闭标签直接在开始标签末尾加一个斜杠即可。最常用的是[br /] [hr /]br 代表一个空行类似 HTML 里的换行hr 代表一条横线适合在章节之间做视觉分隔。注意 br 后面的斜杠别漏漏了容易被某些阅读器理解成开始标签然后一直找不到关闭标签。元素还可以嵌套。常见的包含顺序是 html → body → div → p → span。嵌套时必须遵守“先开的后关、后开的先关”。比如[div][p][span]元素[/span][/p][/div]如果你把关闭顺序写反写成 [div][p][span]元素[/p][/span][/div]阅读器解析标签时就会迷路最终显示出来的样式变成乱套。遇到这种问题先别急着怀疑 CSS去检查标签是否闭合、顺序是否正确。2.2 常用属性速查缩进、对齐、字号、颜色、行距属性可以说是标签的调节旋钮。下面这组属性覆盖了九成正文排版需求你可以把它们看作基础工具箱。属性作用默认值常用取值text-indent段首缩进2em0em、2em、-2emtext-align水平对齐leftleft、right、center、justifyfont-size字号16px12px、1.2em、1.5emcolor文字颜色阅读器默认#333、red、darkredfont-weight字重normalbold、bolder、lighterfont-style字体样式normalitalicline-height行距130%1em、1.5em、150%先说单位。常用就这么三个%、px、em。% 是相对默认值的百分比px 是像素em 是字符的相对单位。1em 等于当前字号下 1 个字符的高度或宽度。如果你设置了默认字号 16px那么 1em16px如果某段文字放大到 20px那么在这一段里 1em20px。所以用 em 表示缩进和行距比用 px 更耐得住字号调整。text-indent 控制首行缩进。epubBuilder 默认给 text-indent 是 2em这符合中文出版物的阅读习惯。如果你做的是标题、图片说明或者首字下沉通常要把缩进清零[p styletext-indent:0em;text-align:center]标题居中且不缩进[/p]text-align 控制水平对齐。正文我一般用 justify 两端对齐中文书这样做出来的右缘更整齐不会出现参差不齐的锯齿。居中和靠右则用于标题、图片说明、落款。font-size 有两种写法固定像素和相对字符。初学者容易踩坑的是在正文里写死 15px、17px 这类数值一旦读者在阅读器里调整全局字体大小固定像素的文字就可能和全局设置冲突。我一般建议正文用默认字号需要放大的地方用 1.2em、1.5em 相对放大这样整体缩放时比例还能保持。color 控制文字颜色。很多工具已经把颜色选择集成进去但手写也很简单。用英文色名 red、darkred、gray 最方便用十六进制 #333、#666 更精确。尽量避免过于鲜艳的颜色阅读器背景不一定是纯白浅灰文字在某些设备上可能看不清。font-weight 和 font-style 分别控制粗细和倾斜。你可以用加粗的段落来做小标题用斜体做引用文字。不建议用 b 或 i 标签代替因为在严格页面结构里它们是表现性标签语义含糊属性控制更稳妥。line-height 控制行距注意它管的是同一段落内行与行之间的距离不是段落与段落之间的间距。数值可以是 1em、1.5em也可以是 130%。当年我把 line-height 理解成段间距在段落之间拼命加行距数值结果看起来并不是想要的效果。段间距应该交给 margin 和 padding 处理这个放到下一章讲。2.3 第一份可用代码新建章节后手写样式理论讲再多不如直接打开工具新建一个章节实操。下面是我通常用来做正文页的一段样式代码[p styletext-align:center;font-size:1.2em;font-weight:bold;color:#333]第一章 夜的边界[/p] [p styletext-indent:2em;text-align:justify;line-height:130%]这是正文的第一段。段首自动缩进两字符两端对齐行距保持阅读器默认的 130%。[/p] [p styletext-indent:2em;text-align:justify;line-height:130%]这是第二段。注意我没有在段落之间手动加空行段落间距完全交给阅读器默认的 margin 值。[/p] [p styletext-indent:0em;text-align:right;color:#666]——摘自某书稿[/p]代码逻辑很简单章标题用居中、加粗、相对字号放大正文两段保持 2em 缩进和两端对齐末尾落款居右且颜色调灰。这里有个容易被忽视的点epubBuilder 会自动为每个新段落添加 p 与 /p所以你不必手动加标签。实际使用时你只需要在已有的 p 标签里面补上 style 属性即可。参数怎么调如果你是做散文、小说行距 130% 是安全区缩进 2em 是默认都不太需要动。如果你做教程、技术文档建议正文行距改成 150%并且在要点段落里加 font-weight:bold 作为提示。如果你做诗歌千万不要加 text-indent诗行通常要顶格也别用两端对齐居左或居中更合适。把这段代码放进新章节后的预期结果是标题居中加粗、正文缩进、末尾落款居右。如果你发现正文没有缩进先去确认是不是阅读器默认覆盖了 text-indent再检查是否写成了 text-index 这类拼写错误。属性名多一个字母少一个字母阅读器不会报错只会静默忽略。这是我见过最多的“样式没生效”的原因。另外属性值之间的分号要用英文分号中文全角分号会被解析成非法字符后面属性也会跟着失效。做到这一步你已经掌握了 ePub 排版的第一层能力控制文字本身的显示。3. 盒模型与浮动图片绕排、分栏与小部件布局3.1 每个元素都是一个框width / height / margin / padding如果要我说 ePub 排版里最容易养成的习惯那就是把每个元素都想象成一个框。一段文字是一个框一张图片是一个框一个包含图片和说明文字的组合也是一个框。框与框之间是 margin 控制的外边距框的内部和内容之间是 padding 控制的内边距。不理解这一层后面做图文混排、做提示框、做图片下方的注脚都会像在拆盲盒。看一个例子[div][p]这是一个段落。[/p][p]这是另一个段落。[span]这是一段文本。[/span][/p][/div]从外到内div 是最外层的框里面装着两个 p第二个 p 里又装着一个 span。如果给 div 加背景色背景区域会延伸到整个框的尺寸如果给 span 加边框边框会紧紧包住那一段内联文字。width 和 height 控制框本身的宽高。取值最小是 0可以是像素也可以是百分比。在 ePub 里width 常用百分比比如图片的 max-width:50%意思是图片最多占到容器的一半宽度这是防止大图撑开版面最常用的保护手段。height 平时用得少书籍排版里很少需要固定高度让内容自然撑开更稳妥。margin 和 padding 的取值方式比较多样。以 margin 为例有三种等价写法margin:1px; margin:1px 1px 1px 1px; margin-top:1px;margin-right:1px;margin-bottom:1px;margin-left:1px;第一种给四个方向统一赋值第二种按上、右、下、左的顺序分别赋值第三种用独立的属性逐个声明。三种效果一样用哪种看场景。如果你只需要右键距就直接用第三个写法的简化版[p stylemargin-right:5%]这段文字右侧留出 5% 的外边距[/p]padding 的写法和 margin 完全一样。区别在于margin 是框与外部元素的距离padding 是框与其内部内容的距离。用 div 做一个提示框时padding 必不可少——没有 padding文字会直接贴到边框上看起来很挤。3.2 float 和 clear文字绕图、连续多图不挤团搞清楚框模型之后再来看浮动。元素的默认排列是从上往下的文字逐段向下图片插在中间就把文字挤开这是标准文档流的规则。打破这个规则让图片浮到段落的一侧、文字环绕图片就需要 float 属性。float 的取值只有 left 和 right。下面的代码会把一张图片浮到右侧文字自动从左侧环绕[div stylefloat:right;margin:0.5em;max-width:50%][img srcimages/1.jpg /][/div] [p styletext-indent:2em]正文段落……[/p]float 的坑在于连续使用多张浮动图片时它们会粘在一起。比如你在两小段文字之间各放一张图并要求两张图都浮在右边结果两张图会顺着浮动方向贴在一起中间没有任何间距。这不是排版工具的问题是 float 的自然行为——浮动元素不会自动避开其他浮动元素。解决方式是用 clear 属性。clear 规定元素的两侧是否允许出现浮动元素常用取值 right、left、both。以右侧浮动为例只要给后续图片的浮动规则加上 clear:right图片就不会继续往右上角叠加了img-float-right { float:right; margin:0.5em; max-width:50%; clear:right; }这个属性在文字绕图场景里几乎成了标配。我的习惯是只要页面里有一处图片用了 float就一定把 clear 同步补上省得返回去调二稿。3.3 组合实践带框标题、提示框和代码效果把盒模型和浮动放在一起可以组合出很多花式排版。下面三个做法是我做电子书时高频使用的小部件。第一个是带边框和标题的图片。思路是用 div 做一个箱子图片和说明文字都装在里面然后给箱子加边框。代码如下[div stylefloat:right;border-style:solid;border-width:1px;margin:0.5em;padding:0.5em;text-align:center;max-width:50%] [img srcimages/1.jpg /] [p stylefont-size:1em;font-weight:bold;text-align:center]图 1示例图片[/p] [/div]这里用到了 border-style 边框样式和 border-width 边框宽度。border-style 常用取值有 solid 实线、double 双线、dotted 圆点、dashed 虚线。border-color 用来指定边框颜色默认会和文字同色。用 div 包裹图片和文字是为了让边框把两者整体围住而不是只框住图片。第二个是提示框。做法和带边框图片类似加背景颜色即可[div stylebackground-color:#fdf6e3;border-style:dashed;border-width:2px;padding:0.8em;margin:1em 0em] [p stylefont-weight:bold;text-align:center;font-size:1.1em]》》小贴士《《[/p] [p styletext-indent:0em;line-height:150%]这是提示内容。注意背景色、边框和内边距的配合文字不能贴边框。[/p] [/div]background-color 可以直接用颜色名或十六进制值。这类提示框在教程类电子书里非常常用适合放重点提醒也适合做引用和注释。第三个是悬挂缩进。所谓悬挂缩进就是段首的编号标题突出在段落的左侧整个段落主体向右缩进。它需要 text-indent 和 margin-left 配合使用.suspend { text-indent:-2em; margin-left:2em; }注意text-indent 用了负值所以第一行会向左突出如果不同时把 margin-left 设置为正值突出的部分可能会跑出屏幕显示区域这就是一个典型的边界坑。后面避坑章节会专门展开。4. 外部样式表与类选择器从逐段改到全册统一4.1 CSS 文件的结构与修改流程前面用的都是内联样式表也就是把 style 属性直接写在开始标签里。它的好处是直观但缺点也很明显几十章的内容要统一调整一种样式或者这个样式要重复使用二十次内联方式就变得笨拙。这时候就需要 CSS 外部样式表。在 ePub 里外部样式表通常是一个 .css 文件。你用压缩软件打开做好的 ePub就能看到类似 main.css 的文件用任何文本编辑器都能打开。它的结构是这样p { text-indent:2em; text-align:justify; line-height:130%; }p 是选择器表示你要改的是所有 p 元素花括号里是属性冒号后面是值。你可以多行写也可以写成一整行格式不敏感但分号不能丢。外部样式表的最大优势是全局生效。声明了 p 元素的样式之后整本书里所有没有特殊覆盖的段落都会跟着变。这意味着统一排版这件事不用再逐章手工去做。epubBuilder 这类工具通常没有集成 CSS 编辑面板所以要修改样式流程往往是先用工具生成 ePub再用压缩软件打开把修改好的 CSS 文件覆盖回去最后重新打包。这个流程听起来简单但容易在文件层级上翻车。最稳妥的做法是先确认 .css 文件在压缩包里的路径用相同路径替换不要新建文件夹不要改文件名。如果你要新增一个外部样式表而不是修改已有的需要在内容文档里引入链接。常见做法是在 html 头部加一行link relstylesheet typetext/css hrefstyles/main.css /路径必须和压缩包内的实际位置对应我一般把 css 文件放在 epub 根目录下的 styles 文件夹里这样层级清晰替换时也好找。4.2 类选择器的命名规则与调用方法光改全局样式还不够有时候你想要的是“一部分段落大字号加红”另一部分段落“缩进并斜体”这时候就要用类选择器。类选择器用点开头.red-big { font-size:1.5em; text-indent:0em; color:red; font-weight:bold; }名称可以包含字母、数字、横杠和下划线但绝不能以数字开头。下面这样命名没问题.style-1 { ... } .bigfont-red { ... } .conclusion { ... }这样命名会出错.1-style { ... } .123 { ... }类选择器命名最好能体现用途比如 bigfont-red、float-img、tip-box。看到名字就想起要表达的效果以后维护效率会高很多。调用类选择器用的是 class 属性[p classred-big]这段文字会变成大号红色加粗[/p]一个标签也可以同时调用多个类选择器中间用空格隔开[p classred-big tip]这段文字同时应用 red-big 和 tip 两个类[/p]多类并存时谁的优先级更高取决于样式表里的声明顺序。一般在 ePub 里不会遇到特别复杂的层叠冲突但知道这个机制能少踩不少坑。4.3 内联样式转类选择器何时值得切换以我个人习惯一页里的两三处临时样式用内联足够。当一个样式在多个章节反复出现时就应该迁移到类选择器。迁移的过程可以理解成三步第一步把重复用到的样式抽到 CSS 文件里命名一个类第二步把原正文里的 style 属性删掉改成 class第三步全书再次编译确认显示效果没有变化。示例原来写在段落里的内联样式[p styletext-indent:0em;font-size:1.3em;font-weight:bold;color:darkred]节标题[/p] [p styletext-indent:0em;font-size:1.3em;font-weight:bold;color:darkred]另一个节标题[/p]迁移成外部样式表.section-title { text-indent:0em; font-size:1.3em; font-weight:bold; color:darkred; }正文段改成[p classsection-title]节标题[/p] [p classsection-title]另一个节标题[/p]这样做的收益在后期的全局修改如果节标题颜色要换个色只改一处 CSS整本书所有节标题都会变。用内联方式就得在全书范围搜索替换。不过要注意类选择器不是万能的。阅读器对 CSS 的支持程度参差不齐某些老阅读器对复杂选择器支持不佳但对简单的类选择器和 p、div 这类基础选择器兼容性最好。所以我的建议是类选择器用简单的点类避免使用后代选择器、伪类这类高级语法。里的边框、背景、浮动尽量用基础属性完成不要为了炫技引入复杂结构。5. 避坑ePub 排版里最容易翻车的 5 个细节5.1 标签不闭合导致整段样式丢失现象某一段文字看起来没有缩进、没有对齐跟在它后面的所有段落样式全部乱掉。原因前一个片段的开始标签缺失关闭标签阅读器解析时把后面的内容也吞进同一种样式范围里了。解决回到 epubBuilder 中查看代码模式检查所有 p、div 标签是否配对。我的习惯是每个文件写完做一次标签计数尤其是空元素 br 和 hr 的斜杠别漏。凡是出现整段样式丢失先怀疑标签闭合后怀疑 CSS。5.2 负缩进导致文字跑出屏幕现象做悬挂缩进时文字左边超出了阅读器的显示区域首行标题看不见或者显示到屏幕外。原因text-indent 用了负值但没有同时用 margin-left 撑出正的外边距来抵消。负缩进本身没有错误错在缺少配合属性。解决悬挂缩进标准写法是 text-indent:-2em 和 margin-left:2em 成对出现。如果你想用更大的负缩进就同步把 margin-left 加大到相同数值保证首行标题仍落在版心内。5.3 浮动图片挤成一团现象连续插入两到三张图片都设置了 float:right结果显示多张图在右上角堆在一起中间没有空隙。原因float 会让元素脱离文档流后续浮动元素会尽量贴近前一个浮动元素于是出现了挤团。解决为浮动的图片样式加上 clear:right 或 clear:both。如果图片之间存在间距要求再配合 margin-right 或 margin-bottom 控制缝隙。clear 的值要对应 float 方向float:left 用 clear:leftfloat:right 用 clear:right不放心就直接 both。5.4 不同阅读器对 CSS 属性支持不一致现象同一本书在 A 阅读器里文字缩进正常在 B 阅读器里段首缩进消失浮动图片在 C 阅读器里直接变成图片全宽。原因ePub 阅读器的内核存在差异有些老设备对 margin、padding、float 支持不全或者默认样式覆盖了文件里的声明。解决核心正文排版只用 margin、text-align、text-indent 这类兼容性好的属性float、background-color 这类锦上添花的样式控制在内容的关键部分上不要在整本书的正文上依赖它们。需要验证时至少用两个阅读器各过一遍一个是桌面端一个是移动端。5.5 手动替换 CSS 后文件层级不对现象按照流程修改了 .css 文件覆盖回压缩包里再打开阅读器样式还是旧的。原因常见原因是替换时放错了层级。有的 ePub 的 CSS 文件在根目录下的 static 文件夹里有的在 EPUB 目录下。用压缩软件打开时把一个文件夹下的同名文件替换到了另一个位置自然不会生效。解决修改前先记录原 CSS 文件的完整路径和文件名替换时保持完全相同路径。替换完先别急着拷回设备直接在桌面端阅读器里预览检查。如果你使用的工具支持直接导入无 XML 结构错误的压缩包也可以保留原文件的 MIME 类型和文件顺序不要随意增删文件避免整包结构被破坏。6. 收尾技巧几个能直接落地的验证手段与习惯6.1 先做小范围验证再铺全册排版改完别直接整本输出。我会先挑一个内容最全的章节作为验证样例所谓内容最全意思是同时包含标题、正文段落、图片、引用、提示框这几种元素。把本次用到的所有样式全部在这个章节里覆盖一遍。验证通过了再进行全书替换。这个习惯能大幅减少“全书改完才发现某属性不支持”的返工。6.2 用“反编译”确认样式真的进去了“反编译”听起来玄学其实就是用压缩软件打开成品 ePub直接看 CSS 文件内容和内容文档里的 class 引用是否一致。我每次改完 CSS 都会做这一步确认 main.css 里的类名和正文里的 class 属性完全对应并且确认文件在压缩包里没有被重名文件覆盖。如果发现样式完全没有生效这一步几乎能在十秒内定位到原因而不是去正文里逐段找。6.3 保持一份“样式速查表”我现在会在工作目录里长期保存一份速查表记下每个常用属性的名称、默认值和过去踩过的坑。做新书的时候直接复制表模板而不是每次都从零写。速查表不追求完整只记录自己常用的二十个属性和五个最容易翻车的实例比如负缩进要搭配 margin-left、浮动图片要加 clear。这个习惯让我接手旧项目时省了很多重复排查时间。这些年做 ePub 排版最大的体会是样式表写出来容易稳定输出难。标签配对检查、双阅读器预览、反编译核对这三步缺一步都可能埋下暗雷。从那以后我每次做完一套样式都会强制自己走一遍这个流程哪怕只改了一行 CSS 也不跳过。排版这件事多数问题不是难而是懒出来的。希望帮到你。本文还有配套的精品资源点击获取
简介这份资源围绕“ePub的排版和样式”展开面向希望系统掌握电子书制作基础知识的编辑、独立出版人及爱好者重点解决对ePub规范理解不清、排版样式难以落地的问题。内容从ePub格式的网页本质讲起明确其基于HTML与CSS规范经结构文件实现分章索引随后逐步拆解文件结构、标签文本、属性写法、元素嵌套、空元素、关闭标签等核心概念并结合epubBuilder介绍text-indent、text-align、font-size等常用排版属性与组合方式帮助读者快速上手制作层次清晰、样式美观的电子书。资源包为1个doc文档整包大小869KB篇幅紧凑适合对照epubBuilder边看边练。目前已有956人浏览学习是一份简明实用的ePub入门参考资料。1. 把 ePub 当成网页来做排版的理论起点与能力边界很多人一接触 ePub 电子书脑子里还是 txt 的升级版复制、粘贴、回车分段结果排版一塌糊涂。我建议先扭转观念ePub 是一种电子书的载体不是一种麻烦的文本保存格式。它本质上是把文本、图片和样式按网页规范装进一个压缩包再用结构文件让阅读器分章索引。换句话说你排版 ePub 的思路应该和排一个静态网页完全一样。这篇文章围绕一个非常具体的场景展开——用手工标签、内联样式和外部 CSS 控制段落、图片、边框与间距把普通文稿做成阅读器里耐看的版式。适合刚开始接触 epubBuilder 这类工具的人也适合需要批量整理文档、课程笔记的人当参考。2. 标签文本与元素用手写标签控制每一个段落2.1 元素、空元素与关闭顺序先搞懂这套规则再动手在动手排版之前先把标签文本这个东西弄清楚。所谓标签文本就是用一对结构符号把内容包起来告诉阅读器“这一段该怎么显示”。标准 HTML 里用的是尖括号 而 epubBuilder 这类工具为了输入方便在编辑区里通常用方括号 []。它生成的最终文件依然是标准的 HTML 结构所以你在编辑器里写 [p] 和写本质是一回事只是写法不同。先看一个最小例子[p styletext-align:center]这是一段文本[/p]这段代码里整个内容被称为一个“元素”。p 是开始标签表示一个段落的开始styletext-align:center 是属性声明了段落如何对齐/p 是关闭标签表示段落结束“这是一段文本”是元素的内容。开始标签和关闭标签必须成对出现。“所有标签必须被关闭”这句话在严格的 ePub 体系里是对的。虽然某些网页浏览器能容忍漏掉关闭标签但阅读器内核各异漏一个就可能让后面的整段样式失效。我在刚开始做电子书的时候就因为忘记关闭 [p] 标签结果后面十几个段落的对齐方式全部被带偏了最后只能逐段排查。那次的教训直接改变了我的习惯每写完一段先数一遍开始和结束标签是否配对。除了普通标签还有一种没有内容的空元素。空元素不需要写关闭标签直接在开始标签末尾加一个斜杠即可。最常用的是[br /] [hr /]br 代表一个空行类似 HTML 里的换行hr 代表一条横线适合在章节之间做视觉分隔。注意 br 后面的斜杠别漏漏了容易被某些阅读器理解成开始标签然后一直找不到关闭标签。元素还可以嵌套。常见的包含顺序是 html → body → div → p → span。嵌套时必须遵守“先开的后关、后开的先关”。比如[div][p][span]元素[/span][/p][/div]如果你把关闭顺序写反写成 [div][p][span]元素[/p][/span][/div]阅读器解析标签时就会迷路最终显示出来的样式变成乱套。遇到这种问题先别急着怀疑 CSS去检查标签是否闭合、顺序是否正确。2.2 常用属性速查缩进、对齐、字号、颜色、行距属性可以说是标签的调节旋钮。下面这组属性覆盖了九成正文排版需求你可以把它们看作基础工具箱。属性作用默认值常用取值text-indent段首缩进2em0em、2em、-2emtext-align水平对齐leftleft、right、center、justifyfont-size字号16px12px、1.2em、1.5emcolor文字颜色阅读器默认#333、red、darkredfont-weight字重normalbold、bolder、lighterfont-style字体样式normalitalicline-height行距130%1em、1.5em、150%先说单位。常用就这么三个%、px、em。% 是相对默认值的百分比px 是像素em 是字符的相对单位。1em 等于当前字号下 1 个字符的高度或宽度。如果你设置了默认字号 16px那么 1em16px如果某段文字放大到 20px那么在这一段里 1em20px。所以用 em 表示缩进和行距比用 px 更耐得住字号调整。text-indent 控制首行缩进。epubBuilder 默认给 text-indent 是 2em这符合中文出版物的阅读习惯。如果你做的是标题、图片说明或者首字下沉通常要把缩进清零[p styletext-indent:0em;text-align:center]标题居中且不缩进[/p]text-align 控制水平对齐。正文我一般用 justify 两端对齐中文书这样做出来的右缘更整齐不会出现参差不齐的锯齿。居中和靠右则用于标题、图片说明、落款。font-size 有两种写法固定像素和相对字符。初学者容易踩坑的是在正文里写死 15px、17px 这类数值一旦读者在阅读器里调整全局字体大小固定像素的文字就可能和全局设置冲突。我一般建议正文用默认字号需要放大的地方用 1.2em、1.5em 相对放大这样整体缩放时比例还能保持。color 控制文字颜色。很多工具已经把颜色选择集成进去但手写也很简单。用英文色名 red、darkred、gray 最方便用十六进制 #333、#666 更精确。尽量避免过于鲜艳的颜色阅读器背景不一定是纯白浅灰文字在某些设备上可能看不清。font-weight 和 font-style 分别控制粗细和倾斜。你可以用加粗的段落来做小标题用斜体做引用文字。不建议用 b 或 i 标签代替因为在严格页面结构里它们是表现性标签语义含糊属性控制更稳妥。line-height 控制行距注意它管的是同一段落内行与行之间的距离不是段落与段落之间的间距。数值可以是 1em、1.5em也可以是 130%。当年我把 line-height 理解成段间距在段落之间拼命加行距数值结果看起来并不是想要的效果。段间距应该交给 margin 和 padding 处理这个放到下一章讲。2.3 第一份可用代码新建章节后手写样式理论讲再多不如直接打开工具新建一个章节实操。下面是我通常用来做正文页的一段样式代码[p styletext-align:center;font-size:1.2em;font-weight:bold;color:#333]第一章 夜的边界[/p] [p styletext-indent:2em;text-align:justify;line-height:130%]这是正文的第一段。段首自动缩进两字符两端对齐行距保持阅读器默认的 130%。[/p] [p styletext-indent:2em;text-align:justify;line-height:130%]这是第二段。注意我没有在段落之间手动加空行段落间距完全交给阅读器默认的 margin 值。[/p] [p styletext-indent:0em;text-align:right;color:#666]——摘自某书稿[/p]代码逻辑很简单章标题用居中、加粗、相对字号放大正文两段保持 2em 缩进和两端对齐末尾落款居右且颜色调灰。这里有个容易被忽视的点epubBuilder 会自动为每个新段落添加 p 与 /p所以你不必手动加标签。实际使用时你只需要在已有的 p 标签里面补上 style 属性即可。参数怎么调如果你是做散文、小说行距 130% 是安全区缩进 2em 是默认都不太需要动。如果你做教程、技术文档建议正文行距改成 150%并且在要点段落里加 font-weight:bold 作为提示。如果你做诗歌千万不要加 text-indent诗行通常要顶格也别用两端对齐居左或居中更合适。把这段代码放进新章节后的预期结果是标题居中加粗、正文缩进、末尾落款居右。如果你发现正文没有缩进先去确认是不是阅读器默认覆盖了 text-indent再检查是否写成了 text-index 这类拼写错误。属性名多一个字母少一个字母阅读器不会报错只会静默忽略。这是我见过最多的“样式没生效”的原因。另外属性值之间的分号要用英文分号中文全角分号会被解析成非法字符后面属性也会跟着失效。做到这一步你已经掌握了 ePub 排版的第一层能力控制文字本身的显示。3. 盒模型与浮动图片绕排、分栏与小部件布局3.1 每个元素都是一个框width / height / margin / padding如果要我说 ePub 排版里最容易养成的习惯那就是把每个元素都想象成一个框。一段文字是一个框一张图片是一个框一个包含图片和说明文字的组合也是一个框。框与框之间是 margin 控制的外边距框的内部和内容之间是 padding 控制的内边距。不理解这一层后面做图文混排、做提示框、做图片下方的注脚都会像在拆盲盒。看一个例子[div][p]这是一个段落。[/p][p]这是另一个段落。[span]这是一段文本。[/span][/p][/div]从外到内div 是最外层的框里面装着两个 p第二个 p 里又装着一个 span。如果给 div 加背景色背景区域会延伸到整个框的尺寸如果给 span 加边框边框会紧紧包住那一段内联文字。width 和 height 控制框本身的宽高。取值最小是 0可以是像素也可以是百分比。在 ePub 里width 常用百分比比如图片的 max-width:50%意思是图片最多占到容器的一半宽度这是防止大图撑开版面最常用的保护手段。height 平时用得少书籍排版里很少需要固定高度让内容自然撑开更稳妥。margin 和 padding 的取值方式比较多样。以 margin 为例有三种等价写法margin:1px; margin:1px 1px 1px 1px; margin-top:1px;margin-right:1px;margin-bottom:1px;margin-left:1px;第一种给四个方向统一赋值第二种按上、右、下、左的顺序分别赋值第三种用独立的属性逐个声明。三种效果一样用哪种看场景。如果你只需要右键距就直接用第三个写法的简化版[p stylemargin-right:5%]这段文字右侧留出 5% 的外边距[/p]padding 的写法和 margin 完全一样。区别在于margin 是框与外部元素的距离padding 是框与其内部内容的距离。用 div 做一个提示框时padding 必不可少——没有 padding文字会直接贴到边框上看起来很挤。3.2 float 和 clear文字绕图、连续多图不挤团搞清楚框模型之后再来看浮动。元素的默认排列是从上往下的文字逐段向下图片插在中间就把文字挤开这是标准文档流的规则。打破这个规则让图片浮到段落的一侧、文字环绕图片就需要 float 属性。float 的取值只有 left 和 right。下面的代码会把一张图片浮到右侧文字自动从左侧环绕[div stylefloat:right;margin:0.5em;max-width:50%][img srcimages/1.jpg /][/div] [p styletext-indent:2em]正文段落……[/p]float 的坑在于连续使用多张浮动图片时它们会粘在一起。比如你在两小段文字之间各放一张图并要求两张图都浮在右边结果两张图会顺着浮动方向贴在一起中间没有任何间距。这不是排版工具的问题是 float 的自然行为——浮动元素不会自动避开其他浮动元素。解决方式是用 clear 属性。clear 规定元素的两侧是否允许出现浮动元素常用取值 right、left、both。以右侧浮动为例只要给后续图片的浮动规则加上 clear:right图片就不会继续往右上角叠加了img-float-right { float:right; margin:0.5em; max-width:50%; clear:right; }这个属性在文字绕图场景里几乎成了标配。我的习惯是只要页面里有一处图片用了 float就一定把 clear 同步补上省得返回去调二稿。3.3 组合实践带框标题、提示框和代码效果把盒模型和浮动放在一起可以组合出很多花式排版。下面三个做法是我做电子书时高频使用的小部件。第一个是带边框和标题的图片。思路是用 div 做一个箱子图片和说明文字都装在里面然后给箱子加边框。代码如下[div stylefloat:right;border-style:solid;border-width:1px;margin:0.5em;padding:0.5em;text-align:center;max-width:50%] [img srcimages/1.jpg /] [p stylefont-size:1em;font-weight:bold;text-align:center]图 1示例图片[/p] [/div]这里用到了 border-style 边框样式和 border-width 边框宽度。border-style 常用取值有 solid 实线、double 双线、dotted 圆点、dashed 虚线。border-color 用来指定边框颜色默认会和文字同色。用 div 包裹图片和文字是为了让边框把两者整体围住而不是只框住图片。第二个是提示框。做法和带边框图片类似加背景颜色即可[div stylebackground-color:#fdf6e3;border-style:dashed;border-width:2px;padding:0.8em;margin:1em 0em] [p stylefont-weight:bold;text-align:center;font-size:1.1em]》》小贴士《《[/p] [p styletext-indent:0em;line-height:150%]这是提示内容。注意背景色、边框和内边距的配合文字不能贴边框。[/p] [/div]background-color 可以直接用颜色名或十六进制值。这类提示框在教程类电子书里非常常用适合放重点提醒也适合做引用和注释。第三个是悬挂缩进。所谓悬挂缩进就是段首的编号标题突出在段落的左侧整个段落主体向右缩进。它需要 text-indent 和 margin-left 配合使用.suspend { text-indent:-2em; margin-left:2em; }注意text-indent 用了负值所以第一行会向左突出如果不同时把 margin-left 设置为正值突出的部分可能会跑出屏幕显示区域这就是一个典型的边界坑。后面避坑章节会专门展开。4. 外部样式表与类选择器从逐段改到全册统一4.1 CSS 文件的结构与修改流程前面用的都是内联样式表也就是把 style 属性直接写在开始标签里。它的好处是直观但缺点也很明显几十章的内容要统一调整一种样式或者这个样式要重复使用二十次内联方式就变得笨拙。这时候就需要 CSS 外部样式表。在 ePub 里外部样式表通常是一个 .css 文件。你用压缩软件打开做好的 ePub就能看到类似 main.css 的文件用任何文本编辑器都能打开。它的结构是这样p { text-indent:2em; text-align:justify; line-height:130%; }p 是选择器表示你要改的是所有 p 元素花括号里是属性冒号后面是值。你可以多行写也可以写成一整行格式不敏感但分号不能丢。外部样式表的最大优势是全局生效。声明了 p 元素的样式之后整本书里所有没有特殊覆盖的段落都会跟着变。这意味着统一排版这件事不用再逐章手工去做。epubBuilder 这类工具通常没有集成 CSS 编辑面板所以要修改样式流程往往是先用工具生成 ePub再用压缩软件打开把修改好的 CSS 文件覆盖回去最后重新打包。这个流程听起来简单但容易在文件层级上翻车。最稳妥的做法是先确认 .css 文件在压缩包里的路径用相同路径替换不要新建文件夹不要改文件名。如果你要新增一个外部样式表而不是修改已有的需要在内容文档里引入链接。常见做法是在 html 头部加一行link relstylesheet typetext/css hrefstyles/main.css /路径必须和压缩包内的实际位置对应我一般把 css 文件放在 epub 根目录下的 styles 文件夹里这样层级清晰替换时也好找。4.2 类选择器的命名规则与调用方法光改全局样式还不够有时候你想要的是“一部分段落大字号加红”另一部分段落“缩进并斜体”这时候就要用类选择器。类选择器用点开头.red-big { font-size:1.5em; text-indent:0em; color:red; font-weight:bold; }名称可以包含字母、数字、横杠和下划线但绝不能以数字开头。下面这样命名没问题.style-1 { ... } .bigfont-red { ... } .conclusion { ... }这样命名会出错.1-style { ... } .123 { ... }类选择器命名最好能体现用途比如 bigfont-red、float-img、tip-box。看到名字就想起要表达的效果以后维护效率会高很多。调用类选择器用的是 class 属性[p classred-big]这段文字会变成大号红色加粗[/p]一个标签也可以同时调用多个类选择器中间用空格隔开[p classred-big tip]这段文字同时应用 red-big 和 tip 两个类[/p]多类并存时谁的优先级更高取决于样式表里的声明顺序。一般在 ePub 里不会遇到特别复杂的层叠冲突但知道这个机制能少踩不少坑。4.3 内联样式转类选择器何时值得切换以我个人习惯一页里的两三处临时样式用内联足够。当一个样式在多个章节反复出现时就应该迁移到类选择器。迁移的过程可以理解成三步第一步把重复用到的样式抽到 CSS 文件里命名一个类第二步把原正文里的 style 属性删掉改成 class第三步全书再次编译确认显示效果没有变化。示例原来写在段落里的内联样式[p styletext-indent:0em;font-size:1.3em;font-weight:bold;color:darkred]节标题[/p] [p styletext-indent:0em;font-size:1.3em;font-weight:bold;color:darkred]另一个节标题[/p]迁移成外部样式表.section-title { text-indent:0em; font-size:1.3em; font-weight:bold; color:darkred; }正文段改成[p classsection-title]节标题[/p] [p classsection-title]另一个节标题[/p]这样做的收益在后期的全局修改如果节标题颜色要换个色只改一处 CSS整本书所有节标题都会变。用内联方式就得在全书范围搜索替换。不过要注意类选择器不是万能的。阅读器对 CSS 的支持程度参差不齐某些老阅读器对复杂选择器支持不佳但对简单的类选择器和 p、div 这类基础选择器兼容性最好。所以我的建议是类选择器用简单的点类避免使用后代选择器、伪类这类高级语法。里的边框、背景、浮动尽量用基础属性完成不要为了炫技引入复杂结构。5. 避坑ePub 排版里最容易翻车的 5 个细节5.1 标签不闭合导致整段样式丢失现象某一段文字看起来没有缩进、没有对齐跟在它后面的所有段落样式全部乱掉。原因前一个片段的开始标签缺失关闭标签阅读器解析时把后面的内容也吞进同一种样式范围里了。解决回到 epubBuilder 中查看代码模式检查所有 p、div 标签是否配对。我的习惯是每个文件写完做一次标签计数尤其是空元素 br 和 hr 的斜杠别漏。凡是出现整段样式丢失先怀疑标签闭合后怀疑 CSS。5.2 负缩进导致文字跑出屏幕现象做悬挂缩进时文字左边超出了阅读器的显示区域首行标题看不见或者显示到屏幕外。原因text-indent 用了负值但没有同时用 margin-left 撑出正的外边距来抵消。负缩进本身没有错误错在缺少配合属性。解决悬挂缩进标准写法是 text-indent:-2em 和 margin-left:2em 成对出现。如果你想用更大的负缩进就同步把 margin-left 加大到相同数值保证首行标题仍落在版心内。5.3 浮动图片挤成一团现象连续插入两到三张图片都设置了 float:right结果显示多张图在右上角堆在一起中间没有空隙。原因float 会让元素脱离文档流后续浮动元素会尽量贴近前一个浮动元素于是出现了挤团。解决为浮动的图片样式加上 clear:right 或 clear:both。如果图片之间存在间距要求再配合 margin-right 或 margin-bottom 控制缝隙。clear 的值要对应 float 方向float:left 用 clear:leftfloat:right 用 clear:right不放心就直接 both。5.4 不同阅读器对 CSS 属性支持不一致现象同一本书在 A 阅读器里文字缩进正常在 B 阅读器里段首缩进消失浮动图片在 C 阅读器里直接变成图片全宽。原因ePub 阅读器的内核存在差异有些老设备对 margin、padding、float 支持不全或者默认样式覆盖了文件里的声明。解决核心正文排版只用 margin、text-align、text-indent 这类兼容性好的属性float、background-color 这类锦上添花的样式控制在内容的关键部分上不要在整本书的正文上依赖它们。需要验证时至少用两个阅读器各过一遍一个是桌面端一个是移动端。5.5 手动替换 CSS 后文件层级不对现象按照流程修改了 .css 文件覆盖回压缩包里再打开阅读器样式还是旧的。原因常见原因是替换时放错了层级。有的 ePub 的 CSS 文件在根目录下的 static 文件夹里有的在 EPUB 目录下。用压缩软件打开时把一个文件夹下的同名文件替换到了另一个位置自然不会生效。解决修改前先记录原 CSS 文件的完整路径和文件名替换时保持完全相同路径。替换完先别急着拷回设备直接在桌面端阅读器里预览检查。如果你使用的工具支持直接导入无 XML 结构错误的压缩包也可以保留原文件的 MIME 类型和文件顺序不要随意增删文件避免整包结构被破坏。6. 收尾技巧几个能直接落地的验证手段与习惯6.1 先做小范围验证再铺全册排版改完别直接整本输出。我会先挑一个内容最全的章节作为验证样例所谓内容最全意思是同时包含标题、正文段落、图片、引用、提示框这几种元素。把本次用到的所有样式全部在这个章节里覆盖一遍。验证通过了再进行全书替换。这个习惯能大幅减少“全书改完才发现某属性不支持”的返工。6.2 用“反编译”确认样式真的进去了“反编译”听起来玄学其实就是用压缩软件打开成品 ePub直接看 CSS 文件内容和内容文档里的 class 引用是否一致。我每次改完 CSS 都会做这一步确认 main.css 里的类名和正文里的 class 属性完全对应并且确认文件在压缩包里没有被重名文件覆盖。如果发现样式完全没有生效这一步几乎能在十秒内定位到原因而不是去正文里逐段找。6.3 保持一份“样式速查表”我现在会在工作目录里长期保存一份速查表记下每个常用属性的名称、默认值和过去踩过的坑。做新书的时候直接复制表模板而不是每次都从零写。速查表不追求完整只记录自己常用的二十个属性和五个最容易翻车的实例比如负缩进要搭配 margin-left、浮动图片要加 clear。这个习惯让我接手旧项目时省了很多重复排查时间。这些年做 ePub 排版最大的体会是样式表写出来容易稳定输出难。标签配对检查、双阅读器预览、反编译核对这三步缺一步都可能埋下暗雷。从那以后我每次做完一套样式都会强制自己走一遍这个流程哪怕只改了一行 CSS 也不跳过。排版这件事多数问题不是难而是懒出来的。希望帮到你。本文还有配套的精品资源点击获取
![打卡信奥刷题（3644）用C++实现信奥题 P12027 [USACO25OPEN] Ski Slope S](http://pic.xiahunao.cn/yaotu/打卡信奥刷题（3644）用C++实现信奥题 P12027 [USACO25OPEN] Ski Slope S)
平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测)
