EPUB 入門指南

單元 16 - 圖文書 EPUB 的 CSS 設定

圖文書 hello.epub 的所有 XHTML 檔案都套用 style.css 的設定

style.css 內的規則排列可能有點亂，以下分類整理各項規則，以下為列表元素的部分

nav#toc ol, li {
  list-style-type: none;
  margin-left: 1em;
  padding-left: 0;
}

ul {
  list-style: none;
}

ul, ol {
  margin-left: 2em;
}

ol.number li {
  list-style-type: decimal;
}

li {
  margin-top: 0.2em;
}

原 style.css 有點亂是因為後續追加規則後，並沒有把規則順序做一致性的整理，實務上很多 CSS 檔案可能都是如此，倒是只需要知道規則套用的優先權，HTML 檔案中離元素最近的規則最優先， CSS 檔案中為最後設定的規則優先。

以上的 ul 或 ol 的設定主要是將 list-style-type 設定為 none ，也就是不顯示項目符號或數字。

表格相關的有以下 div.table 及 table.codedata 、 table.glossary

div.table {
  border: 1px solid black;
  margin-right: 1.5em;
  margin-left: 1.5em;
}

table.codedata {
  display: table;
  width: 100%;
  font-family: Courier;
  text-align: center;
  border: none;
}

table.codedata td {
  padding-top: 4px;
  border-top: 1px solid black;
}

table.codedata td.none {
  border: none;
  border-style: none;
}

table.codedata td.lan {
  text-align: left;
  padding-left: 1em;
}

table.glossary {
  display: table;
  width: 100%;
}

table.glossary th {
  text-align: center;
  font-size: large;
  padding: 0.2em;
}

table.glossary td {
  border-top: 1px solid silver;
  text-align: left;
  padding: 0.2em;
}

以上詳細設定到 td 的部分，這是因為要用 td 顯示隔線，另外 codedata 也把 font-family 設定為 Courier ， Courier 是 Mac 、 Windows 、 iOS 或 Android 都有的等寬字型。

body 設定 line-height 為 1.6em ，因此只要 <body> 裡的元素沒有設定 line-height ，就會套用 1.6em 的設定

body {
  line-height: 1.6em;
}

pre 用來放程式碼，除了上下左右的 padding 設定外，字型也是用程式碼常見的等寬字型，這裡同樣用 Courier ，另外設定 font-size 、 line-height 與 background-color

pre {
  padding-right: 1.4em;
  padding-left: 1.4em;
  padding-top: 0.6em;
  padding-bottom: 0.6em;
  font-family: Courier;
  font-size: small;
  line-height: 1.3em;
  background-color: #EEE;
  word-break: break-all;
}

a 的部分主要是將文字顏色改為灰色，然後加入波浪狀的底線

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

.note 是頁面上的附加說明段落，主要加入 border-radius 與 before 的 content

.note {
  margin: 1.5em;
  line-height: 1.7em;
  border-radius: 1.2em;
  border: 2px solid gray;
  padding: 1em;
  height: auto;
  word-break: break-all;
}

.note:before {
  content: "註";
  background-color: gray;
  color: white;
  padding: 0.2em;
  margin-right: 0.5em;
}

.article 用來顯示每個頁面最外圍的框線，此外 top 、 left 、 right 指的是對上、左、右邊界的距離

.article {
  top: 2em;
  left: 0;
  right: 0;
  margin-left: 0.2em;
  margin-right: 0.2em;
  background-color: #fefefe;
  color: #111;
  border-right: 0.1em solid #878787;
  border-left: 0.1em solid #878787;
}

圖片 <img> 用 img 的 <div> ，主要是將 text-align 設定為 center ，然後 img 用 pic 設定 max-width 為 100% ，這會讓圖片在不失真的情況下充滿整個 <div>

div.img {
  text-align: center;
  margin: 0.5em;
}

img.pic {
  max-width: 100%;
}

內文的程式碼，如果是關鍵字用 kcode 的 span ，非關鍵字用 code2 的 span ，主要是加上灰底以及用等寬字型

span.kcode {
  font-family: Courier;
  font-weight: bold;
  background: #EDEDED;
}

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

語法高亮度則是個別對特定文字用 <span> 標記顏色

span.green {
  color: green;
}

span.blue {
  color: blue;
}

span.maroon {
  color: maroon;
}

span.olive {
  color: olive;
}

span.orange {
  color: #FF4500;
}

置頂區域用 .topdiv ，置底區域用 .bottomdiv 與 .bottomdiv3 ，注意 .bottomdiv3 沒有改背景顏色，主要是把 text-align 設定為 center

.topdiv {
  background-color: #434343;
  color: #eee;
  border-bottom: 2px solid #000;
  padding-top: 1em;
  padding-bottom: 1em;
  text-align: center;
}

.bottomdiv {
  background-color: #434343;
  color: #fff;
  padding-top: 1em;
  padding-bottom: 1em;
  text-align: center;
  font-size: small;
  border-top: 3px solid #878787;
}

.bottomdiv3 {
  text-align: center;
  margin-top: 1em;
  margin-bottom: 1em;
}

最後 @keyframes flash 是 CSS 動畫的部分

@-webkit-keyframes flash {
from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  animation-name: flash;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  text-align: center;
  font-size: 400%;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding: 0em;   
}

以上 -webkit- 開頭的部分是某些瀏覽器可能不直接支援動畫相關的屬性，而是支援 -webkit- 開頭的屬性名稱。

@keyframes 是設定動畫的每一影格怎麼去呈現， flash 是動畫名稱， opacity 是透明度，因此以下是設定套用 flash 的區塊元素中內容的透明度變化

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

簡單說，每一次循環時間的 50% ，透明度為 1 ， 25% 及 75% ，透明度 0 ，該區塊元素就會在透明度 1 到 0 之間交替，這會造成一閃一閃的視覺效果。

下面類別選取器 .flash 中以 animation- 開頭的屬性就是動畫屬性

animation-name: flash;
animation-duration: 5s;
animation-iteration-count: infinite;

以上 animation-name 為動畫名稱，也就是要套用哪一個 @keyframes 設定，然後 animation-duration 為動畫持續時間， 5s 就是 5 秒，最後 animation-iteration-count 為動畫播放次數， infinite 是無限的意思，因此翻到有 CSS 動畫的這一頁， CSS 動畫會一直循環播放。

CSS 動畫會讓讀者眼睛一亮，搭配好內容就容易達到暢銷，不過各家電子書店對 CSS 動畫支援不一，未來應該還是都會支援的。

本書範例到此討論結束，下一步是？

上一頁單元 15 - 圖文書 EPUB 的 HTML 結構
回《EPUB 入門指南》目錄
下一頁單元 17 - 下一步

回程式語言教材首頁