简介ePub排版与样式入门讲解专门面向零基础或刚接触电子书制作的个人作者、出版编辑和网页设计爱好者。文档先说明这种电子书格式是建立在网页规范上的容器并非普通文本随后介绍文件结构并系统讲解标签文本、属性写法、元素包含顺序、空元素与关闭标签等核心概念。其中对段落、区块、行内、标题、图片等常用标签的说明以及对首行缩进、水平对齐、字号、颜色、字重等属性的实例演示可直接套用在具体的版式调整中。特别提醒了元素嵌套时关闭标签必须按顺序避免在行内元素中插入段落等常见错误实操指导性强。资源包为单个文档压缩后约八百六十九千字节便于离线查阅已有九百五十六人学习下载在同类入门材料中属于清晰实用的一篇配合相关编辑器边看边实践很快就能上手制作常见美观的电子书排版。1. epub 电子书的排版与样式先把它看成网页再动手第一次接触 epub 电子书的人多少都会把它当成“高级一点的 txt”觉得能翻页、能搜字、能在阅读器里打开就算完事。实际上一本 epub 电子书的排版和样式全部建立在 html 与 css 规范之上阅读器渲染的本质上是结构文件索引下的网页内容。这就意味着一件事——你的排版上限取决于你对标签文本和样式表的掌控程度。这篇笔记围绕一份 epub 排版与样式资源展开适合刚入行电子书制作、想摆脱默认样式、做出有设计感版式的从业者。读完你能理解标签、属性、外部样式表怎么配合也能直接照参数做出首字下沉、浮动图片、引用块这些常见版式。2. 标签文本入门从 [p] 到 style 的手写排版做 epub 排版前先接受一个前提所谓排版就是通过对“元素”声明样式来改变显示效果。即使你用的是所见即所得的工具生成出来的一切仍然是标签文本。把这个看透了后面所有的操作都只是往标签里填属性而已。2.1 标签、元素、属性是怎么拼起来的打开任意一款 epub 制作工具新建一个章节编辑器里最常见的一行代码长这样[p styletext-align:center]这是一段居中显示的文本[/p]不要被方括号吓到它和你平时见过的尖括号 html 是一个东西。在这段代码里p是开始标签代表一个段落的开始styletext-align:center是属性声明了这段文字如何显示[/p]是关闭标签代表段落结束被一对标签包裹的“这是一段居中显示的文本”就是元素。工具通常会为每个段落自动补上p和/p所以默认情况下你不需要手写标签。但一旦你想控制样式就必须自己往开始标签里加属性。常用标签就几个[div]代表一块内容容器[p]代表段落[span]用在段落内部标记局部文字[h3]代表标题[a]代表链接[img]代表图片。其中div和p是块级元素span是行内元素。行内元素可以嵌在块级元素内部反过来不行——你不能在一个span里塞一个p。元素的包含顺序大致是html到body到div到p到span。如果你写出[span][p]...[/p][/span]这种结构阅读器轻则忽略样式重则整段重排错乱。标签还有一种特殊形态叫空元素。它没有内容不需要关闭标签直接在开始标签尾部加/即可。最常用的是[br /]表示空行、[hr /]表示横线。这里有个血泪经验要记住所有标签必须关闭且涉及嵌套时关闭顺序必须先进后出。开始标签是[div][p][span]关闭就必须是[/span][/p][/div]顺序错了前面的工作可能全白费。2.2 常用排版属性缩进、对齐、字号与行距制作工具默认把所有段落设为首行缩进 2em、行距 130%。这个默认值能应付大多数纯文本内容但要做特定版式就得自己覆盖。先看一份常用属性参数表属性控制内容常用取值默认值text-indent段首缩进0em、2em、-2em2emtext-align水平对齐left、center、right、justifyleftfont-size文字大小16px、1.3em、medium16pxcolor文字颜色red、#333、darkred继承font-weight字重normal、bold、boldernormalfont-style字形normal、italicnormalline-height行距1em、130%130%这里重点说两个相对单位。em是字符单位1em 相当于当前默认字号的高度默认字号 16px 时 1em 等于 16px如果某段声明了font-size:1.3em那这段里的 1em 又会按新字号重新计算所以段落内放大局部文字时用 em 比用 px 更稳妥。%是相对于默认值的百分比line-height:130%表示行距是正常的 1.3 倍。属性写法有个容易翻车的点多个赋值之间必须用英文分号隔开名称与值之间用冒号整个声明用引号括起来。比如[p styletext-indent:0em;text-align:center]如果用了中文分号阅读器会把后面的属性全部忽略。2.3 用工具新建章节做首轮验证理论讲再多不如动手验证。我一般会打开制作工具新建一个章节贴入最简单的一组对比样例[p styletext-indent:0em;text-align:center]无缩进且居中[/p] [p stylefont-size:1.3em;line-height:1em]放大到1.3倍行距压缩到一个字符高[/p]第一段用来验证属性的基本解析如果居中生效说明标签文本结构没问题。第二段同时改字号和行距观察行距变化当line-height:1em时行与行的间距等于一个字符高度文字会显得非常挤继续调小会发现当行距接近 0 时超出浏览器范围的文字不会换行而是直接溢出页面。这个行为不是 bug而是 epub 基于网页渲染的固有特性排歌词或竖排文本时反而能用它做特殊效果。3. 框模型与浮动用 margin、padding 和 float 控制布局标签文本能控制的不只是字体和缩进。当你开始做图文混排、题注图片、引用块这些复杂版式时必须理解一个概念每一个元素都是一个框。排版的过程就是把这些框按照你想要的位置和间距摆好。3.1 把每个元素看成框width和height控制框本身的宽度与高度最小值是 0不设值时由内容撑开。margin是外边距控制这个框与其他框之间的距离padding是内边距控制框的边界与内部内容之间的距离。两者默认都是 0。这个区分在实际排版的差距非常明显。比如一个带边框的图片容器padding决定图片离边框多远margin决定整个容器离正文多远。如果你想让图片容器“内缩”而不是“外扩”用padding用margin会把旁边的段落也推开布局就乱了。3.2 margin 与 padding 的三种赋值方式margin和padding的赋值方式完全一致以 margin 为例有三种。第一种是统一赋值margin:1px四边相同第二种是四值赋值margin:1px 2px 3px 4px顺序固定是“上、右、下、左”第三种是独立方向赋值margin-top:1px;margin-right:1px;margin-bottom:1px;margin-left:1px。三种写法等价但适用场景不同。[p stylemargin-right:150%]这段文字的右侧外边距是默认的150%[/p] [div stylemargin:1em 2em;padding:0.5em 1em]上下边距1em、左右边距2em内边距收缩[/div]第二种写法的四值顺序是最容易记错的很多人写成“上、左、下、右”结果渲染出来上下边距交换。我的习惯是只调一个方向就用第三种明确不产生歧义四个方向都要调才用第二种按顺时针“上右下左”默念一遍再写。在 epub 场景里margin和padding的取值一般用 em 或 px不建议用百分比做精确控制——阅读器窗口宽度不固定百分比容易失控。3.3 float 的基本行为与图片绕排元素默认的排列规则是从上往下、从左往右依次排布第 6 行的图片永远到不了第 5 行。要打破这个流水线让元素浮动起来用的是float属性。它只有两个实用取值left向左浮动right向右浮动。[div stylefloat:right;margin:0.4em;max-width:50%] [img srcimages/1.png/] [/div] [br/][br/] 这是环绕图片的正文内容。浮动后的图片脱离正常文档流右侧的文字会往上提填补图片留下的空位。这段代码里三个要点。float:right让图片容器浮到右侧margin:0.4em让图片与正文之间留空隙避免文字贴着图片边缘max-width:50%限制图片最大宽度不超过页面一半防止大图直接把正文挤到没有位置。最后一行是这段代码的核心逻辑浮动元素不占文档流空间所以后面的文字会上提补位形成文字绕图效果。如果只写了float没写margin图片会和文字挤在一起看起来像贴错了位置。3.4 clear浮动图片挤成一团的后悔药浮动用多了另一个问题马上会出现连续两张float:right的图片会并排挤在一起。因为浮动元素不再占据文档流位置浏览器会尽量让它们处在同一水平线上。这是浮动布局最典型的翻车现场。解决办法是引入clear清理属性规定元素两侧是否允许出现浮动元素。取值有三个left左侧不能出现浮动元素right右侧不能出现both两侧都不允许。[div classimg-float-right][img srcimages/1.png/][/div] [div classimg-float-right][img srcimages/2.png/][/div].img-float-right { float: right; margin: 0.5em; max-width: 50%; clear: right; }给第二个浮动容器加上clear:right之后它就不会再和第一个挤同一行而是老老实实换到下一行。我的经验是只要页面里有两个以上连续浮动元素统一在样式里带上clear别指望每个阅读器都按照你想当然的方式处理重叠。代价只是稍微损失一点空间利用率但换来的是跨阅读器稳定的结果划算。4. 外部样式表用 main.css 和类选择器换挡前面所有操作都是把属性直接写在开始标签里这叫内联样式表直观但笨重。如果全书每个段落都要用同一种强调样式你不可能每段都复制一遍style...。ePub 的真正优势在于它带一个独立的 CSS 外部样式表改一处全书生效。4.1 main.css 的结构与全局声明ePub 文件本质上是一个 zip 压缩包。用解压工具打开任意一本 epub找到main.css用文本编辑器打开会看到成组排列的属性声明。CSS 的结构比内联样式清晰得多选择器确定你要改变的元素花括号括住所有属性声明每个属性用分号结尾。p { text-indent: 2em; text-align: justify; line-height: 130%; margin-top: 5px; margin-bottom: 5px; }这段声明意味着全书所有段落都会统一使用 2em 首行缩进、两端对齐、130% 行距、上下各 5px 外边距。这就是外部样式表的核心价值全局属性一次定义局部需要特殊处理时再用内联样式或类选择器覆盖。你想验证效果把这段里加一行color:red重新打包后用阅读器打开整本书的文字都会变红——这比手工改几百个段落高效得多。4.2 类选择器命名规则与调用全局声明解决了统一问题但实际排版里更多是“部分段落特殊处理”。这时要用到类选择器。类选择器以小数点开头名称可以自定义字母、数字、横杠、下划线都可用但绝不能以数字开头。.red-big { font-size: 1.5em; text-indent: 0em; color: red; font-weight: bold; }调用方式是通过class属性引用[p classred-big]这段文本将使用 red-big 中声明的样式来显示[/p] [p classred-big oooo]一次调用两个类选择器中间用空格隔开[/p]类选择器的优势在维护时最明显。书稿做到一半发现某类文字颜色不对内联样式你得满书翻找类选择器只需要打开 css 文件找到对应类名改一处即可。我习惯把类名起成能联想样式的名字比如bigfont-red、float-img、note-box保证三个月后回来还能看懂。4.3 手改 css 的工作流与常见坑很多工具没有集成 css 编辑器所以常见的做法是把成品 epub 解压修改 css 文件再替换回去。命令行操作大致是这样unzip book.epub -d book/ # 打开 book/ 目录找到 OPF 文件里的 manifest 段落确认 css 实际路径 vim book/main.css # 修改完成后重新打包注意保持目录结构 zip -r newbook.epub book/这里最容易踩的坑有两个。第一css 文件的路径不一定在根目录必须在 OPF 文件的 manifest 声明里找href属性确认改错文件等于白改。第二重新打包时不要改变原有目录层级尤其是mimetype文件部分阅读器会校验它是不是在压缩包首位顺序不对会导致文件打不开。这个坑毫无规律可循不同阅读器表现还不一样遇到“改完打不开”的情况优先检查这两处。4.4 为什么我建议你用类选择器替换内联样式内联样式的优点是所见即所得缺点同样是它当样式复杂度上去以后标签里塞着一长串属性正文可读性极差维护成本陡增。我的建议是新手期先把内联样式练熟理解每个属性的作用之后立刻切换到类选择器。刚切换时会觉得多此一举但等你需要统一调整某个版式时就知道外部样式表有多省事了。类选择器就是 epub 排版的后悔药提前吃下去后面少折腾。5. 避坑与排错epub 样式失效的 5 个典型原因标签语法看起来简单但实际制作中翻车点不少。这一章总结我拆过、做过的 epub 里最常见的 5 类问题每一条都是“现象、原因、解决”三段式可以直接当排查手册用。5.1 标签没关闭后续样式全部串位现象某段漏写了/p后面的段落全部变成斜体或缩进错乱。原因阅读器把未关闭的标签当成包含关系处理直到下一个同名关闭标签出现才结束。解决写完每段后检查标签配对重点检查span和div这两个标签嵌套层级深最容易漏。工具一般有语法高亮颜色不匹配的位置就是要补的地方。5.2 span 套 p 的非法嵌套现象想在段落内放大一块文字写成了[span][p]...[/p][/span]阅读器里整段重排样式完全失效。原因span是行内元素p是块级元素行内元素不能包含块级元素。解决把顺序反过来[p][span]...[/span][/p]让span始终作为段落的内部标记。这条规则对div同样适用块级元素可以套行内元素反过来不行。5.3 悬挂缩进列表跑到屏幕外现象做悬挂缩进时写了text-indent:-2em段首标题消失了一部分。原因负缩进把文字往左推推到了阅读器渲染区域之外。解决用负缩进的同时必须配合正的外边距把整个段落向右缩排。典型参数是text-indent:-2em;margin-left:2em缩进多少移动多少标题正好悬挂在段落左侧正文也不会跑出屏幕。5.4 阅读器不渲染 margin空行直接塌掉现象引用块用margin-top:2em与正文拉开距离换了一款阅读器后间距消失。原因不同阅读器对margin、padding的支持程度不同老一点的内核经常忽略块级元素的外边距但对br标签的渲染一直稳定。解决需要确保空行时用[br /]插入空行不要依赖上下外边距撑开距离。这属于 epub 的“玄学”部分同样的 css 在不同阅读器里表现可能不一致所以关键的空行一定要用最基础的手段兜底。5.5 多张浮动图片挤成一团现象连续使用float:right的图片没有依次换行而是全部排列在同一侧。原因浮动元素脱离文档流后会在同一水平线排列除非有明确限制。解决在浮动样式里加clear:right或clear:both强制后续浮动元素换行。这个问题在图文混排的书里概率极高我一般会在写图片容器的类选择器时就把clear一并写上省得后面返工。6. 六个可复制的排版实例参数与坑位最后一章直接给六个可以照抄的样式组合。它们都是用类选择器写的你可以在自己的 css 文件里直接复制再按需调整参数。6.1 段内多尺寸字体.s1 { font-size:1.5em; } .s2 { font-size:2em; }文本段落里用span标记需要放大的词适合做出强调节奏。[p]即使[span classs2]知道[/span]是自己的手却[span classs1]不晓得[/span]应该要抓住什么。[/p]6.2 悬挂缩进.s1 { text-indent:-2em; margin-left:2em; }段首标题突出于段落左侧正文整体右移。注意负缩进的值要和margin-left一致否则标题对不齐。6.3 首字下沉.s1 { float:left; font-size:2.5em; margin:0.2em; } .indent-0 { text-indent:0em; }段落的第一个字用span包裹浮动到左上角。最关键的一步是段落本身要加indent-0覆盖默认的 2em 段首缩进否则下沉字和段落首行之间会多出一截空白怎么看都不对劲。6.4 引用块.s1 { text-indent:0em; font-size:1.1em; margin-left:2.5em; margin-right:2.5em; font-style:italic; }左右外边距让引用文本从正文中脱离出来配合斜体和稍大的字号增强辨识度。引用块前后的空行用[br /]不要依赖上下 margin。6.5 带边框与标题的图片.img-s1 { float:right; border-style:solid; border-width:1px; margin:0.4em; padding:0.4em; max-width:50%; text-align:center; }用div把图片和题注文字包在一个“框”里再给这个框加边框和浮动。padding撑开图片与边框的距离text-align:center让题注文字居中。题注段落记得单独声明text-indent:0em否则默认缩进会让标题看起来偏一格。6.6 提示框.box { background-color:#f5f5f5; border-style:dotted; border-width:3px; } .box-title { font-weight:bold; text-align:center; text-indent:0em; }浅灰背景加点状边框配合加粗居中的标题适合做小贴士、注意事项这类旁注内容。背景色可以用pink、#f5f5f5这类浅色深色文字配上浅色底阅读压力小。第一次做首字下沉时我漏了indent-0整段开头空出两个字符下沉字悬在半空怎么看怎么别扭。后来把缩进清零、浮动字加上 margin 才像样。从那以后我每次做 epub都会先在空白章节里把准备用到的属性逐项验证一遍再套到正文确认版式没问题之后才继续往下写。希望这套从标签到样式表的路径能帮到你至少让你少踩几个我踩过的坑。本文还有配套的精品资源点击获取
简介ePub排版与样式入门讲解专门面向零基础或刚接触电子书制作的个人作者、出版编辑和网页设计爱好者。文档先说明这种电子书格式是建立在网页规范上的容器并非普通文本随后介绍文件结构并系统讲解标签文本、属性写法、元素包含顺序、空元素与关闭标签等核心概念。其中对段落、区块、行内、标题、图片等常用标签的说明以及对首行缩进、水平对齐、字号、颜色、字重等属性的实例演示可直接套用在具体的版式调整中。特别提醒了元素嵌套时关闭标签必须按顺序避免在行内元素中插入段落等常见错误实操指导性强。资源包为单个文档压缩后约八百六十九千字节便于离线查阅已有九百五十六人学习下载在同类入门材料中属于清晰实用的一篇配合相关编辑器边看边实践很快就能上手制作常见美观的电子书排版。1. epub 电子书的排版与样式先把它看成网页再动手第一次接触 epub 电子书的人多少都会把它当成“高级一点的 txt”觉得能翻页、能搜字、能在阅读器里打开就算完事。实际上一本 epub 电子书的排版和样式全部建立在 html 与 css 规范之上阅读器渲染的本质上是结构文件索引下的网页内容。这就意味着一件事——你的排版上限取决于你对标签文本和样式表的掌控程度。这篇笔记围绕一份 epub 排版与样式资源展开适合刚入行电子书制作、想摆脱默认样式、做出有设计感版式的从业者。读完你能理解标签、属性、外部样式表怎么配合也能直接照参数做出首字下沉、浮动图片、引用块这些常见版式。2. 标签文本入门从 [p] 到 style 的手写排版做 epub 排版前先接受一个前提所谓排版就是通过对“元素”声明样式来改变显示效果。即使你用的是所见即所得的工具生成出来的一切仍然是标签文本。把这个看透了后面所有的操作都只是往标签里填属性而已。2.1 标签、元素、属性是怎么拼起来的打开任意一款 epub 制作工具新建一个章节编辑器里最常见的一行代码长这样[p styletext-align:center]这是一段居中显示的文本[/p]不要被方括号吓到它和你平时见过的尖括号 html 是一个东西。在这段代码里p是开始标签代表一个段落的开始styletext-align:center是属性声明了这段文字如何显示[/p]是关闭标签代表段落结束被一对标签包裹的“这是一段居中显示的文本”就是元素。工具通常会为每个段落自动补上p和/p所以默认情况下你不需要手写标签。但一旦你想控制样式就必须自己往开始标签里加属性。常用标签就几个[div]代表一块内容容器[p]代表段落[span]用在段落内部标记局部文字[h3]代表标题[a]代表链接[img]代表图片。其中div和p是块级元素span是行内元素。行内元素可以嵌在块级元素内部反过来不行——你不能在一个span里塞一个p。元素的包含顺序大致是html到body到div到p到span。如果你写出[span][p]...[/p][/span]这种结构阅读器轻则忽略样式重则整段重排错乱。标签还有一种特殊形态叫空元素。它没有内容不需要关闭标签直接在开始标签尾部加/即可。最常用的是[br /]表示空行、[hr /]表示横线。这里有个血泪经验要记住所有标签必须关闭且涉及嵌套时关闭顺序必须先进后出。开始标签是[div][p][span]关闭就必须是[/span][/p][/div]顺序错了前面的工作可能全白费。2.2 常用排版属性缩进、对齐、字号与行距制作工具默认把所有段落设为首行缩进 2em、行距 130%。这个默认值能应付大多数纯文本内容但要做特定版式就得自己覆盖。先看一份常用属性参数表属性控制内容常用取值默认值text-indent段首缩进0em、2em、-2em2emtext-align水平对齐left、center、right、justifyleftfont-size文字大小16px、1.3em、medium16pxcolor文字颜色red、#333、darkred继承font-weight字重normal、bold、boldernormalfont-style字形normal、italicnormalline-height行距1em、130%130%这里重点说两个相对单位。em是字符单位1em 相当于当前默认字号的高度默认字号 16px 时 1em 等于 16px如果某段声明了font-size:1.3em那这段里的 1em 又会按新字号重新计算所以段落内放大局部文字时用 em 比用 px 更稳妥。%是相对于默认值的百分比line-height:130%表示行距是正常的 1.3 倍。属性写法有个容易翻车的点多个赋值之间必须用英文分号隔开名称与值之间用冒号整个声明用引号括起来。比如[p styletext-indent:0em;text-align:center]如果用了中文分号阅读器会把后面的属性全部忽略。2.3 用工具新建章节做首轮验证理论讲再多不如动手验证。我一般会打开制作工具新建一个章节贴入最简单的一组对比样例[p styletext-indent:0em;text-align:center]无缩进且居中[/p] [p stylefont-size:1.3em;line-height:1em]放大到1.3倍行距压缩到一个字符高[/p]第一段用来验证属性的基本解析如果居中生效说明标签文本结构没问题。第二段同时改字号和行距观察行距变化当line-height:1em时行与行的间距等于一个字符高度文字会显得非常挤继续调小会发现当行距接近 0 时超出浏览器范围的文字不会换行而是直接溢出页面。这个行为不是 bug而是 epub 基于网页渲染的固有特性排歌词或竖排文本时反而能用它做特殊效果。3. 框模型与浮动用 margin、padding 和 float 控制布局标签文本能控制的不只是字体和缩进。当你开始做图文混排、题注图片、引用块这些复杂版式时必须理解一个概念每一个元素都是一个框。排版的过程就是把这些框按照你想要的位置和间距摆好。3.1 把每个元素看成框width和height控制框本身的宽度与高度最小值是 0不设值时由内容撑开。margin是外边距控制这个框与其他框之间的距离padding是内边距控制框的边界与内部内容之间的距离。两者默认都是 0。这个区分在实际排版的差距非常明显。比如一个带边框的图片容器padding决定图片离边框多远margin决定整个容器离正文多远。如果你想让图片容器“内缩”而不是“外扩”用padding用margin会把旁边的段落也推开布局就乱了。3.2 margin 与 padding 的三种赋值方式margin和padding的赋值方式完全一致以 margin 为例有三种。第一种是统一赋值margin:1px四边相同第二种是四值赋值margin:1px 2px 3px 4px顺序固定是“上、右、下、左”第三种是独立方向赋值margin-top:1px;margin-right:1px;margin-bottom:1px;margin-left:1px。三种写法等价但适用场景不同。[p stylemargin-right:150%]这段文字的右侧外边距是默认的150%[/p] [div stylemargin:1em 2em;padding:0.5em 1em]上下边距1em、左右边距2em内边距收缩[/div]第二种写法的四值顺序是最容易记错的很多人写成“上、左、下、右”结果渲染出来上下边距交换。我的习惯是只调一个方向就用第三种明确不产生歧义四个方向都要调才用第二种按顺时针“上右下左”默念一遍再写。在 epub 场景里margin和padding的取值一般用 em 或 px不建议用百分比做精确控制——阅读器窗口宽度不固定百分比容易失控。3.3 float 的基本行为与图片绕排元素默认的排列规则是从上往下、从左往右依次排布第 6 行的图片永远到不了第 5 行。要打破这个流水线让元素浮动起来用的是float属性。它只有两个实用取值left向左浮动right向右浮动。[div stylefloat:right;margin:0.4em;max-width:50%] [img srcimages/1.png/] [/div] [br/][br/] 这是环绕图片的正文内容。浮动后的图片脱离正常文档流右侧的文字会往上提填补图片留下的空位。这段代码里三个要点。float:right让图片容器浮到右侧margin:0.4em让图片与正文之间留空隙避免文字贴着图片边缘max-width:50%限制图片最大宽度不超过页面一半防止大图直接把正文挤到没有位置。最后一行是这段代码的核心逻辑浮动元素不占文档流空间所以后面的文字会上提补位形成文字绕图效果。如果只写了float没写margin图片会和文字挤在一起看起来像贴错了位置。3.4 clear浮动图片挤成一团的后悔药浮动用多了另一个问题马上会出现连续两张float:right的图片会并排挤在一起。因为浮动元素不再占据文档流位置浏览器会尽量让它们处在同一水平线上。这是浮动布局最典型的翻车现场。解决办法是引入clear清理属性规定元素两侧是否允许出现浮动元素。取值有三个left左侧不能出现浮动元素right右侧不能出现both两侧都不允许。[div classimg-float-right][img srcimages/1.png/][/div] [div classimg-float-right][img srcimages/2.png/][/div].img-float-right { float: right; margin: 0.5em; max-width: 50%; clear: right; }给第二个浮动容器加上clear:right之后它就不会再和第一个挤同一行而是老老实实换到下一行。我的经验是只要页面里有两个以上连续浮动元素统一在样式里带上clear别指望每个阅读器都按照你想当然的方式处理重叠。代价只是稍微损失一点空间利用率但换来的是跨阅读器稳定的结果划算。4. 外部样式表用 main.css 和类选择器换挡前面所有操作都是把属性直接写在开始标签里这叫内联样式表直观但笨重。如果全书每个段落都要用同一种强调样式你不可能每段都复制一遍style...。ePub 的真正优势在于它带一个独立的 CSS 外部样式表改一处全书生效。4.1 main.css 的结构与全局声明ePub 文件本质上是一个 zip 压缩包。用解压工具打开任意一本 epub找到main.css用文本编辑器打开会看到成组排列的属性声明。CSS 的结构比内联样式清晰得多选择器确定你要改变的元素花括号括住所有属性声明每个属性用分号结尾。p { text-indent: 2em; text-align: justify; line-height: 130%; margin-top: 5px; margin-bottom: 5px; }这段声明意味着全书所有段落都会统一使用 2em 首行缩进、两端对齐、130% 行距、上下各 5px 外边距。这就是外部样式表的核心价值全局属性一次定义局部需要特殊处理时再用内联样式或类选择器覆盖。你想验证效果把这段里加一行color:red重新打包后用阅读器打开整本书的文字都会变红——这比手工改几百个段落高效得多。4.2 类选择器命名规则与调用全局声明解决了统一问题但实际排版里更多是“部分段落特殊处理”。这时要用到类选择器。类选择器以小数点开头名称可以自定义字母、数字、横杠、下划线都可用但绝不能以数字开头。.red-big { font-size: 1.5em; text-indent: 0em; color: red; font-weight: bold; }调用方式是通过class属性引用[p classred-big]这段文本将使用 red-big 中声明的样式来显示[/p] [p classred-big oooo]一次调用两个类选择器中间用空格隔开[/p]类选择器的优势在维护时最明显。书稿做到一半发现某类文字颜色不对内联样式你得满书翻找类选择器只需要打开 css 文件找到对应类名改一处即可。我习惯把类名起成能联想样式的名字比如bigfont-red、float-img、note-box保证三个月后回来还能看懂。4.3 手改 css 的工作流与常见坑很多工具没有集成 css 编辑器所以常见的做法是把成品 epub 解压修改 css 文件再替换回去。命令行操作大致是这样unzip book.epub -d book/ # 打开 book/ 目录找到 OPF 文件里的 manifest 段落确认 css 实际路径 vim book/main.css # 修改完成后重新打包注意保持目录结构 zip -r newbook.epub book/这里最容易踩的坑有两个。第一css 文件的路径不一定在根目录必须在 OPF 文件的 manifest 声明里找href属性确认改错文件等于白改。第二重新打包时不要改变原有目录层级尤其是mimetype文件部分阅读器会校验它是不是在压缩包首位顺序不对会导致文件打不开。这个坑毫无规律可循不同阅读器表现还不一样遇到“改完打不开”的情况优先检查这两处。4.4 为什么我建议你用类选择器替换内联样式内联样式的优点是所见即所得缺点同样是它当样式复杂度上去以后标签里塞着一长串属性正文可读性极差维护成本陡增。我的建议是新手期先把内联样式练熟理解每个属性的作用之后立刻切换到类选择器。刚切换时会觉得多此一举但等你需要统一调整某个版式时就知道外部样式表有多省事了。类选择器就是 epub 排版的后悔药提前吃下去后面少折腾。5. 避坑与排错epub 样式失效的 5 个典型原因标签语法看起来简单但实际制作中翻车点不少。这一章总结我拆过、做过的 epub 里最常见的 5 类问题每一条都是“现象、原因、解决”三段式可以直接当排查手册用。5.1 标签没关闭后续样式全部串位现象某段漏写了/p后面的段落全部变成斜体或缩进错乱。原因阅读器把未关闭的标签当成包含关系处理直到下一个同名关闭标签出现才结束。解决写完每段后检查标签配对重点检查span和div这两个标签嵌套层级深最容易漏。工具一般有语法高亮颜色不匹配的位置就是要补的地方。5.2 span 套 p 的非法嵌套现象想在段落内放大一块文字写成了[span][p]...[/p][/span]阅读器里整段重排样式完全失效。原因span是行内元素p是块级元素行内元素不能包含块级元素。解决把顺序反过来[p][span]...[/span][/p]让span始终作为段落的内部标记。这条规则对div同样适用块级元素可以套行内元素反过来不行。5.3 悬挂缩进列表跑到屏幕外现象做悬挂缩进时写了text-indent:-2em段首标题消失了一部分。原因负缩进把文字往左推推到了阅读器渲染区域之外。解决用负缩进的同时必须配合正的外边距把整个段落向右缩排。典型参数是text-indent:-2em;margin-left:2em缩进多少移动多少标题正好悬挂在段落左侧正文也不会跑出屏幕。5.4 阅读器不渲染 margin空行直接塌掉现象引用块用margin-top:2em与正文拉开距离换了一款阅读器后间距消失。原因不同阅读器对margin、padding的支持程度不同老一点的内核经常忽略块级元素的外边距但对br标签的渲染一直稳定。解决需要确保空行时用[br /]插入空行不要依赖上下外边距撑开距离。这属于 epub 的“玄学”部分同样的 css 在不同阅读器里表现可能不一致所以关键的空行一定要用最基础的手段兜底。5.5 多张浮动图片挤成一团现象连续使用float:right的图片没有依次换行而是全部排列在同一侧。原因浮动元素脱离文档流后会在同一水平线排列除非有明确限制。解决在浮动样式里加clear:right或clear:both强制后续浮动元素换行。这个问题在图文混排的书里概率极高我一般会在写图片容器的类选择器时就把clear一并写上省得后面返工。6. 六个可复制的排版实例参数与坑位最后一章直接给六个可以照抄的样式组合。它们都是用类选择器写的你可以在自己的 css 文件里直接复制再按需调整参数。6.1 段内多尺寸字体.s1 { font-size:1.5em; } .s2 { font-size:2em; }文本段落里用span标记需要放大的词适合做出强调节奏。[p]即使[span classs2]知道[/span]是自己的手却[span classs1]不晓得[/span]应该要抓住什么。[/p]6.2 悬挂缩进.s1 { text-indent:-2em; margin-left:2em; }段首标题突出于段落左侧正文整体右移。注意负缩进的值要和margin-left一致否则标题对不齐。6.3 首字下沉.s1 { float:left; font-size:2.5em; margin:0.2em; } .indent-0 { text-indent:0em; }段落的第一个字用span包裹浮动到左上角。最关键的一步是段落本身要加indent-0覆盖默认的 2em 段首缩进否则下沉字和段落首行之间会多出一截空白怎么看都不对劲。6.4 引用块.s1 { text-indent:0em; font-size:1.1em; margin-left:2.5em; margin-right:2.5em; font-style:italic; }左右外边距让引用文本从正文中脱离出来配合斜体和稍大的字号增强辨识度。引用块前后的空行用[br /]不要依赖上下 margin。6.5 带边框与标题的图片.img-s1 { float:right; border-style:solid; border-width:1px; margin:0.4em; padding:0.4em; max-width:50%; text-align:center; }用div把图片和题注文字包在一个“框”里再给这个框加边框和浮动。padding撑开图片与边框的距离text-align:center让题注文字居中。题注段落记得单独声明text-indent:0em否则默认缩进会让标题看起来偏一格。6.6 提示框.box { background-color:#f5f5f5; border-style:dotted; border-width:3px; } .box-title { font-weight:bold; text-align:center; text-indent:0em; }浅灰背景加点状边框配合加粗居中的标题适合做小贴士、注意事项这类旁注内容。背景色可以用pink、#f5f5f5这类浅色深色文字配上浅色底阅读压力小。第一次做首字下沉时我漏了indent-0整段开头空出两个字符下沉字悬在半空怎么看怎么别扭。后来把缩进清零、浮动字加上 margin 才像样。从那以后我每次做 epub都会先在空白章节里把准备用到的属性逐项验证一遍再套到正文确认版式没问题之后才继续往下写。希望这套从标签到样式表的路径能帮到你至少让你少踩几个我踩过的坑。本文还有配套的精品资源点击获取
平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测)
