luomo

luomo

主页归档

EPUB电子书样式

#EPUB#电子书1304
AI 生成的摘要
这篇文章介绍了一些用于排版EPUB电子书的CSS样式。作者提供了整体样式、常规样式、打印样式、目录示例、标题示例、正文示例、强调文字、小节序号、上标注释、分割线和代码块等样式。这些样式旨在提供良好的阅读体验，包括排版、字体大小、颜色、行高等方面的设置。

说明#

从互联网上下载的大部分 EPUB 电子书排版混乱又难看，为了让自己有一个良好的阅读体验，我写了一些简单的 CSS 样式，这些样式只规定了一些基本的排版，力求简洁易读。

整体样式#

这部分样式规定了 EPUB 电子书排版中的所有默认属性，如链接样式、对齐方式、文本间距等。

常规样式

/* 文本主体统一样式 */
.body {
	display: block; /* 显示块级元素 */
	text-align: left; /* 文本靠左排列 */
	text-align: justify; /* 文本两端对齐 */
	padding: 0 0 0 0; /* 内边距 */
	margin: 0 5pt 0 5pt; /* 上右下左外边距 */
}
/* 链接样式 */
a {
	color: #000000; /* 修改链接颜色蓝色为黑色 */
	text-decoration: none; /* 取消链接下划线 */
}

打印样式

/* 打印文本样式 */
@page {
	margin-bottom: 5pt;
	margin-top: 5pt;
}
/* 打印封面样式 */
@page {
	padding: 0;
	margin: 0;
}

目录示例#

这部分样式规定了 EPUB 电子书内嵌的目录排版。

/* 第一层级目录，单级目录亦用此样式 */
.catalog1 {
	font-size: 100%; /* 字体大小 */
	line-height: 125%; /* 行高 */
	margin: 0.5em 0 0.5em 0; /* 上右下左外边距 */
}
/* 第二层级目录 */
.catalog2 {
	font-size: 100%;
	line-height: 125%;
	margin: 0.2em 0 0.2em 2em;
}
/* 第三层级目录 */
.catalog3 {
	font-size: 100%;
	line-height: 125%;
	margin: 0.2em 0 0.2em 4em;
}

<p class="catalog1"><a href="LUOMO01.html#Chapter001">1. 第一章</a></p>
<p class="catalog2"><a href="LUOMO01.html#Chapter002">1.1 第一节</a></p>
<p class="catalog3"><a href="LUOMO01.html#Chapter003">1.1.1 第一讲</a></p>

image

标题示例#

这部分样式规定了 EPUB 电子书的标题排版。

/* 标题样式 */
.title {
	line-height: 125%; /* 行高 */
	font-weight: bold; /* 文本粗体 */
	font-size: x-large; /* 字体较大 */
	margin-top: 0; /* 上外边距 */
	padding: 5px 5px 5px 5px; /* 内边距 */
	border-style: none none none solid; /* 元素边框 */
	border-width: 0px 0px 0px 10px; /* 边框宽度 */
	border-color: #000000; /* 边框颜色 */
}

<h1 id="Chapter001" class="title">1. 第一章</h1>
<h1 id="Chapter002" class="title">1.1 第一节</h1>
<h1 id="Chapter003" class="title">1.1.1 第一讲</h1>

image

正文示例#

这部分样式规定了 EPUB 电子书的正文排版。

/* 正文样式 */
.mainbody {
	font-size: 100%; /* 字体大小 */
	line-height: 120%; /* 行高 */
	text-indent: 2em; /* 首行文本缩进 */
	margin: 0.3em 0 0.3em 0em; /* 上右下左外边距 */
}

<p class="mainbody">正文示例01</p>
<p class="mainbody">正文示例02</p>
<p class="mainbody">正文示例03</p>

image

强调文字#

这部分样式规定了 EPUB 电子书的各类强调文字排版，这部分样式可以根据需求改变字体大小、颜色等属性，以达到需要的阅读体验。

/* 强调字体，颜色可根据需要改变 */
.emphasize {
	color: #ff0000; /* 字体颜色 */
	font-size: 90%; /* 字体大小 */
	font-weight: bold; /* 文本粗体 */
	text-indent: 0; /* 取消首行文本缩进 */
}

<br/>
<p class="emphasize">强调文字示例
<br/>
强调文字示例
<br/>
强调文字示例
<br/>
强调文字示例
</p>
<br/>

image

小节序号#

有些书籍在大章节中会有很多小节，小节没有标题，单独以数字或其他计数文字来区分，这部分样式就规定了 EPUB 电子书中对这种小节的序号的排版。

/* 小节序号 */
.sectionnum {
	font-size: 125%; /* 字体大小 */
	line-height: 125%; /* 行高 */
	font-weight: bold; /* 文本粗体 */
	text-align: center; /* 文本居中 */
	font-style: italic; /* 文本斜体 */
	margin: 2.5em 0 0.5em 0; /* 上右下左外边距 */
}

<p class="section">1</p>
<p class="section">2</p>
<p class="section">3</p>

image

上标注释#

有些书籍拥有很多注释，注释内容通常放在章节末尾，不与正文在一起，而是通过一些数字上标来链接正文内容和注释内容，这部分样式就规定了 EPUB 电子书中对这种数字上标的排版。

/* 注释序号 */
.annotatenum {
	font-size: 75%; /* 字体大小 */
	line-height: 125%; /* 行高 */
	vertical-align: super; /* 垂直对齐文本的上标 */
}
/* 注释内容 */
.annotate {
	font-size: 80%; /* 字体大小 */
	line-height: 120%; /* 行高 */
}

<p>注释序号
<sup class="annotatenum" id="annotatenum001"><small><a href="annotate001">［1］</a></small></sup>
</p>
<p>
<sup class="annotatenum" id="annotate001"><small><a href="annotatenum001">［1］</a></small></sup>
<span class="annotate">注释体</span>
</p>

image

分割线#

在有注释或其他与正文不同的内容时，通常会用分割线将这些内容与正文相区分，这部分样式就规定了 EPUB 电子书中对分割线的排版。

/* 分割线 */
.splitline {
	height: 2px; /* 线条粗细 */
	width: 98%; /* 线条宽度 */
	border: none; /* 清除原始线条 */
	background: #bcbcbc; /* 线条颜色 */
}

<hr class="splitline"/>

image

代码块#

计算机类的书籍通常会有很多代码内容，这部分样式就规定了 EPUB 电子书中对代码块的排版。

/* 代码块盒子 */
.boxblock {
	background-color: #dcdcdc; /* 代码块背景颜色 */
	margin: 0.25em 0 0.25em 0; /* 上右下左外边距 */
	padding: 0.1em 0 0.1em 0; /* 上右下左内边距 */
	border: none; /* 取消代码块边框 */
	border-radius: 2px; /* 边框框圆角 */
}
/* 代码块文本 */
.boxtext {
	font-size: 60%; /* 字体大小 */
	line-height: 120%; /* 行高 */
	white-space: pre-wrap; /* 文本正常空格及换行 */
	ertical-align: middle; /* 垂直对齐文本中部 */
}

<div class="boxblock">
<pre class="boxtext">    Code block example 01;
    Code block example 02;
    Code block example 03;
</pre>
</div>

image

上下标数字#

这部分样式规定了 EPUB 电子书中对上下标数字的排版，上下标数字通常用于数字的次方、化学元素表达式等场合。

/* 上标数字 */
<p>10<sup><small>35</small></sup></p>
/* 下标数字 */
<p>10<sub><small>35</small></sub></p>

image

图片示例#

对于需要有插图插入的书籍，这部分样式就规定了 EPUB 电子书中对正文图片的排版

/* 正文图片 */
.image {
	width: auto; /* 自适应宽度 */
	height: auto; /* 自适应高度 */
	max-width: 99%; /* 最大宽度 */
	display: block; /* 显示块级元素 */
	line-height: 1.5; /* 行高 */
	margin-left: auto; /* 自适应左外边距 */
	margin-right: auto; /* 自适应右外边距 */
/* 图片水平显示位置只需改变 margin-left 或 margin-right 属性值即可
   图片居左：margin-left: 0; margin-right: auto;
   图片居右：margin-left: auto; margin-right: 0;
   图片居中：margin-left: auto; margin-right: auto;
   注意使用这两个属性改变水平位置时一定要加上 display: block; 属性
*/
	text-align: center; /* 水平居中 */
	vertical-align: middle; /* 垂直居中 */
}
/* 文字图片，某些生僻字无法正常打出来，以图片的形式插入正文中用到此样式 */
.imagetext {
	line-height: 1.2;
	height: 1em; /* 图片设置为一个字高 */
	width: auto; /* 自适应宽度 */
	max-width: 99%; /* 最大宽度 */
	text-align: center; /* 水平居中 */
	vertical-align: middle; /* 垂直居中 */
}

<img class="image" src="Images/image01.jpg"/>
<img class="imagetext" src="Images/image01.jpg"/>

image

图片注释#

对于需要有插图插入的书籍，这部分样式就规定了 EPUB 电子书中对正文图片的注释内容的排版

/* 图片注释 */
.imagetitle {
	margin: 1em 0; /* 上右下左外边距 */
	color: #555555; /* 文本颜色 */
	font-size: 0.75em; /* 字体大小 */
	text-align: center; /* 文本居中 */
}

<p class="imagetitle">图片注释</p>

image

封面示例#

电子书通常会有自己的封面，这部分样式就规定了 EPUB 电子书中对封面图片的排版

<style type="text/CSS">
/* 打印封面样式 */
@page {
	padding: 0;
	margin: 0;
}
/* 预览封面样式 */
body {
	text-align: center;
	padding: 0;
	margin: 0;
}
</style>

<div>
<img width="100%" src="Images/cover.jpg"/>
</div>

opf 文件之元数据 <metadata>#

opf 文件是 EPUB 电子书中不可或缺的一部分，其中的 元数据 <metadata> 属性是重要的内容，它通常包含以下几个部分。

<metadata xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:opf="http://www.idpf.org/2007/opf">
	<dc:title>标题</dc:title>
	<dc:creator>作者</dc:creator>
    <dc:format>格式</dc:format>
	<dc:description>简介<dc:description>
    <dc:date>时间2023-02-10T05:20:00.00+00:00</dc:date>
    <dc:identifier id="ebookid">文档ID</dc:identifier>
    <dc:language>zh</dc:language>
	<dc:publisher>出版社</dc:publisher>
	<dc:contributor>贡献者或其它次要责任者</dc:contributor>
    <dc:type>类型</dc:type>
	<dc:subject>关键词</dc:subject>
	<dc:source>来源信息<dc:source/>
	<dc:relation>相关资料<dc:relation/>
	<dc:coverage>覆盖范围<dc:coverage/>
	<dc:rights>权限描述</dc:rights>
</metadata>

说明：

  1. 元数据 <metadata> 中 必须包含 title、Identifier 和 Language 三个元素；
  2. 如有需要，title、creator、contributor、identifier、type、date、subject 允许设置多行多个数据；
  3. date 元素采用基于 ISO5601 定义的日期格式，同时以可选的 event 属性定义了以下三种不同类型：
<dc:date opf:event="creation">创作时间</dc:date>
<dc:date opf:event="publication">发行时间</dc:date>
<dc:date opf:event="modification">修改时间</dc:date>
  1. identifier 元素中至少要有一个指定 id 属性，并从 package 元素的 unique-identifier 属性中引用 id，同时还有一个可选的 event 属性定义了不同类型的书号：
<dc:identifier id="ebookid">文档ID</dc:identifier>
<dc:identifier opf:scheme="ISBN">ISBN书号</dc:identifier>
加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。