/** ----------------------------------------------- **/ /** 全書樣式設定 **/ /** ----------------------------------------------- **/ /** 全文行高、對齊 **/ body { font-size: 1em; text-align: justify; line-height: 1.618em; } /** 鏈接顏色 **/ a { color: #0000CC; } /** 影音窗格設定**/ video { width: 80%; height: auto; text-align: center; } audio { width: 80%; height: auto; text-align: center; } /** ------------------- **/ /** ------段落樣式------ **/ /** ------------------- **/ /** 無縮進 **/ p.kindle-pubu-para-no-indent{ text-indent: 0em; } /** 全文段落縮進兩個字符 **/ p { text-indent: 1em; } /** 版權頁排版縮進零個字符 **/ p.kindle-pubu-copyright-text { margin:0em 2em 1em 2em; line-height: 1.618em; text-indent: 0em; } /** 空兩個字符,但無縮進**/ div.kindle-pubu-copyright-indent{ margin-left: 2em; } /** 全段落楷體、標楷體 **/ p.kindle-pubu-kai { font-family: STKai, "MKai PRC", "標楷體", Kai; } /** 段落引用樣式,注意字體不同、上左下右空間多做空一字符 **/ p.kindle-pubu-ref { margin:1em 1em 1em 1em; font-family: STKai, "MKai PRC", "標楷體",Kai, "DFPMingLight-B5"; } /** 圖說文字,居中對其**/ p.caption{ font-size: 0.85em; font-family:"Hiragino Sans GB","Microsoft Jhenghei","微軟正黑體","Helvetica",sans-serif; text-align: center; margin-top: -0.3em; text-indent: 0; } /** ------------------- **/ /** -------引用框------- **/ /** ------------------- **/ blockquote.kindle-pubu-blockquote { background: #DCDCDC; border-left: 0.5em solid #c7c7c7; margin: 1.5em; padding: 1em; text-indent:2em; line-height:1.5em; } div.kindle-pubu-blockquote { border-left: 0.5em solid #c7c7c7; margin: 1.5em; padding: 0.5em; text-indent:2em; font-family: STKai, "MKai PRC", "標楷體",Kai, "DFPMingLight-B5"; line-height:1.5em; } /* 多段落可使用 div 功能的引用框 */ blockquote.kindle-pubu-blockquote { background: #f9f9f9; border-left: 0.5em solid #ccc; margin: 1.5em; padding: 0.5em; text-indent:2em; font-family: STKai, "MKai PRC", "標楷體",Kai, "DFPMingLight-B5"; line-height:1.5em; } /** ------------------- **/ /** ------字符樣式------ **/ /** ------------------- **/ /**特定字背景色,可調整**/ span.kindle-pubu-specialtext-bg{ background-color:red; } /**部分楷体**/ span.kindle-pubu-specialtext-kaiti{ font-family: STKai, "MKai PRC", "標楷體",Kai, "DFPMingLight-B5","Hiragino Sans GB","Microsoft Jhenghei","微軟正黑體","Helvetica",sans-serif; } /** 簽名、引用人名 **/ p.kindle-pubu-signature { margin:1em 1em 1em 1em; font-family:"Hiragino Sans GB","Microsoft Jhenghei","微軟正黑體","Helvetica",sans-serif; text-align: right; } /** 首字下沉,須配合讓段落縮進為零個字符**/ span.kindle-pubu-dropcap { float:left; font-size:2.85em; line-height: 1em; padding:0em 0em 0em 0em; text-indent:0 } p.kindle-pubu-dropcap{ text-indent:0em; } /** ------------------- **/ /** ------標題樣式------ **/ /** ------------------- **/ /** 雙畫線標題 **/ h1.kindle-pubu-heading-1 { border-bottom: 2px dashed #c7c7c7; border-top: 2px dashed #c7c7c7; padding: 0.75em 0 0.75em 0; width: 100%; font-family:"Hiragino Sans GB","Microsoft Jhenghei","微軟正黑體","Helvetica",sans-serif; font-size:1.4em; line-height:1.4em; } /** 下單線標題 **/ h1.kindle-pubu-heading-2 { font-family:"Hiragino Sans GB","Microsoft Jhenghei","微軟正黑體","Helvetica",sans-serif; font-size:1.4em; line-height:1.4em; border-bottom: 2px dashed #c7c7c7; margin-bottom: -0em; width: 100%; } /** 一級標題隱形 **/ h1.kindle-pubu-invisible-1{ font-size:1.4em; display:none } h2.kindle-pubu-heading-2 { font-family:"Hiragino Sans GB","Microsoft Jhenghei","微軟正黑體","Helvetica",sans-serif; font-size:1.4em; line-height:1.4em; margin-top:2.5em; margin-bottom:1.5em; font-weight:bold; } h3.kindle-pubu-heading-3 { font-family:"Hiragino Sans GB","Microsoft Jhenghei","微軟正黑體","Helvetica",sans-serif; font-size:1.2em; line-height:1.4em; margin-top:2.25em; margin-bottom:0.5em; padding-bottom:0.25em; border-bottom:1px dotted #ccc; } h1 { font-family:"Hiragino Sans GB","Microsoft Jhenghei","微軟正黑體","Helvetica",sans-serif; font-size:1.4em; line-height:1.4em; margin-top:1.5em; margin-bottom:2em; text-align:center; } h2 { font-family:"Hiragino Sans GB","Microsoft Jhenghei","微軟正黑體","Helvetica",sans-serif; font-size:1.4em; line-height:1.4em; margin-top:2.5em; margin-bottom:1.5em; font-weight:bold; text-align:center; } h3 { font-family:"Hiragino Sans GB","Microsoft Jhenghei","微軟正黑體","Helvetica",sans-serif; font-size:1.2em; line-height:1.4em; margin-top:2.25em; margin-bottom:0.5em; padding-bottom:0.25em; border-bottom:1px dotted #ccc; } /** ------------------- **/ /** ------圖片樣式------ **/ /** ------------------- **/ /** 生僻字或符號,用圖片代替**/ img.kindle-pubu-inline-character{ width: 1.2em; vertical-align:middle; } /** ----------------------------------------------------------- **/ /** ----------------------[以下為進階內容]---------------------- **/ /** ----------------------------------------------------------- **/ /** ------------------- **/ /** ------目錄樣式------ **/ /** ------------------- **/ /* 設定 HTML 目錄之後,將程式碼中的兩個狀況修正: /* 1. 指定TOC.xhtml 的指定樣式表為本樣式表 /* 2. 搜尋 "sgc",模式為 "目前檔案" 情況下,全部取代為 "kindle-pubu"。 /* 目錄標題 */ .kindle-pubu-toc-title { font-size: 1.7em; font-weight: bold; margin-bottom: 0.5em; letter-spacing: 1em; text-align: center; border-bottom: 1.5px dotted #000000; } /* Level 1 TOC 一級標題 */ .kindle-pubu-toc-level-1 { margin-left: 0em; } /* Level 2 TOC 二級標題*/ .kindle-pubu-toc-level-2 { margin-left: 1em; } /* Level 3 TOC 三級標題*/ .kindle-pubu-toc-level-3 { margin-left: 2em; } /* Level 4 TOC 四級標題*/ .kindle-pubu-toc-level-4 { margin-left: 2em; } /* Level 5 TOC 五級標題*/ .kindle-pubu-toc-level-5 { margin-left: 2em; } /* Level 6 TOC 六級標題*/ .kindle-pubu-toc-level-6 { margin-left: 2em; } /** ------------------- **/ /** ------列表樣式------ **/ /** ------------------- **/ /** 更多樣式可參考:http://www.w3schools.com/cssref/pr_list-style-type.asp /* margin:上邊界 右邊界 下邊界 左邊界; margin:上下邊界 左右邊界; 請記住這個順序,上右下左,任何瀏覽器都是這樣判斷的,下面我們舉幾個例子來看看簡寫與全寫比較。 */ /** 無序列表樣式 **/ /** 圓點標籤 **/ ul { margin: 1em 1em 1em 0em; font-size: 0.9em; text-align: justify; line-height: 1.2em; } /** 實心圓環標籤 L1 **/ ul.disc { margin: 1em 0em 1em 0em; list-style-type: disc; } /** 圓環標籤 L2 **/ ul.circle { margin: 1em 0em 1em 1.5em; list-style-type: circle; } /** 方形標籤 L3 **/ ul.square { margin: 1em 0em 1em 3em; list-style-type: square; } /** 有序列表樣式 **/ /** 十進位列表順序為 1. 2. 3. **/ ol { margin: 0em 2em 1em 2em; font-size: 0.9em; text-align: justify; line-height: 1.4em; } ol.kindle-pubu-ol-decimal { list-style-type: decimal; } /** 帶零十進位列表順序為 01. 02. 03. **/ ol.kindle-pubu-ol-0decimal { list-style-type: decimal-leading-zero; /**若為了排版好看,可以啟用下面的縮排效果**/ /**margin: 0em 2em 0em 2em;**//**關閉縮排**/ } /** 中文數字進位順序為 一、二、三 **/ ol.kindle-pubu-ol-zhdecimal { list-style-type: cjk-ideographic; /**若為了排版好看,可以啟用下面的縮排效果**/ /**margin: 0em 2em 0em 2em;**//**開啟縮排**/ } /** 小寫羅馬數字列表順序為 i. ii. iii. **/ ol.kindle-pubu-ol-lroman { list-style-type: lower-roman; } /** 大寫羅馬數字列表順序為 I. II. III. **/ ol.kindle-pubu-ol-uroman { list-style-type: upper-roman; } /** 大寫英文字母順序為 A. B. C. **/ ol.kindle-pubu-ol-ualpha { list-style-type: upper-alpha; } /** 小寫英文字母順序為 a. b. c. **/ ol.kindle-pubu-ol-lalpha { list-style-type: lower-alpha; } /** ------------------- **/ /** ------圖說樣式------ **/ /** ------------------- **/ /** -- 居中樣式 -- **/ /** Div 樣式 **/ div.kindle-pubu-bodycontent-div-alone100 { width: 100%; text-align: center; } /** 圖片80%大小,帶圖說**/ img.kindle-pubu-bodycontent-image-alone80-withnote { width: 80%; margin-bottom: 0em; } /** 圖片80%大小,不帶圖說 **/ img.kindle-pubu-bodycontent-image-alone80 { width: 80%; margin-bottom: -0.5em; } /** 圖片80%大小,圖說在圖上方,通常用在表格 **/ img.kindle-pubu-bodycontent-image-alone80-1 { width: 80%; margin-top: -0.3em; } /** 圖說文字少,居中對齊 **/ p.kindle-pubu-picture-txt-withfewcharactors { font-size: 0.85em; font-family: STKai, "MKai PRC", "標楷體", Kai; text-align: center; margin-top: -0.3em; text-indent: 0; } /** 圖說文字多,左對齊 **/ p.kindle-pubu-picture-txt-withmanycharactors { font-size: 0.85em; font-family: STKai, "MKai PRC","標楷體", Kai; text-align: left; margin-top: -0.3em; text-indent: 0; } /** ----------------------------- **/ /** 右繞排圖樣式(圖片在右側) ------**/ /** ----------------------------- **/ /** div樣式 **/ div.kindle-pubu-bodycontent-div-right { width: 30%; /**調整圖片寬度占比**/ margin-left: 1em; float: right; font-size: 1em; } /** 圖片樣式1(不帶圖說) **/ img.kindle-pubu-bodycontent-divright-image-withoutnote { width: 100%; margin-bottom:-0.5em } /** 圖片樣式2(帶圖說) **/ img.kindle-pubu-bodycontent-divright-image-withnote { width: 100%; margin-bottom:0em } /** 圖說樣式(左對齊,左側邊與圖片邊緣對齊) **/ p.kindle-pubu-picture-txt-right { font-size: 0.75em; font-family: STKai, "MKai PRC", "標楷體",Kai, "DFPMingLight-B5"; text-align: left; text-indent: 0em; margin-top: -0.5em; } /** ----------------------------- **/ /** ----------------------------- **/ /** 左繞排圖(圖片在左側) -----------**/ /** ----------------------------- **/ /** div樣式 **/ div.kindle-pubu-bodycontent-div-left { width: 30%;/**調整圖片寬度占比**/ margin-right: 1em; float: left; font-size: 1em; } /** 圖片樣式1(不帶圖說) **/ img.kindle-pubu-bodycontent-divleft-image-withoutnote { width: 100%; margin-bottom:-0.5em } /** 圖片樣式2(帶圖說) **/ img.kindle-pubu-bodycontent-divleft-image-withnote { width: 100%; margin-bottom:0em } /** 圖說樣式(左對齊,左側邊與圖片邊緣對齊) **/ p.kindle-pubu-picture-txt-left { font-size: 0.85em; font-family: STKai, "MKai PRC", "標楷體", kai, "DFPMingLight-B5"; text-align: left; margin-top: -0.5em; text-indent: 0; } /** ----------------------------- **/ /** ----------------------------- **/ /** 並列圖片 **/ /** ----------------------------- **/ /** 無圖註 **/ table.kindle-pubu-picture-parallel-1 { margin: 1em auto 1em auto; text-align: center; } td.kindle-pubu-picture-parallel-2 { vertical-align: bottom; text-align: center; width: 40%; } img.kindle-pubu-picture-parallel-3 { text-align:center; width:90%; } /** ----四圖一頁無圖註---- **/ table.kindle-pubu-picture-four-1 { margin:auto; } td.kindle-pubu-picture-four-2 { width:40%; vertical-align:bottom } img.kindle-pubu-tourism-four_images-3 { width:100%; } /** ----------------------------- **/ /** ----------------------------- **/ /** 並列圖片 **/ /** ----------------------------- **/ /** 無圖註 **/ table.kindle-pubu-picture-parallel-1 { margin: 1em auto 1em auto; text-align: center; } td.kindle-pubu-picture-parallel-2 { vertical-align: bottom; text-align: center; width: 40%; } img.kindle-pubu-picture-parallel-3 { text-align:center; width:90%; } /** ----------------------------- **/ /** 並列圖文橫排 **/ /** ----------------------------- **/ table.kindle-pubu-tourism-double_image_with_notes-1 { margin: 1em auto 1em auto; text-align: center; } td.kindle-pubu-tourism-double_image_with_notes-2 { vertical-align: bottom; width: 40%; } td.kindle-pubu-tourism-double_image_with_notes-3 { vertical-align:top; text-align:justify; font-size:0.75em; padding : 0.8em; font-family: STKai, "MKai PRC", "標楷體",Kai, "DFPMingLight-B5"; } img.kindle-pubu-tourism-double_image_with_notes-4 { width: 95%; }/** ----------------------------- **/ /** ----------------------------- **/ /** 三圖文並列橫排 **/ /** ----------------------------- **/ table.kindle-pubu-tourism-triple_image_with_notes-1 { margin: 1em auto 1em auto; text-align: center; } td.kindle-pubu-tourism-triple_image_with_notes-2 { vertical-align: bottom; width: 30%; } td.kindle-pubu-tourism-triple_image_with_notes-3 { vertical-align:top; text-align:justify; font-size:0.85em; padding: 0em 1em 0em 1em; font-family: STKai, "MKai PRC", "標楷體",Kai, "DFPMingLight-B5"; } img.kindle-pubu-tourism-triple_image_with_notes-4 { width: 95%; } /** ----------------------------- **/ /** ----------------------------------------------- **/ /** ------------------- **/ /** ------表格樣式------ **/ /** ------------------- **/ /** ----------------------------- **/ /** 橫向表頭 **/ /** ----------------------------- **/ table.kindle-pubu-table-body { margin: 1em auto 1em auto; border-style: solid solid none none; width: 100%; border-width: 1px; font-size:0.85em; } td.kindle-pubu-table-th{ vertical-align: middle; padding: 0.5em 0.5em 0.5em 0.5em; border-style: none none solid solid; border-width: 1px; font-weight: bold; text-align:center; } td.kindle-pubu-table-dg1 { vertical-align: middle; padding: 0.5em 0.5em 0.5em 0.5em; border-style: solid solid solid solid; border-width: 1px; text-align:center; } /** ----------------------------- **/ /** ----------------------------- **/ /** 縱向表頭 **/ /** ----------------------------- **/ table.kindle-pubu-table-body { margin: 1em auto 1em auto; border-style: solid solid none none; width: 100%; border-width: 1px; font-size:0.85em; } /** 普通單元格1 **/ td.kindle-pubu-table-dg1 { vertical-align: middle; padding: 0.5em 0.5em 0.5em 0.5em; border-style: none none solid solid; border-width: 1px; text-align:center; } /** 普通單元格2 **/ td.kindle-pubu-table-dg2 { vertical-align: middle; padding: 0.5em 0.5em 0.5em 0.5em; border-style: none none solid solid; border-width: 1px; text-align: left; } /** ----------------------------- **/ /** ----------------------------- **/ /** 帶底色無邊框表格 **/ /** ----------------------------- **/ table.kindle-pubu-bodyt { margin: 1em 0em 0.5em 0em; border-style: solid none solid none; border-width: 2px; border-color: #000000; font-size:0.85em; } td.kindle-pubu-table-rt { vertical-align: middle; padding: 0.5em 0.5em 0.5em 0.5em; background-color: #c7c7c7; text-align: center; font-weight: bold; } /** 普通單元格 **/ td.kindle-pubu-table-rn { vertical-align: top; padding: 0.5em 0.5em 0.5em 0.5em; background-color: #DCDCDC; text-align:left; } /** ----------------------------- **/ /** ----------------------------- **/ /** 內部無邊框表格 **/ /** ----------------------------- **/ table.kindle-pubu-table-bodyt-1 { margin: 1em 0em 1em 0em; border-style: solid none solid none; border-width: 2px; font-size:0.85em; } td.kindle-pubu-table-rt1 { vertical-align: middle; border-style: none none solid none; padding: 0.5em 0.5em 0.5em 0.5em; border-width: 1px; text-align: center; font-weight: bold; } /** 普通單元格 **/ td.kindle-pubu-table-rn1 { vertical-align: top; padding: 0.5em 0.5em 0.5em 0.5em; text-align:left; } /** ----------------------------- **/ /** ------------------- **/ /** ------邊框樣式------ **/ /** ------------------- **/ /** ----------------------------- **/ /** 陰影邊框樣式 **/ /** ----------------------------- **/ div.kindle-pubu-frame-shadow{ border: 1px solid #146eb4; box-shadow: 5px 5px 5px #c7c7c7; width: 95%; padding: 0.3em; margin-left: 2%; margin-right: 3%; } /** 邊框內文字無縮進 **/ p.kindle-pubu-noindent{ text-indent:0 } /** ----------------------------- **/ /** 提示框 **/ /** ----------------------------- **/ div.kindle-pubu-tip-box { padding:1em 1em 1em 1em; margin: 1em 0 1em 0em; background-color: #DCDCDC; font-family: STKai, "MKai PRC", "標楷體",Kai, "DFPMingLight-B5"; line-height:1.5em; } /** ----------------------------- **/ /** 直角框 **/ /** ----------------------------- **/ div.kindle-pubu-frame-zhijiao { font-size: 1em; padding: 0.5em; margin: 1.5em 0em 1.5em 0em; border-style: solid solid solid solid; border-width: 1px; } /** ----------------------------- **/ /** 圓角框 **/ /** ----------------------------- **/ div.kindle-pubu-frame-yuanjiao{ font-size: 1em; padding: 0.5em; margin: 1.5em 0em 1.5em 0em; border-style: solid solid solid solid; border-width: 1px; border-radius: 0.5em; } /** ----------------------------- **/ /** (進階)帶底色知識點文本框 **/ /** ----------------------------- **/ div.kindle-pubu-frame-zhishidian1 { font-size: 1em; padding: 0.5em; margin: 1.5em 0em 1.5em 0em; background-color: #DCDCDC; border-bottom: solid 1px #666666; } /** 底紋知識點標題 **/ p.kindle-pubu-frame-zsdtext1 { padding: 0.3em 0em 0.25em 0.3em; margin-top: -0.5em; margin-left: -0.5em; font-weight: bold; margin-right: -0.5em; text-align: center; color: #000000; border-bottom: solid 1px #666666; background-color: #c7c7c7; text-indent:0em; } /** ----------------------------- **/ /** 知識點文本框標題 **/ /** ----------------------------- **/ p.kindle-pubu-frame-zsdtext2 { padding-bottom: 0.2em; font-size: 1em; font-weight: bold; text-indent: 1em; border-bottom: solid 1px #666666; } /** ----------------------------- **/ /** 知識點文本框內文 **/ /** ----------------------------- **/ p.kindle-pubu-frame-zsdtext2-neiwen { font-size: 1em; text-indent: 0em; margin-left: 1em; } /** ----------------------------- **/ /** ------------------- **/ /** ------詩歌樣式------ **/ /** ------------------- **/ /** 靠左、換行不縮排 **/ p.kindle-pubu-poem-left { margin-left: 2em; font-family:STKai, "MKai PRC", "標楷體", Kai, "DFPMingLight-B5"; text-indent: 0em; } /** 置中 **/ p.kindle-pubu-poem-center { font-family:STKai, "MKai PRC", "標楷體", Kai, "DFPMingLight-B5"; text-align: center; text-indent:0em; } /** ------------------- **/ /** ------花樣樣式------ **/ /** ------------------- **/ /** 攝影書常用的步驟,白字 **/ span.kindle-pubu-photography-step-white { background-color: #FF9900; font-family: "verdana"; font-style: "italic" ; font-weight: bold; color: white; padding: 0.3em; box-shadow: 0px 3px 3px #666666; } /** 攝影書常用的步驟,黑字 **/ span.kindle-pubu-photography-step-black { background-color: #FF9900; font-family: "verdana"; font-style: "italic" ; font-weight: bold; color: black; padding: 0.3em; box-shadow: 0px 3px 3px #666666; border-bottom: 2px solid #666666; margin-bottom: -0.5em; width: 100%; } /** 問答QA樣式 **/ span.kindle-pubu-qa { font-weight: bold; color: #EE1475; font-family: "MYing Hei S", Hei; } /** 旅行類靠左的資料文本框 **/ div.kindle-pubu-tourism-lnfo-tags-1 { background-color:#c7c7c7; float: left; border-radius: 1em; margin:0em 2em 1em 0em; padding: 1em; border-width: 0.1em; border-style: solid; box-shadow:0em 0em 2em #c7c7c7; font-weight:500; font-size:0.85em; border-color:black; } p.kindle-pubu-tourism-lnfo-tags-2 { border-radius: 1em; color:white; line-height:1.5em; background-color:#146eb4; text-indent: 1em; } /** ----------------- **/ /* add by Michael for table & image */ table { margin-bottom: 2em; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; border-spacing: 0; border-collapse: collapse; width: 100%; } table th { padding: .2em 1em; background-color: #eee; border-top: 1px solid #ddd; border-left: 1px solid #ddd; } table td { padding: .2em 1em; border-top: 1px solid #ddd; border-left: 1px solid #ddd; vertical-align: top; text-align: left; } image { width: 100%; height: auto; text-align: center; } /** -- End --- **/ /** -- 更多樣式,可參考 W3 school --*/ /** -- "http://www.w3schools.com/" --*/