luomo

luomo

首頁封存

EPUB電子書樣式

#EPUB#电子书1305
AI 翻譯
這篇文章透過AI由簡體中文翻譯成繁體中文。查看原文
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>
載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。