電子書簡易CSS小技巧

最近閒著，作一些書籍(好書?)的電子書放到「android台灣中文網」分享，有人想知道一些簡易的電子書CSS，於是參考網路資料，整理了一下，紀錄在此，以便將來參考：

• 製作電子書最簡易的方法，應該是【電子書簡易製作(TXT→瀪化姬+sigil)】，只要文字檔整理好了→用Sigil開啟，經過(段落縮排[如果預覽沒縮排]、分章節、作[註解]連結、製作目錄、產生封面圖)，幾個步驟就完成一本電子書了。
  ★製作電子書時的一些簡易的CSS：(當然，電子書不用過於美化---主要是看書的內容嘛，所以可用的css有限)
• 文字方面：
  (1)在兩段文字間加入一空白行(情境不連接時用)：<br/>或</br>(每加一次則多空一行)
  (2)加分隔線：<hr/> (每加一次則多一分隔線；用在加註等)
  {分隔線：長度是視窗寬度一半的水平線:<hr width="50%">；粗細大小是10的水平線:<hr size=10>；無陰影(實線)且粗細大小是10的水平線:<hr noshade size=10>；置右且長度是視窗寬度70%、粗細大小是4的水平線:<hr align=right  width="70%" size=5> }
  
  (3)文字靠左、置中或靠右(特殊敘述或書信用)：在該段文字前後加<p>文字內容</P>，再選取[文字內容]按上方排版用的小圖示即可自動加上。 (若要自己加的話像這樣：<p style="text-align: center;">文字內容</p>)
  
  (4)縮排2個全型字：<p style="text-indent: 2em;">文字內容</p> (由於段落多，這個應該放在stylesheet.css中；若有特殊情況可用)
  
  (5)行距1.5：<p style="line-height: 1.5;">文字內容</p>(正常是1.5，若想更改行距可用，如插入一首詩)
  
  (6)加空白底線:<u>(全型空白)</u> (若空白改為文字，則文字下有底線；可選取文字後用小圖示加底線、粗體、斜體、上標……)(<big>將所標記的文字放大</big>，<small>將所標記的文字縮小</small>)
  
  (7)文字大小及顏色：<p style="font-size: 1.5em;color: #146Eb4;#">文字內容</p>(文字大小正常為1em)
  
  (8)標題字型大小(置中，h1大[一級標題])：<h1 align="center">h1文字在中間</h1> (h2較小[二級]、h3、h4等…；標題加上h1等，可用來作目錄)
  
  (9)文字背景色：<p style="background: lime;">文字內容</p> (亮綠色背景)
  
  (10)將文字放限制在一區塊內：<blockquote>文字內容</blockquote>
  
  ★<p>文字內容</p>是最基本的，以上在<p>內的CSS都可以放在一起，用;號隔開。
  
• 圖片方面：
  (1)設定或限制圖片寬、高、圖外框粗細：<img alt="影像" src="cover.jpg(這是圖片名)" width="300" height="200" border="5"> (寬高可用百分比，如width="50%"；border="0"，則無外框)
  
  (2)圖片置中： <p  Align=center> <img src="圖片位址"> </p> [或者left(靠左)／right(靠右)]
  
• 表格方面：
  (1)表格基本結構：<tr>是一橫列，<td>是一格(若要1列3格，則在<tr></tr>間放3個<td></td>)(表格內容也可用圖)

  <table border="1">(框線粗細為1) <tr> <td>表格內容</td> </tr> </table>

  
  (2)在一格內加另一格

  <table border="1"> <tr><td >AAA</td><td>BBB</td></tr> <tr><td > <td> <p>CCC</p> <p>DDD</p> </td> </td><td>EEE</td></tr> </table>

  
  (3)其他性質如下：(自行測試)
  

  width： table 的寬度 cellpadding：空白大小 border：邊框的粗細 background-color：背景顏色 colspan：控制儲存格橫跨幾個欄位 rowspan：控制儲存格垂直跨幾個欄位

  例：<table style="line-height:25px;" border="1"> (行高25px，邊框=1) 例：<table border="1" cellpadding="10" style="border:4px #10A126 solid;text-align:center;">

  <td colspan="3">橫跨3列</td> <td rowspan="2">垂直合併2欄</td>

  <td><font color="blue"><font size="5">字型大小=5，藍色的文字</font></td>

• 文字區塊：
  (1)<div  style="自訂">區塊內容</div>
  (如：<div style="border:2px green solid;background-color:pink">這是個有綠色邊框，背景粉紅的區塊</div>)(顏色表示使用顏色的英文名稱、十六進位制的色碼、 RGB色碼皆可)

---end----