EPUB 入門指南

單元 8 - 段落與文字的元素及樣式設定

段落主要會用 <p> 或 <div>

通常 <div> 作為排版用的區塊元素，因為像是 <img> 、 <audio> 、 <video> 之類的多媒體元素其實都是行內元素，所以通常會把這些多媒體元素放到 <div> 裡面做排版，也就是把多媒體元素放到設定好 margin 、 padding 及 border 的 <div> 中。

本書 <p> 的樣式碼如下

p {
  padding: 1em;
  word-break: break-all;
}

另外在 <body> 有設定

body {
  line-height: 1.6em;
}

line-height 為行高，以下在本書頁面中的第一個 <p> 示範可能是瀏覽器或 EPUB 閱讀器的預設 CSS 設定，加上黑色實線的 border 比較好知道排版模式，第二個則是本書 <p> 加上黑色實線的 border

這個 <p> 的 padding 為 0em ， line-height 為 1em ，另外加上黑色實線的 border 。

這個 <p> 只有加上黑色實線的 border 。

感受到差別了嗎？上面第一個 <p> 明顯很緊密，雖然是可以閱讀，總是不怎麼舒適，第二個 <p> 就好看多了，而且段落因為上下都有比較多的空間，這也看的也比較清楚。

總而言之， margin 、 padding 、 border 等三個屬性是排版的關鍵，這三個值設定好，佐以其他屬性設定，就能做出美觀、舒適的頁面。

繼續看到文字的元素，重新看到下表

超連結元素 <a> 在本書中已經出現過很多次，例如這是連回單元 1 的超連結， CSS 設定如下

a {
  color: gray;
  text-decoration: underline wavy gray;
}

電子書版是設定成 wavy ，至於網站版是一般的底線。

這裡把 color 設定為 gray ，也就是灰色，而 text-decoration 為文字裝飾，這裡 underline 是底線， wave 是波浪狀，然後同樣是 gray 灰色。

text-decoration 有三種，如下表所示

預設是黑色直線，以下以紅色的 line-through 為例，示範五種線條

<span> 也在本書頁面中反覆使用，例如段落中的標記碼 <span> ， CSS 設定如下

span.code2 {
  font-family: monospace;
  background: #EDEDED;
  padding-right: 0.1em;
  padding-left: 0.1em;
}

這裡 background 只有設定顏色，這裡採用灰色底，另外設定 padding-right 跟 padding-left 各為 0.1em ，注意到 font-family 設定為 monospace ，這是等寬字型的字型家族，其他字型家族如下表

以上可以看到字型家族基本上是針對歐美文字，中文的話視系統而定，倒是 font-family 也可以設定指定的字型，就將「設定值」改為指定的字型名稱即可。

設定字型家族的目的是讓瀏覽器或 EPUB 閱讀器去套用系統預設的字型，如果是系統沒有的字型，可能就需要自己加到 EPUB 檔案中，然後再另外設定，這些在單元 13 會介紹。

其他 <i> 是斜體，例如 Hello ， <b> 是粗體，例如 Hello ， <s> 則是刪除線，例如 ~~Hello~~ ，刪除線的 CSS 已經在上面 text-decoration 的 line-through 示範過，其他兩個如果用 CSS 設定，如下表

設定值	範例
font-style: italic	Hello 哈囉
font-weight: bold	Hello 哈囉

最後上標例如^上標文字，下標例如_下標文字，兩者都視情況來使用，如果是用 CSS 設定，如下表

設定值	範例
vertical-align: super	x2 + 3x - 1
vertical-align: sub	H2O

下一單元繼續介紹表格及列表的 HTML 元素及 CSS 設定。