【分享】APK電子書簡易CSS小技巧

加好友 · 發表於 2019-8-24 23:11

馬上加入Android 台灣中文網，立即免費下載應用遊戲。

您需要登錄才可以下載或查看，沒有帳號？註冊

x

本帖最後由 sue1289 於 2019-8-26 00:07 編輯

　　發帖一段時日了，總結一些心得和同好分享，讓您製作電子書時較能得心應手，希望對您有幫助。

製作電子書最簡易的方法，應該是【電子書簡易製作(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)在一格內加另一格

登錄/註冊後可看大圖

(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><font color="blue"><font size="5">字型大小=5，藍色的文字</font></td>

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

---先這樣-----