2019年8月25日 星期日

電子書簡易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----

沒有留言:

張貼留言