简介本资源是一份面向电子书制作初学者与内容创作者的ePub排版与样式入门指南聚焦HTML/CSS基础在ePubBuilder中的实际应用解决电子书格式化不规范、样式控制不精准等常见问题。文档以清晰结构系统讲解ePub本质基于网页技术的电子书规范、文件组成逻辑、标签语法如[p][span][div]等方括号写法、属性声明规则styletext-align:center等、元素嵌套顺序及空元素用法[br /]、[hr /]并详解text-indent、text-align、font-size等核心CSS属性的取值与组合技巧。资源为单个Word文档.doc大小869KB内容完整覆盖从基础概念到实操样例的全流程含大量可直接复用的代码片段与排版范式。目前已有960人学习下载适合零基础起步、边学边练ePubBuilder工具的电子书制作者快速掌握专业级排版能力。1. 这不是“改字体”——ePub排版到底在干啥一个新手最常踩的坑就从这儿开始你是不是也试过把一篇小说复制进 epubBuilder点“生成”结果打开一看——文字挤成一团、段首没缩进、图片歪在角落、标题小得像蚂蚁你点开“样式设置”发现一堆滑块和下拉菜单调来调去不是全篇变大就是标题消失……最后干脆放弃心想“算了能看就行。”别急着关软件——这真不是你手残。ePub 排版根本不是在“调格式”而是在“搭积木”用一套有规则的标签比如[p]、[span]、[div]把文字、图片、空白、颜色、位置一块一块地“声明”给阅读器听“请这样显示它”。它不像 Word 那样所见即所得也不像手机备忘录那样点点就变它更像给阅读器写一封清晰、准确、不能含糊的“说明书”。你写的每一对[ ]都是在告诉阅读器“这段是段落”“这个字要放大”“这张图靠右浮起来”“这行文字要缩进两个字”。所以当你调不出想要的效果问题往往不在“按钮没点对”而在“说明书没写清楚”——比如该用[div]包住整块内容时你只写了[p]该用text-indent: 0em把首字下沉的段落默认缩进关掉时你忘了加这一句该用clear:right让第二张图不贴着第一张图堆叠时你只写了float:right……这些不是玄学是规则。而这篇指南就是帮你把这份“说明书怎么写”的规则掰开揉碎从零讲透。它不教你成为前端工程师但足够让你第一次动手就能让一段文字居中、一张图片浮在右侧、一个引文框自带粉红边框——而且知道为什么能成、为什么失败。准备好你的 epubBuilder我们这就从第一个[p]开始。2. 先搞懂一个概念ePub 的“标签”不是 HTML但比 HTML 更友好很多新手一看到“ePub 基于 HTML/CSS”立刻头皮发紧“啊还要学网页编程”——其实大可不必。epubBuilder 已经把最复杂的底层逻辑藏起来了它给你的是一个“简化版说明书语法”核心就三样标签、属性、元素。我们不用背标准只学它实际怎么用。2.1 标签方括号[ ]是你的“命令开关”在真正的 HTML 里段落是p这是文字/p但在 epubBuilder 里它是[p]这是文字[/p]。区别在哪HTML 用尖括号 容易和普通符号混淆写错一个字符浏览器就报错epubBuilder 用方括号[ ]视觉上更醒目而且它会自动帮你补全关闭标签比如你只打[p]它可能悄悄加上[/p]容错率高得多。提示所有标签必须小写[P]或[P style...]是无效的。epubBuilder 不认大小写混搭这是铁律。你日常最常打交道的几个标签就像厨房里的基础厨具标签作用类比常见误区[p]段落Paragraph一勺米饭——最基础、最常用的一口别用它包图片或标题它只管“文字段落”[span]行内文本Span一粒盐——只能撒在饭里不能单独盛盘可以放在[p]里面但不能反过来把[p]塞进[span][div]内容区块Division一个餐盘——能装饭、菜、汤甚至再放一个小碗它是“容器”不是“文字”本身不显示内容只管布局[br /]换行Break一筷子夹断——强制换到下一行不空段不是[br]必须带/否则 epubBuilder 会报错记住这个顺序[div]大盘子→[p]饭→[span]饭里撒的葱花。你不能把“饭”[p]直接放进“葱花”[span]里——结构乱了阅读器就懵了。2.2 属性style...是你的“说明书正文”光有[p]只能告诉阅读器“这是一段文字”但没说“多大”“多粗”“往哪放”。这时候就要加属性——写在开始标签里用style...包起来。比如[p styletext-align:center;font-size:18px;font-weight:bold] 这是一段居中、18像素、加粗的文字。 [/p]这里style...就是说明书的正文里面每一项都用英文分号;隔开text-align:center→ “水平对齐方式居中”font-size:18px→ “字号18像素”font-weight:bold→ “字体粗细加粗”注意引号必须是英文双引号中文引号“”会直接失效分号;必须是英文的中文顿号、或逗号都不行。这是新手翻车最多的地方——明明代码看着一模一样就因为引号或分号是中文的整个样式不生效。2.3 元素被标签“框住”的一切才是阅读器真正看到的东西[p]这是文字[/p]这整块就叫一个p 元素[span]加粗字[/span]是一个span 元素。关键点来了元素 标签 内容 关闭标签。少一个就不完整。比如你写[p]没关掉阅读器会傻等[/p]结果后面所有文字都算进这个段落里排版全乱又比如你写[div][p]段落[/p][img srca.jpg/][/div]这是合法的——[div]包住了段落和图片但如果你写[p][div]内容[/div][/p]这就违法了——段落[p]里不能塞进一个“大盘子”[div]阅读器会直接忽略[div]或报错。所以动手前先问自己一句我想控制的是整块内容的位置用[div]还是一段文字的样式用[p]还是其中几个字的效果用[span]答案决定了你第一个标签写什么。2.4 空元素不用配对的“快捷键”但必须带/有些操作不需要“包裹内容”比如换行、画条线。它们没有“内容”所以不用写[/br]这种关闭标签而是直接在开始标签末尾加/表示“到此为止”[br /]→ 换一行相当于按一次回车[hr /]→ 画一条横线相当于 Word 里的“插入分隔线”提示[br /]后面不要跟空格写成[br / ]或[br/ ]都可能失效。它必须是紧凑的[br /]。现在请打开你的 epubBuilder新建一个空白章节照着下面这段粘贴进去然后点“预览”[div stylebackground-color:#f0f8ff;padding:10px;margin:5px;] [p styletext-align:center;font-size:20px;color:#2c3e50;] 欢迎来到 ePub 排版第一课 [/p] [hr /] [p styletext-indent:2em;] 这是第一段有首行缩进。 [/p] [p styletext-align:right;font-style:italic;] 这是第二段右对齐斜体。 [/p] [br /] [p stylecolor:red;font-weight:bold;] 最后一句红色加粗醒目提醒 [/p] [/div]你看到的就是一个带浅蓝底色、内边距、外边距的区块里面四段文字各按不同规则排列。这不是魔法是你亲手写的说明书被阅读器准确执行了。下一章我们就拆解这份说明书里每个参数的真实含义——为什么2em是缩进两个字为什么#f0f8ff是浅蓝色你马上就能自己改。3. 第一个能跑通的例子三步做出“居中大标题两栏图文”效果光讲概念容易飘咱们直接上手做一个真实场景你想给电子书加个封面页上面是居中的大标题下面左右各一张小图图上有简短说明。这种布局在教程、杂志类 ePub 里太常见了。很多人卡在“图片怎么并排”“标题怎么居中不顶头”其实只要三步10 分钟搞定。3.1 第一步用[div]搭好“舞台框架”标题和图片不能散着放得先给它们一个共同的“舞台”。这个舞台就是[div]我们用它把所有内容框起来并统一设置背景和内边距让整体不贴边[div stylepadding:20px;background-color:#fafafa;] !-- 这里放标题和图片 -- [/div]padding:20px→ 舞台内壁离内容 20 像素避免文字紧贴边缘background-color:#fafafa→ 浅灰底色让内容区更醒目#fafafa是十六进制色码后面会讲怎么查。为什么不用[p]因为[p]只能装文字装不了“标题图片”这种混合内容[div]是万能容器专干这事。3.2 第二步标题居中放大用[p]精准控制在[div]里面先放标题。用[p]标签但加style让它变大、居中、加粗[div stylepadding:20px;background-color:#fafafa;] [p styletext-align:center;font-size:28px;font-weight:bold;margin-bottom:30px;color:#1a1a1a;] 我的第一本 ePub 电子书 [/p] !-- 接下来放两张图 -- [/div]参数详解text-align:center→ 水平居中别写centered阅读器不认识font-size:28px→ 字号 28 像素比默认 16px 大一圈margin-bottom:30px→ 标题下方留出 30 像素空白给图片腾地方color:#1a1a1a→ 深灰色文字比纯黑#000000更柔和护眼。避坑常见问题与排查现象标题没居中还是靠左。原因text-align:center写错了比如写成text-align:centre英式拼写或漏了冒号text-align center。解决检查拼写必须是text-align:center且冒号是英文的。现象标题变大了但整段文字挤成一长条没换行。原因font-size设得太大比如100px超出了阅读器屏幕宽度。解决新手建议20px~32px之间试28px是安全值若需更大改用em单位如2.5em它会随阅读器默认字号自适应。现象标题颜色没变还是默认黑。原因color属性写在了错误位置比如写成[p color#1a1a1a style...]属性不能和style并列或用了中文引号。解决所有样式必须塞进style...里且引号是英文双引号。3.3 第三步左右两图说明用[div]float实现“图文绕排”现在放图。我们要两张图并排左边图说明右边图说明。epubBuilder 不支持 CSS Grid 或 Flexbox但float浮动足够好用[div stylepadding:20px;background-color:#fafafa;] [p styletext-align:center;font-size:28px;font-weight:bold;margin-bottom:30px;color:#1a1a1a;] 我的第一本 ePub 电子书 [/p] !-- 左图区块 -- [div stylefloat:left;width:45%;margin-right:5%;] [img srcimages/left.jpg /] [p styletext-align:center;font-size:14px;margin-top:5px;color:#555;] 左侧示意图 [/p] [/div] !-- 右图区块 -- [div stylefloat:right;width:45%;] [img srcimages/right.jpg /] [p styletext-align:center;font-size:14px;margin-top:5px;color:#555;] 右侧示意图 [/p] [/div] !-- 清除浮动防止后续内容错位 -- [div styleclear:both;] [/div] [/div]关键点拆解float:left和float:right→ 让两个[div]分别“浮”到父容器最外层[div]的左右两侧width:45%→ 每个图区块占 45% 宽度留 10% 作中间间隙margin-right:5%给左图右图没设margin-left自然形成空隙clear:both→ 这是必须加的收尾不加的话后续所有文字都会试图“绕”在浮动图的旁边导致排版崩溃。避坑常见问题与排查现象两张图叠在一起或者只显示一张。原因width加起来超过 100%比如都设50%或忘了float或clear:both漏了。解决确保left宽 right宽 间隙 ≤ 100%检查float是否写对确认clear:both在两个图区块之后、父[div]结束之前。现象图片显示不出来只看到一个方框。原因srcimages/left.jpg路径不对。epubBuilder 要求图片必须放在项目文件夹的images/子目录下且文件名严格匹配大小写、后缀.jpg或.png。解决在 epubBuilder 里点“资源管理”确认images/文件夹里真有left.jpg重命名时别用中文或空格用left_img.jpg这种。现象图上的说明文字没居中或颜色没变。原因[p]标签没写在[div]里面或者style里漏了text-align:center。解决把[p]完全包在[div]的开始和结束标签之间复制时检查style参数是否完整。现在保存这个章节点击 epubBuilder 的“预览”按钮。你应该看到一个浅灰背景的区块顶部是深灰大标题下方左右各一张图图下有居中小字说明。这就是你亲手搭建的第一个完整 ePub 排版效果。它不炫酷但结构清晰、逻辑自洽——而这正是专业 ePub 制作的起点。下一章我们深挖那些参数背后的“为什么”让你彻底告别“复制粘贴式排版”。4. 参数全解px、em、%、#ffffff……这些单位到底怎么选新手最大的困惑不是“怎么写”而是“为什么这么写”。比如为什么段首缩进用2em而不是20px为什么颜色写#ff6b6b而不是“红色”为什么margin有时写10px有时写1em这些不是随意定的背后是 ePub 阅读器的“适配逻辑”。搞懂它你才能写出在手机、平板、电纸书上都好看的样式。4.1 长度单位px是像素em是“我自己的字有多高”px像素绝对单位1px 屏幕上一个点。优点是精准缺点是“死板”。比如font-size:20px在小屏手机上可能撑满整行在大屏平板上却显得小气。em相对单位1em 当前元素的默认字体高度。如果阅读器默认字号是16px那么1em16px1.2em19.2px如果用户把默认字号调成20px那么1.2em就自动变成24px。%百分比和em类似也是相对值。font-size:120%1.2em但margin:10%是相对于父容器宽度的 10%不是字体高度。实战建议字号、缩进、行高优先用em或%。比如text-indent:2em缩进两个字宽、line-height:1.5em行距是字高的 1.5 倍这样用户调大字体时缩进和行距自动跟着变阅读体验不崩。边距、宽度、图片尺寸px和%各有场景。固定边距如margin:10px用px需要响应式如图占屏宽 50%用%。永远别用cm、in英寸ePub 规范不保证物理尺寸阅读器可能无视。4.2 颜色系统#rrggbb是你的调色板密码ePub 不认“红色”“蓝色”这种中文名只认十六进制色码#rrggbb比如#000000→ 纯黑r0, g0, b0#ffffff→ 纯白r255, g255, b255#ff6b6b→ 橙红r255, g107, b107怎么快速得到色码方法一推荐用 Windows 自带“画图”或 Mac“预览”截图取色导出时看色值方法二搜“在线取色器”上传图片点哪取哪方法三懒人记几个万能色#3498db清爽蓝、#2ecc71活力绿、#e74c3c警示红、#9b59b6优雅紫。避坑常见问题与排查现象颜色没生效还是默认黑。原因色码写错位数比如#ff6b6少一位或#ff66bbcc多两位或用了rgb(255,107,107)ePub 不支持 rgb 函数。解决色码必须是# 六位十六进制0-9, a-f大小写均可但必须六位。现象背景色太刺眼文字看不清。原因背景和文字对比度不足比如#f0f0f0浅灰配#cccccc灰字。解决用在线工具“WebAIM Contrast Checker”测对比度AA 级要求 ≥ 4.5:1如#333333配#ffffff。现象同一色码在不同阅读器里颜色不一样。原因ePaper电纸书屏幕色域窄无法显示鲜艳色OLED 屏幕则更艳。解决重要信息如标题、警告用高对比度组合黑字白底/白字黑底装饰色如边框、背景可稍柔和接受设备差异。4.3 边距与内边距margin是“我和邻居的距离”padding是“我和衣服的距离”这是新手最易混淆的两个属性属性作用类比常用写法效果示意margin元素外侧的空白控制它和其他元素的距离你站在人群里脚到别人脚的距离margin:10px四边同值margin:10px 5px上下10左右5padding元素内侧的空白控制内容文字/图到元素边框的距离你穿一件毛衣毛衣和你身体之间的空隙padding:15px四边同值padding:10px 20px 10px 20px上右下左为什么padding常配背景色因为padding是“内容和边框之间的空隙”加背景色后这块空隙也变色视觉上像给内容加了“内衬”。比如做提示框[div stylebackground-color:#fff3cd;border:1px solid #ffeaa7;padding:12px;margin:10px;] [p stylemargin:0;color:#856404;]⚠️ 这是一个温馨提醒[/p] [/div]这里padding:12px让文字离边框有呼吸感background-color填满整个 padding 区看起来就是个完整的“黄底提示框”。4.4 浮动与清除float是“让图飞起来”clear是“落地后别挡路”float:left/right的本质是让元素脱离正常文档流“浮”到容器一侧文字自动绕排。但它有个副作用后续所有元素都默认“继续绕排”除非你喊停。所以clear:both就是那个“喊停”的指令。它必须放在浮动元素之后且自身不浮动!-- 错误clear 写在浮动元素里面 -- [div stylefloat:left;clear:both;]图1[/div] [div stylefloat:right;clear:both;]图2[/div] !-- 正确clear 写在浮动元素外面作为独立“清道夫” -- [div stylefloat:left;]图1[/div] [div stylefloat:right;]图2[/div] [div styleclear:both;]!-- 这里清场 --/div血泪经验我第一次做多图排版时忘了加clear:both结果第三段文字全跑到图下面去了还以为是软件 bug调试半小时才发现是漏了这一行。从那以后我每次写完浮动都强制走一遍“浮动→内容→clear”三步绝不偷懒。现在你已经掌握了长度、颜色、边距、浮动四大核心参数的底层逻辑。它们不是孤立的代码而是你和阅读器沟通的“通用语”。下一章我们升级武器用外部 CSS 文件把重复样式“一键管理”告别全文搜索替换的噩梦。5. 从“贴膏药”到“建药房”用外部 CSS 文件统一管理所有样式前面所有例子样式都写在style...里这叫内联样式——好处是直观坏处是“哪用哪写”改一个标题样式得翻遍所有[p]标签去改。想象一下你做了 50 章每章都有“引用段落”现在想把引用的字体从14px改成15px难道要手动改 50 次不该建你的“样式药房”了——外部 CSS 文件。5.1 什么是 CSS 文件一个纯文本的“全局样式清单”CSSCascading Style Sheets就是一份纯文本文件里面只写“谁该长什么样”。epubBuilder 生成的 ePub 文件解压后一定有个main.css或stylesheet.css它就是你的“药房总账本”。用记事本或 VS Code 打开它你会看到类似这样/* 这是注释阅读器会忽略 */ p { text-indent: 2em; line-height: 1.5em; margin-top: 0; margin-bottom: 0; } h3 { text-align: center; color: #2c3e50; font-weight: bold; }p { ... }→ 对所有p标签生效h3 { ... }→ 对所有h3标签生效每行属性: 值;用分号结尾{ }里的所有规则会自动应用到对应标签的所有实例上。提示ePub 规范要求 CSS 文件必须是 UTF-8 编码用记事本保存时务必选“另存为”→ 编码选“UTF-8”否则中文注释会变乱码。5.2 第一步把内联样式“搬进”CSS用类选择器命名假设你有一段“引用文字”一直用这个内联写法[p styletext-indent:0em;font-size:1.1em;margin-left:2.5em;margin-right:2.5em;font-style:italic;] 这是引用内容。 [/p]现在把它“搬进”CSS 文件起个名字叫quote引用/* main.css 里新增 */ .quote { text-indent: 0em; font-size: 1.1em; margin-left: 2.5em; margin-right: 2.5em; font-style: italic; }然后在 ePub 文本里把原来的长串style删除换成调用这个类[p classquote] 这是引用内容。 [/p]为什么叫.quote.开头表示“类选择器”名字可以自定义.citation、.note都行但不能数字开头.1quote错不能有空格或特殊符号.my quote错。建议用英文小写短横线比如.warning-box、.chapter-title。5.3 第二步批量修改只需改一行 CSS现在全书所有引用段落都用[p classquote]那么想改样式只需改main.css里.quote { ... }这一块。比如要把引用字体加大、加粗.quote { text-indent: 0em; font-size: 1.2em; /* 从 1.1em 改成 1.2em */ font-weight: bold; /* 新增加粗 */ margin-left: 2.5em; margin-right: 2.5em; font-style: italic; }保存 CSS 文件回到 epubBuilder把修改后的main.css拖进项目资源里覆盖原文件epubBuilder 会提示“替换”再点“预览”——全书所有.quote段落瞬间更新这才是专业制作的效率。避坑常见问题与排查现象加了classquote但样式没变还是默认效果。原因CSS 文件没保存或保存时编码不是 UTF-8或文件名没写对必须是main.css不是main.css.txt。解决用记事本“另存为”编码选 UTF-8检查文件扩展名是.css在 epubBuilder 的“资源管理”里确认main.css已存在且时间戳最新。现象改了 CSS但只有部分段落生效有的没变。原因有的段落写的是[p classquote]有的写成了[p classQuote]大小写敏感或[p classquote]单引号epubBuilder 不认。解决全选文本查找class统一替换成classquote确保引号是英文双引号。现象CSS 里写了background-color但预览时背景是白的。原因ePaper电纸书阅读器不支持背景色只显示黑白灰。解决背景色仅用于 LCD/OLED 屏幕手机、平板做提示框时优先用边框border 文字色color保证兼容性。5.4 进阶一个 CSS 文件管理全书所有“皮肤”你可以把全书常用样式都放进main.css形成你的“样式库”/* main.css —— 我的 ePub 样式库 */ /* 1. 全局段落 */ p { text-indent: 2em; line-height: 1.5em; margin-top: 0; margin-bottom: 0; } /* 2. 引用段落 */ .quote { text-indent: 0em; font-size: 1.1em; margin: 1em 2.5em; font-style: italic; color: #555; } /* 3. 小提示框 */ .tip-box { background-color: #e3f2fd; border-left: 4px solid #2196f3; padding: 10px; margin: 15px 0; } .tip-box p { margin: 0; color: #0d47a1; font-weight: bold; } /* 4. 章节标题 */ .chapter-title { text-align: center; font-size: 1.8em; margin: 2em 0 1em; color: #1a237e; font-weight: bold; }然后在文本里按需调用[h3 classchapter-title]第一章初识 ePub[/h3] [p]这是普通段落用全局 p 规则。[/p] [p classquote]这是引用段落用 .quote 规则。[/p] [div classtip-box] [p] 小提示CSS 文件是 ePub 的灵魂[/p] [/div]从此你的 ePub 不再是“贴满膏药的纸”而是一个有组织、可维护、易迭代的“活文档”。下一步就是把你今天做的所有效果打包成可复用的模板——比如“封面页模板”“引用模板”“提示框模板”下次新书直接套用十分钟起步。6. 下一步学什么从“能做”到“做得好”的三个关键习惯你已经能写出居中标题、左右图文、引用段落、提示框甚至用上了外部 CSS。但这只是入门的终点却是专业制作的起点。很多新手到这里就停了结果做出来的 ePub 在手机上看还行一到电纸书上就文字糊成一片、图片错位、换行混乱……问题不在技术而在三个被忽略的习惯。我第一次交稿被退回就是因为没养成它们。6.1 习惯一永远用“三端预览”不只信电脑屏幕ePub 的终极用户不是你的 Windows/Mac而是千差万别的阅读器手机/平板iOS Books、安卓微信读书LCD 屏色彩艳支持 CSS 全功能电纸书Kindle、掌阅、文石E Ink 屏只有黑白灰不支持background-color、float、本文还有配套的精品资源点击获取
简介本资源是一份面向电子书制作初学者与内容创作者的ePub排版与样式入门指南聚焦HTML/CSS基础在ePubBuilder中的实际应用解决电子书格式化不规范、样式控制不精准等常见问题。文档以清晰结构系统讲解ePub本质基于网页技术的电子书规范、文件组成逻辑、标签语法如[p][span][div]等方括号写法、属性声明规则styletext-align:center等、元素嵌套顺序及空元素用法[br /]、[hr /]并详解text-indent、text-align、font-size等核心CSS属性的取值与组合技巧。资源为单个Word文档.doc大小869KB内容完整覆盖从基础概念到实操样例的全流程含大量可直接复用的代码片段与排版范式。目前已有960人学习下载适合零基础起步、边学边练ePubBuilder工具的电子书制作者快速掌握专业级排版能力。1. 这不是“改字体”——ePub排版到底在干啥一个新手最常踩的坑就从这儿开始你是不是也试过把一篇小说复制进 epubBuilder点“生成”结果打开一看——文字挤成一团、段首没缩进、图片歪在角落、标题小得像蚂蚁你点开“样式设置”发现一堆滑块和下拉菜单调来调去不是全篇变大就是标题消失……最后干脆放弃心想“算了能看就行。”别急着关软件——这真不是你手残。ePub 排版根本不是在“调格式”而是在“搭积木”用一套有规则的标签比如[p]、[span]、[div]把文字、图片、空白、颜色、位置一块一块地“声明”给阅读器听“请这样显示它”。它不像 Word 那样所见即所得也不像手机备忘录那样点点就变它更像给阅读器写一封清晰、准确、不能含糊的“说明书”。你写的每一对[ ]都是在告诉阅读器“这段是段落”“这个字要放大”“这张图靠右浮起来”“这行文字要缩进两个字”。所以当你调不出想要的效果问题往往不在“按钮没点对”而在“说明书没写清楚”——比如该用[div]包住整块内容时你只写了[p]该用text-indent: 0em把首字下沉的段落默认缩进关掉时你忘了加这一句该用clear:right让第二张图不贴着第一张图堆叠时你只写了float:right……这些不是玄学是规则。而这篇指南就是帮你把这份“说明书怎么写”的规则掰开揉碎从零讲透。它不教你成为前端工程师但足够让你第一次动手就能让一段文字居中、一张图片浮在右侧、一个引文框自带粉红边框——而且知道为什么能成、为什么失败。准备好你的 epubBuilder我们这就从第一个[p]开始。2. 先搞懂一个概念ePub 的“标签”不是 HTML但比 HTML 更友好很多新手一看到“ePub 基于 HTML/CSS”立刻头皮发紧“啊还要学网页编程”——其实大可不必。epubBuilder 已经把最复杂的底层逻辑藏起来了它给你的是一个“简化版说明书语法”核心就三样标签、属性、元素。我们不用背标准只学它实际怎么用。2.1 标签方括号[ ]是你的“命令开关”在真正的 HTML 里段落是p这是文字/p但在 epubBuilder 里它是[p]这是文字[/p]。区别在哪HTML 用尖括号 容易和普通符号混淆写错一个字符浏览器就报错epubBuilder 用方括号[ ]视觉上更醒目而且它会自动帮你补全关闭标签比如你只打[p]它可能悄悄加上[/p]容错率高得多。提示所有标签必须小写[P]或[P style...]是无效的。epubBuilder 不认大小写混搭这是铁律。你日常最常打交道的几个标签就像厨房里的基础厨具标签作用类比常见误区[p]段落Paragraph一勺米饭——最基础、最常用的一口别用它包图片或标题它只管“文字段落”[span]行内文本Span一粒盐——只能撒在饭里不能单独盛盘可以放在[p]里面但不能反过来把[p]塞进[span][div]内容区块Division一个餐盘——能装饭、菜、汤甚至再放一个小碗它是“容器”不是“文字”本身不显示内容只管布局[br /]换行Break一筷子夹断——强制换到下一行不空段不是[br]必须带/否则 epubBuilder 会报错记住这个顺序[div]大盘子→[p]饭→[span]饭里撒的葱花。你不能把“饭”[p]直接放进“葱花”[span]里——结构乱了阅读器就懵了。2.2 属性style...是你的“说明书正文”光有[p]只能告诉阅读器“这是一段文字”但没说“多大”“多粗”“往哪放”。这时候就要加属性——写在开始标签里用style...包起来。比如[p styletext-align:center;font-size:18px;font-weight:bold] 这是一段居中、18像素、加粗的文字。 [/p]这里style...就是说明书的正文里面每一项都用英文分号;隔开text-align:center→ “水平对齐方式居中”font-size:18px→ “字号18像素”font-weight:bold→ “字体粗细加粗”注意引号必须是英文双引号中文引号“”会直接失效分号;必须是英文的中文顿号、或逗号都不行。这是新手翻车最多的地方——明明代码看着一模一样就因为引号或分号是中文的整个样式不生效。2.3 元素被标签“框住”的一切才是阅读器真正看到的东西[p]这是文字[/p]这整块就叫一个p 元素[span]加粗字[/span]是一个span 元素。关键点来了元素 标签 内容 关闭标签。少一个就不完整。比如你写[p]没关掉阅读器会傻等[/p]结果后面所有文字都算进这个段落里排版全乱又比如你写[div][p]段落[/p][img srca.jpg/][/div]这是合法的——[div]包住了段落和图片但如果你写[p][div]内容[/div][/p]这就违法了——段落[p]里不能塞进一个“大盘子”[div]阅读器会直接忽略[div]或报错。所以动手前先问自己一句我想控制的是整块内容的位置用[div]还是一段文字的样式用[p]还是其中几个字的效果用[span]答案决定了你第一个标签写什么。2.4 空元素不用配对的“快捷键”但必须带/有些操作不需要“包裹内容”比如换行、画条线。它们没有“内容”所以不用写[/br]这种关闭标签而是直接在开始标签末尾加/表示“到此为止”[br /]→ 换一行相当于按一次回车[hr /]→ 画一条横线相当于 Word 里的“插入分隔线”提示[br /]后面不要跟空格写成[br / ]或[br/ ]都可能失效。它必须是紧凑的[br /]。现在请打开你的 epubBuilder新建一个空白章节照着下面这段粘贴进去然后点“预览”[div stylebackground-color:#f0f8ff;padding:10px;margin:5px;] [p styletext-align:center;font-size:20px;color:#2c3e50;] 欢迎来到 ePub 排版第一课 [/p] [hr /] [p styletext-indent:2em;] 这是第一段有首行缩进。 [/p] [p styletext-align:right;font-style:italic;] 这是第二段右对齐斜体。 [/p] [br /] [p stylecolor:red;font-weight:bold;] 最后一句红色加粗醒目提醒 [/p] [/div]你看到的就是一个带浅蓝底色、内边距、外边距的区块里面四段文字各按不同规则排列。这不是魔法是你亲手写的说明书被阅读器准确执行了。下一章我们就拆解这份说明书里每个参数的真实含义——为什么2em是缩进两个字为什么#f0f8ff是浅蓝色你马上就能自己改。3. 第一个能跑通的例子三步做出“居中大标题两栏图文”效果光讲概念容易飘咱们直接上手做一个真实场景你想给电子书加个封面页上面是居中的大标题下面左右各一张小图图上有简短说明。这种布局在教程、杂志类 ePub 里太常见了。很多人卡在“图片怎么并排”“标题怎么居中不顶头”其实只要三步10 分钟搞定。3.1 第一步用[div]搭好“舞台框架”标题和图片不能散着放得先给它们一个共同的“舞台”。这个舞台就是[div]我们用它把所有内容框起来并统一设置背景和内边距让整体不贴边[div stylepadding:20px;background-color:#fafafa;] !-- 这里放标题和图片 -- [/div]padding:20px→ 舞台内壁离内容 20 像素避免文字紧贴边缘background-color:#fafafa→ 浅灰底色让内容区更醒目#fafafa是十六进制色码后面会讲怎么查。为什么不用[p]因为[p]只能装文字装不了“标题图片”这种混合内容[div]是万能容器专干这事。3.2 第二步标题居中放大用[p]精准控制在[div]里面先放标题。用[p]标签但加style让它变大、居中、加粗[div stylepadding:20px;background-color:#fafafa;] [p styletext-align:center;font-size:28px;font-weight:bold;margin-bottom:30px;color:#1a1a1a;] 我的第一本 ePub 电子书 [/p] !-- 接下来放两张图 -- [/div]参数详解text-align:center→ 水平居中别写centered阅读器不认识font-size:28px→ 字号 28 像素比默认 16px 大一圈margin-bottom:30px→ 标题下方留出 30 像素空白给图片腾地方color:#1a1a1a→ 深灰色文字比纯黑#000000更柔和护眼。避坑常见问题与排查现象标题没居中还是靠左。原因text-align:center写错了比如写成text-align:centre英式拼写或漏了冒号text-align center。解决检查拼写必须是text-align:center且冒号是英文的。现象标题变大了但整段文字挤成一长条没换行。原因font-size设得太大比如100px超出了阅读器屏幕宽度。解决新手建议20px~32px之间试28px是安全值若需更大改用em单位如2.5em它会随阅读器默认字号自适应。现象标题颜色没变还是默认黑。原因color属性写在了错误位置比如写成[p color#1a1a1a style...]属性不能和style并列或用了中文引号。解决所有样式必须塞进style...里且引号是英文双引号。3.3 第三步左右两图说明用[div]float实现“图文绕排”现在放图。我们要两张图并排左边图说明右边图说明。epubBuilder 不支持 CSS Grid 或 Flexbox但float浮动足够好用[div stylepadding:20px;background-color:#fafafa;] [p styletext-align:center;font-size:28px;font-weight:bold;margin-bottom:30px;color:#1a1a1a;] 我的第一本 ePub 电子书 [/p] !-- 左图区块 -- [div stylefloat:left;width:45%;margin-right:5%;] [img srcimages/left.jpg /] [p styletext-align:center;font-size:14px;margin-top:5px;color:#555;] 左侧示意图 [/p] [/div] !-- 右图区块 -- [div stylefloat:right;width:45%;] [img srcimages/right.jpg /] [p styletext-align:center;font-size:14px;margin-top:5px;color:#555;] 右侧示意图 [/p] [/div] !-- 清除浮动防止后续内容错位 -- [div styleclear:both;] [/div] [/div]关键点拆解float:left和float:right→ 让两个[div]分别“浮”到父容器最外层[div]的左右两侧width:45%→ 每个图区块占 45% 宽度留 10% 作中间间隙margin-right:5%给左图右图没设margin-left自然形成空隙clear:both→ 这是必须加的收尾不加的话后续所有文字都会试图“绕”在浮动图的旁边导致排版崩溃。避坑常见问题与排查现象两张图叠在一起或者只显示一张。原因width加起来超过 100%比如都设50%或忘了float或clear:both漏了。解决确保left宽 right宽 间隙 ≤ 100%检查float是否写对确认clear:both在两个图区块之后、父[div]结束之前。现象图片显示不出来只看到一个方框。原因srcimages/left.jpg路径不对。epubBuilder 要求图片必须放在项目文件夹的images/子目录下且文件名严格匹配大小写、后缀.jpg或.png。解决在 epubBuilder 里点“资源管理”确认images/文件夹里真有left.jpg重命名时别用中文或空格用left_img.jpg这种。现象图上的说明文字没居中或颜色没变。原因[p]标签没写在[div]里面或者style里漏了text-align:center。解决把[p]完全包在[div]的开始和结束标签之间复制时检查style参数是否完整。现在保存这个章节点击 epubBuilder 的“预览”按钮。你应该看到一个浅灰背景的区块顶部是深灰大标题下方左右各一张图图下有居中小字说明。这就是你亲手搭建的第一个完整 ePub 排版效果。它不炫酷但结构清晰、逻辑自洽——而这正是专业 ePub 制作的起点。下一章我们深挖那些参数背后的“为什么”让你彻底告别“复制粘贴式排版”。4. 参数全解px、em、%、#ffffff……这些单位到底怎么选新手最大的困惑不是“怎么写”而是“为什么这么写”。比如为什么段首缩进用2em而不是20px为什么颜色写#ff6b6b而不是“红色”为什么margin有时写10px有时写1em这些不是随意定的背后是 ePub 阅读器的“适配逻辑”。搞懂它你才能写出在手机、平板、电纸书上都好看的样式。4.1 长度单位px是像素em是“我自己的字有多高”px像素绝对单位1px 屏幕上一个点。优点是精准缺点是“死板”。比如font-size:20px在小屏手机上可能撑满整行在大屏平板上却显得小气。em相对单位1em 当前元素的默认字体高度。如果阅读器默认字号是16px那么1em16px1.2em19.2px如果用户把默认字号调成20px那么1.2em就自动变成24px。%百分比和em类似也是相对值。font-size:120%1.2em但margin:10%是相对于父容器宽度的 10%不是字体高度。实战建议字号、缩进、行高优先用em或%。比如text-indent:2em缩进两个字宽、line-height:1.5em行距是字高的 1.5 倍这样用户调大字体时缩进和行距自动跟着变阅读体验不崩。边距、宽度、图片尺寸px和%各有场景。固定边距如margin:10px用px需要响应式如图占屏宽 50%用%。永远别用cm、in英寸ePub 规范不保证物理尺寸阅读器可能无视。4.2 颜色系统#rrggbb是你的调色板密码ePub 不认“红色”“蓝色”这种中文名只认十六进制色码#rrggbb比如#000000→ 纯黑r0, g0, b0#ffffff→ 纯白r255, g255, b255#ff6b6b→ 橙红r255, g107, b107怎么快速得到色码方法一推荐用 Windows 自带“画图”或 Mac“预览”截图取色导出时看色值方法二搜“在线取色器”上传图片点哪取哪方法三懒人记几个万能色#3498db清爽蓝、#2ecc71活力绿、#e74c3c警示红、#9b59b6优雅紫。避坑常见问题与排查现象颜色没生效还是默认黑。原因色码写错位数比如#ff6b6少一位或#ff66bbcc多两位或用了rgb(255,107,107)ePub 不支持 rgb 函数。解决色码必须是# 六位十六进制0-9, a-f大小写均可但必须六位。现象背景色太刺眼文字看不清。原因背景和文字对比度不足比如#f0f0f0浅灰配#cccccc灰字。解决用在线工具“WebAIM Contrast Checker”测对比度AA 级要求 ≥ 4.5:1如#333333配#ffffff。现象同一色码在不同阅读器里颜色不一样。原因ePaper电纸书屏幕色域窄无法显示鲜艳色OLED 屏幕则更艳。解决重要信息如标题、警告用高对比度组合黑字白底/白字黑底装饰色如边框、背景可稍柔和接受设备差异。4.3 边距与内边距margin是“我和邻居的距离”padding是“我和衣服的距离”这是新手最易混淆的两个属性属性作用类比常用写法效果示意margin元素外侧的空白控制它和其他元素的距离你站在人群里脚到别人脚的距离margin:10px四边同值margin:10px 5px上下10左右5padding元素内侧的空白控制内容文字/图到元素边框的距离你穿一件毛衣毛衣和你身体之间的空隙padding:15px四边同值padding:10px 20px 10px 20px上右下左为什么padding常配背景色因为padding是“内容和边框之间的空隙”加背景色后这块空隙也变色视觉上像给内容加了“内衬”。比如做提示框[div stylebackground-color:#fff3cd;border:1px solid #ffeaa7;padding:12px;margin:10px;] [p stylemargin:0;color:#856404;]⚠️ 这是一个温馨提醒[/p] [/div]这里padding:12px让文字离边框有呼吸感background-color填满整个 padding 区看起来就是个完整的“黄底提示框”。4.4 浮动与清除float是“让图飞起来”clear是“落地后别挡路”float:left/right的本质是让元素脱离正常文档流“浮”到容器一侧文字自动绕排。但它有个副作用后续所有元素都默认“继续绕排”除非你喊停。所以clear:both就是那个“喊停”的指令。它必须放在浮动元素之后且自身不浮动!-- 错误clear 写在浮动元素里面 -- [div stylefloat:left;clear:both;]图1[/div] [div stylefloat:right;clear:both;]图2[/div] !-- 正确clear 写在浮动元素外面作为独立“清道夫” -- [div stylefloat:left;]图1[/div] [div stylefloat:right;]图2[/div] [div styleclear:both;]!-- 这里清场 --/div血泪经验我第一次做多图排版时忘了加clear:both结果第三段文字全跑到图下面去了还以为是软件 bug调试半小时才发现是漏了这一行。从那以后我每次写完浮动都强制走一遍“浮动→内容→clear”三步绝不偷懒。现在你已经掌握了长度、颜色、边距、浮动四大核心参数的底层逻辑。它们不是孤立的代码而是你和阅读器沟通的“通用语”。下一章我们升级武器用外部 CSS 文件把重复样式“一键管理”告别全文搜索替换的噩梦。5. 从“贴膏药”到“建药房”用外部 CSS 文件统一管理所有样式前面所有例子样式都写在style...里这叫内联样式——好处是直观坏处是“哪用哪写”改一个标题样式得翻遍所有[p]标签去改。想象一下你做了 50 章每章都有“引用段落”现在想把引用的字体从14px改成15px难道要手动改 50 次不该建你的“样式药房”了——外部 CSS 文件。5.1 什么是 CSS 文件一个纯文本的“全局样式清单”CSSCascading Style Sheets就是一份纯文本文件里面只写“谁该长什么样”。epubBuilder 生成的 ePub 文件解压后一定有个main.css或stylesheet.css它就是你的“药房总账本”。用记事本或 VS Code 打开它你会看到类似这样/* 这是注释阅读器会忽略 */ p { text-indent: 2em; line-height: 1.5em; margin-top: 0; margin-bottom: 0; } h3 { text-align: center; color: #2c3e50; font-weight: bold; }p { ... }→ 对所有p标签生效h3 { ... }→ 对所有h3标签生效每行属性: 值;用分号结尾{ }里的所有规则会自动应用到对应标签的所有实例上。提示ePub 规范要求 CSS 文件必须是 UTF-8 编码用记事本保存时务必选“另存为”→ 编码选“UTF-8”否则中文注释会变乱码。5.2 第一步把内联样式“搬进”CSS用类选择器命名假设你有一段“引用文字”一直用这个内联写法[p styletext-indent:0em;font-size:1.1em;margin-left:2.5em;margin-right:2.5em;font-style:italic;] 这是引用内容。 [/p]现在把它“搬进”CSS 文件起个名字叫quote引用/* main.css 里新增 */ .quote { text-indent: 0em; font-size: 1.1em; margin-left: 2.5em; margin-right: 2.5em; font-style: italic; }然后在 ePub 文本里把原来的长串style删除换成调用这个类[p classquote] 这是引用内容。 [/p]为什么叫.quote.开头表示“类选择器”名字可以自定义.citation、.note都行但不能数字开头.1quote错不能有空格或特殊符号.my quote错。建议用英文小写短横线比如.warning-box、.chapter-title。5.3 第二步批量修改只需改一行 CSS现在全书所有引用段落都用[p classquote]那么想改样式只需改main.css里.quote { ... }这一块。比如要把引用字体加大、加粗.quote { text-indent: 0em; font-size: 1.2em; /* 从 1.1em 改成 1.2em */ font-weight: bold; /* 新增加粗 */ margin-left: 2.5em; margin-right: 2.5em; font-style: italic; }保存 CSS 文件回到 epubBuilder把修改后的main.css拖进项目资源里覆盖原文件epubBuilder 会提示“替换”再点“预览”——全书所有.quote段落瞬间更新这才是专业制作的效率。避坑常见问题与排查现象加了classquote但样式没变还是默认效果。原因CSS 文件没保存或保存时编码不是 UTF-8或文件名没写对必须是main.css不是main.css.txt。解决用记事本“另存为”编码选 UTF-8检查文件扩展名是.css在 epubBuilder 的“资源管理”里确认main.css已存在且时间戳最新。现象改了 CSS但只有部分段落生效有的没变。原因有的段落写的是[p classquote]有的写成了[p classQuote]大小写敏感或[p classquote]单引号epubBuilder 不认。解决全选文本查找class统一替换成classquote确保引号是英文双引号。现象CSS 里写了background-color但预览时背景是白的。原因ePaper电纸书阅读器不支持背景色只显示黑白灰。解决背景色仅用于 LCD/OLED 屏幕手机、平板做提示框时优先用边框border 文字色color保证兼容性。5.4 进阶一个 CSS 文件管理全书所有“皮肤”你可以把全书常用样式都放进main.css形成你的“样式库”/* main.css —— 我的 ePub 样式库 */ /* 1. 全局段落 */ p { text-indent: 2em; line-height: 1.5em; margin-top: 0; margin-bottom: 0; } /* 2. 引用段落 */ .quote { text-indent: 0em; font-size: 1.1em; margin: 1em 2.5em; font-style: italic; color: #555; } /* 3. 小提示框 */ .tip-box { background-color: #e3f2fd; border-left: 4px solid #2196f3; padding: 10px; margin: 15px 0; } .tip-box p { margin: 0; color: #0d47a1; font-weight: bold; } /* 4. 章节标题 */ .chapter-title { text-align: center; font-size: 1.8em; margin: 2em 0 1em; color: #1a237e; font-weight: bold; }然后在文本里按需调用[h3 classchapter-title]第一章初识 ePub[/h3] [p]这是普通段落用全局 p 规则。[/p] [p classquote]这是引用段落用 .quote 规则。[/p] [div classtip-box] [p] 小提示CSS 文件是 ePub 的灵魂[/p] [/div]从此你的 ePub 不再是“贴满膏药的纸”而是一个有组织、可维护、易迭代的“活文档”。下一步就是把你今天做的所有效果打包成可复用的模板——比如“封面页模板”“引用模板”“提示框模板”下次新书直接套用十分钟起步。6. 下一步学什么从“能做”到“做得好”的三个关键习惯你已经能写出居中标题、左右图文、引用段落、提示框甚至用上了外部 CSS。但这只是入门的终点却是专业制作的起点。很多新手到这里就停了结果做出来的 ePub 在手机上看还行一到电纸书上就文字糊成一片、图片错位、换行混乱……问题不在技术而在三个被忽略的习惯。我第一次交稿被退回就是因为没养成它们。6.1 习惯一永远用“三端预览”不只信电脑屏幕ePub 的终极用户不是你的 Windows/Mac而是千差万别的阅读器手机/平板iOS Books、安卓微信读书LCD 屏色彩艳支持 CSS 全功能电纸书Kindle、掌阅、文石E Ink 屏只有黑白灰不支持background-color、float、本文还有配套的精品资源点击获取
