使用常見的內容樣式 work-with-common-styles

樣式表包含PDF輸出中所用元素的樣式定義。 您可以選擇使用範例樣式表或建立新樣式表。 在大多數情況下,建立OOTB範例樣式表的復本將幫助您快速入門。

樣式編輯器是WYSIWYG編輯器,可隱藏使用者介面後面所有CSS程式碼的複雜性。 使用樣式編輯器,您可以輕鬆且快速地自訂所選元素的樣式。 這些樣式會分類在下列標題下:

  • 標題樣式
  • 段落樣式
  • 字元樣式
  • 超連結樣式
  • 影像樣式
  • 清單樣式
  • 表格樣式
  • Div樣式
  • 頁面樣式
  • 其他樣式

使用結構化DITA內容時,大部分DITA元素的樣式對應都位於預設樣式表中。 如果您使用標準DITA元素,則可直接在樣式定義中進行變更來變更其外觀與風格。 這些樣式定義可在「其他樣式」類別下使用。 如需詳細資訊,請參閱 使用其他樣式 稍後將在此主題中介紹。

以下各節以範例的形式說明最常用的樣式設定。

NOTE
在下列範例中,假設您使用產品隨附的範例樣式表。

使用標題樣式 heading-styles

標題樣式會封裝內容中所使用標題的所有基本樣式。 OOTB會提供6種基本標題樣式,以及主題/章節和附錄標題的標題樣式。 在結構化檔案中,H1代表主題或章節的標題,而H2到H6則用於主題/章節內的子主題或章節。 每當找到對應的標題時,就會自動將此標題階層套用至您的內容。

NOTE
您可以建立自己的自訂標題樣式,這些樣式可以使用outputclass在內容中使用。 如需詳細資訊,請參閱中的步驟4 使用頁面方向與檢視旋轉 範例。

建立自訂章節層級標題 create-chapter-level-heading

在書本(或書籤)中,您可以使用「章節」。 基本標題樣式的設計方式讓您可在沒有任何自訂的情況下,將其套用至章節層級的標題。 不過,如果您想要為內容建立專門的標題,則必須建立這些標題。 例如,預設值 h1.chapter 標題會套用到章節的標題上。 如果您希望章節標題以不同樣式顯示,則需要自訂 h1.chapter 樣式。 同樣地,您可以為章節中的子標題建立自訂樣式。 例如,如果要為全部2個專案建立自訂樣式第二 和3第三 章節中的層級標題,則需要建立新的樣式 h2.chatperh3.chatper.

由於「原生PDF發佈」功能包含最常見樣式的基本樣式定義,因此即使不小心刪除了樣式,預設樣式也會套用至內容。 例如,如果您的樣式表中沒有h2樣式的樣式定義,則「原生PDF發佈」功能會對h2內容套用一些基本樣式。

在此範例中,我們將建立第2層章節標題樣式:

  1. 開啟所需的樣式表以進行編輯。

    note note
    NOTE
    另請參閱 自訂預先定義的樣式或新樣式 用於開啟樣式表以進行自訂或編輯的區段。
  2. 樣式 清單,展開 標題樣式.

  3. 按一下右鍵 標題樣式 樣式和選擇 新樣式.

  4. 新增樣式 對話方塊,保留 標籤 名稱是 h2 並輸入 chapter類別 名稱欄位。

  5. 按一下​ 「完成」

名為的新標題樣式 h2.chapter 會建立並新增至「標題樣式」清單下。

建立樣式之後,您可以使用樣式編輯器自訂樣式的必要屬性。

建立自動編號標題 auto-number-heading

最常用的輸出樣式之一是自動編號標題。 這些標題代表章節編號、主題和子主題編號。 自動編號標題與將主題內的專案清單指派為自動編號的清單樣式不同。

在此範例中,我們將自訂第1層到第3層的標題,以使用不同格式的自動編號。

  1. 開啟所需的樣式表以進行編輯。

    note note
    NOTE
    另請參閱 自訂預先定義的樣式或新樣式 用於開啟樣式表以進行自訂或編輯的區段。
  2. 樣式 清單,展開 標題樣式.

  3. 選取 h1 樣式。
    h1樣式的屬性會連同其「預覽」一起顯示在「屬性」面板中。

    note note
    NOTE
    「預覽」面板可讓您即時檢視套用至任何元素的任何樣式更新。
  4. 選取 自動編號 屬性。

    您可以在自動編號清單上套用的樣式會顯示在Autonumber屬性下方。

  5. 設定下列屬性:

    • 樣式:從廣泛的地區設定特定或一般編號樣式中選取。 您可以選擇Arabic-Indic、Devanagari、Georgian、Decimal、Lower-Alpha等樣式。 對於目前的範例,選取 upper-alpha.

    • 格式:預設格式設為 <x>,其中 x 值會取代為您在Style屬性中選取的編號Style。 例如,如果您已選取 decimal (1) style,然後為 x 針對的每個例項自動遞增 h1 樣式並設為2、3等。 您也可以在欄位中新增自訂文字,以設定標題樣式的格式。 例如,如果您希望所有h1標題的首碼為 Chapter,則您需要將此欄位設為 Chapter <x>.

    • 插入字元:如果您想要在格式中新增任何特殊字元,請按一下插入字元( {width="25"})圖示。 選取想要新增到樣式格式的字元,然後按一下「插入」。 您可以從「選取類別」下拉式清單中選擇不同型別的特殊字元。 在範例中,從「標點符號」類別中選取「右指雙角引號」。

      {width="400"}

    • 開始編號:如果您希望編號從特定數字開始,則提供該值。 例如,保留預設值1。

    • 縮排:如果要縮排標題,則必須設定「縮排」值。 例如我們的範例,將其設為0畫素。

      note note
      NOTE
      您可以以px (畫素)、pt (點)、rem、em、% (百分比)或in (英吋)單位輸入值。
    • 字首寬度:這是自動編號格式所佔用的區域。 它會自動設定為可以輕鬆容納所選樣式格式的大小。 如果您想要增加大小,則可以取代預設值。

      手動設定此值時,請嘗試變更其他會影響寬度的屬性。 例如,變更字型大小、具有字首(Chapter)或字尾(:)的格式,在 開始編號 和各種字型屬性,以獲得最佳大小。

      例如,保留預設值。

    • 間距:指定水平和垂直間距。 例如,保留預設值。

      透過上述自訂,樣式可自訂,如下所示:

      {width="500"}

    • 套用格式至:自動編號類別下的屬性可協助您定義編號樣式。 若要將進一步自訂套用到編號樣式或標題格式的內容,您可以在此欄位中選擇「編號」或「段落」。 如果您選擇「編號」,則對「字型」、「邊框」、「版面」和其他類別所做的任何變更將僅套用至標題中的編號樣式。 但是,如果您選擇「段落」,則變更將套用至標題內容而非編號樣式。

    使用下列設定產生如下列熒幕擷圖所示的輸出:

    table 0-row-4 1-row-4 2-row-4 3-row-4 4-row-4 5-row-4 6-row-4 7-row-4 8-row-4 9-row-4 10-row-4 11-row-4 12-row-4 13-row-4 14-row-4 1-align-left 2-align-left 3-align-left 4-align-left 6-align-left 7-align-left 8-align-left 9-align-left 11-align-left 12-align-left 13-align-left 14-align-left 16-align-left 17-align-left 18-align-left 19-align-left 21-align-left 22-align-left 23-align-left 24-align-left 26-align-left 27-align-left 28-align-left 29-align-left 31-align-left 32-align-left 33-align-left 34-align-left 36-align-left 37-align-left 38-align-left 39-align-left 41-align-left 42-align-left 43-align-left 44-align-left 46-align-left 47-align-left 48-align-left 49-align-left 51-align-left 52-align-left 53-align-left 54-align-left 56-align-left 57-align-left 58-align-left 59-align-left 61-align-left 62-align-left 63-align-left 64-align-left 66-align-left 67-align-left 68-align-left 69-align-left 71-align-left 72-align-left 73-align-left 74-align-left
    標題樣式 屬性 其他註解
    h1 樣式 小數點 這些屬性位於「自動編號」類別下
    格式 Capter <x>:
    字首寬度 160畫素
    字型>文字對齊方式 請確定「套用格式設定至」已設定為「編號」
    h2 樣式 小數點 這些屬性位於「自動編號」類別下
    格式 Section <x>:
    字首寬度 125畫素
    字型>文字對齊方式 請確定「套用格式設定至」已設定為「編號」
    h3 樣式 小數點 這些屬性位於「自動編號」類別下
    插入層級 2
    格式 Section <2>.<x>:
    字首寬度 125畫素
    字型>文字對齊方式 請確定「套用格式設定至」已設定為「編號」

    {width="500"}

使用段落樣式 paragraph-style

可以建立段落樣式,將特殊格式套用至整個段落。 但是,使用虛擬類別時,您只能將樣式套用至文字的特定部分。 在下列範例中,我們將建立段落樣式以使用首字放大樣式。

建立首字放大樣式 drop-cap-style

在雜誌和文學檔案中會使用首字下沈樣式,其中段落或區段的第一個字元會有一些特殊樣式。 您可以使用「原生PDF發佈」功能來達到相同的效果。

在下列範例中,我們將建立首字放大樣式:

  1. 開啟所需的樣式表以進行編輯。

    note note
    NOTE
    另請參閱 自訂預先定義的樣式或新樣式 用於開啟樣式表以進行自訂或編輯的區段。
  2. 樣式 清單,展開 段落樣式.

  3. 以右鍵按一下 段落樣式 並選擇 新樣式.

  4. 新增樣式 對話方塊,保留 標籤 名稱是p,在 Pseudo 類別 欄位,選取 ::first-letter.

  5. 按一下​ 「完成」

    新的段落樣式,命名為 ::first-letter 建立並新增於 段落樣式 清單。

  6. 選取 ::first-letter ,並設定下列屬性:

    • 字型:為段落中的第一個字母設定所要的字型。 例如,將「字型系列」設定為「草稿」,將字型粗細設定為500,將字型大小設定為30 pt,並選擇字型顏色。

    • 版面:設定首字放大樣式周圍文字的垂直對齊方式。 在範例中,我們會將「垂直對齊」設定為「底部」。

作為 p 標籤與對應 <p> 元素,您不需要使用outputclass屬性明確新增此樣式。 無論內容在何處 <p> 使用元素時,首字放大樣式會自動套用在其上。 在下列熒幕擷圖中,章節標題、簡短說明和定義清單元素尚未使用首字放大樣式格式化。 只有段落樣式會以首字放大樣式格式化:

使用字元樣式 char-style

使用字元樣式,您可以建立格式化內容中字元或文字的樣式。 例如,您可以為內嵌程式碼或檔案名稱建立字元樣式,也可以針對選取的內容建立使用多種樣式格式的樣式。

建立內嵌字元樣式 inline-char-style

格式化段落中的內嵌字元或文字是非常常見的樣式。 建立內嵌樣式的程式包含兩項工作 — 首先,在樣式表中建立新樣式,然後使用將樣式套用至您的內容中 outputclass 屬性。

在下列範例中,我們將建立內嵌字元樣式:

  1. 開啟所需的樣式表以進行編輯。

    note note
    NOTE
    另請參閱 自訂預先定義的樣式或新樣式 用於開啟樣式表以進行自訂或編輯的區段。
  2. 樣式 清單,展開 字元樣式.

  3. 以右鍵按一下 字元樣式 並選擇 新樣式.

  4. 在「新增樣式」對話方塊中,保留 標籤 將名稱設為span並輸入 BoldItalic類別 名稱欄位。

    {width="400"}

  5. 按一下​ 「完成」

    名為code的新字元樣式會建立並新增至「字元樣式」清單下。

  6. 選取 span.BoldItalic字元樣式 清單,並設定下列屬性:

    • 字型:您可在此區段中自訂所有字型相關屬性。 依預設,有一些字型與產品搭配。 您可以為字元樣式選擇所需的字型。 例如,將「字型系列」設定為 襯線, 並選取 粗體斜體 在字型樣式屬性中。 您也可以自訂其他字型屬性,例如「字型粗細(如粗體、較淺)」、「文字裝飾(如底線、上線)」、「字型大小」、「字型顏色」、「文字對齊」等等。

      note note
      NOTE
      您也可以將字型新增至範本,這些字型會儲存在範本的「資源」區段中。 如需新增字型和使用資源的詳細資訊,請參閱 使用資源.
    • 版面:您可以設定版面相關屬性,例如「高度和寬度」、「邊界」、「邊框間距」、「對齊」等。

    • 背景:背景屬性可讓您設定特定樣式的背景顏色格式。 您可以定義任何樣式的背景顏色或影像。

建立內嵌字元樣式後,您必須將其套用至內容中。 若要套用內嵌程式碼樣式,請移至來源檢視並新增 outputclass 屬性在所需內容中:

outputclass="BoldItalic"

下列範例顯示在執行中文字的不同位置套用的粗斜體格式:

自訂清單樣式 custom-list-style

清單樣式包含已排序和未排序清單的預設樣式設定。 您可以輕鬆自訂這些清單樣式,以符合說明檔案需求。

在下列範例中,我們將自訂編號或排序清單樣式:

  1. 開啟所需的樣式表以進行編輯。

    note note
    NOTE
    另請參閱 自訂預先定義的樣式或新樣式 用於開啟樣式表以進行自訂或編輯的區段。
  2. 樣式 清單,展開 清單樣式.

  3. 選取 ol 樣式。

    ol樣式的屬性會連同其「預覽」一起顯示在「屬性」面板中。

    {width="500"}

  4. 選取 進階格式 選項。

    隨即顯示「確認」訊息。

  5. 按一下 確認 訊息以開啟 進階格式 屬性。

    下列屬性預設為可用:

    • 平準:依預設,編號清單分為6個層級。 您在此下拉式清單中選取的層級,可控制所選層級及所有後續層級的樣式變更。 例如,如果您選取層級4,則所有套用的樣式變更都會設定在層級4、5和6上。

    • 清單樣式型別:有許多清單編號樣式可供您選擇。 清單包含區域設定專用和一般編號樣式,用於建立編號清單。 清單樣式型別有阿拉伯文、柬埔寨文、梵文、衣索匹亞文、韓文、希伯來文、日文、韓文、簡體中文、烏爾都文等。

    此外,您也可以使用下列進階格式屬性:

    • 數字格式:預設格式設為 <x>,其中 x 值會取代為您在「清單樣式型別」屬性中選取的編號「樣式」。 例如,如果您已選取 decimal (1) style,然後為 x 會為清單元素的每個例項自動增加,並顯示為2、3等。 您也可以在欄位中新增自訂文字,以格式化清單樣式。 例如,如果您希望所有第一層清單樣式都有尾碼")",則您需要將第一級清單樣式的此欄位設為"<x>)「。

    • 插入字元:如果您想要在數字格式中新增任何特殊字元,請按一下插入字元( {width="25"})圖示。 選取想要新增到樣式格式的字元,然後按一下「插入」。 您可以從「選取類別」下拉式清單中選擇不同型別的特殊字元。

    • 插入層級:您可以在數字格式中加入任何先前層級的數字。 例如,如果您想要在第6層數字格式中包含第5層數字格式,請在「插入層級」下拉式清單中選擇5。 請注意,「插入層次」下拉式清單只會顯示前面的層次數目,而不會顯示後面的層次數目。 例如,當您位於第3層時,「插入層級」清單只會顯示第1層和第2層。

      {width="400"}

      您也可以變更「數字格式」,以視需要顯示清單值。 例如,當您使用層級3的巢狀編號樣式時,可以將其格式化為"<2>.<x>))「。 這會顯示清單編號2,後面接著句號,再後面接著清單編號3,然後是兩個方括弧,如下所示 2.3)).

    • 縮排:如果您想要縮排清單,則需要設定「縮排」值。 縮排中的任何變更都可以在「預覽」面板中檢閱並調整。

      note note
      NOTE
      您可以以px (畫素)、pt (點)、rem、em、% (百分比)或in (英吋)單位輸入值。
    • 字首寬度:這是數字格式所佔用的區域。 會自動設定為可以輕鬆容納所選格式的大小。 如果您想要增加大小,則可以取代預設值。

      手動設定此值時,請嘗試變更其他會影響寬度的屬性。 例如,變更字型大小、具有字首或字尾的格式,以及各種字型屬性,以獲得最佳大小。

    • 間距:指定清單編號格式與內容之間的水準間距。 垂直間距可控制兩個清單專案之間的間隙。

      下列熒幕擷圖顯示每個層級的自訂排序清單:

      {width="500"}

使用表格樣式 table-styles

您可以使用樣式表來設計 n 表格樣式的數量。 您可以使用表格樣式來設計整個表格(特定列或欄)的方式。 使用儲存格層級樣式的控制項,您可以建立非常易於呈現的表格樣式。

在下列範例中,我們瞭解如何建立表格樣式,以及您可以自訂的各種表格樣式選項:

  1. 開啟所需的樣式表以進行編輯。

    note note
    NOTE
    另請參閱 自訂預先定義的樣式或新樣式 用於開啟樣式表以進行自訂或編輯的區段。
  2. 樣式 清單,以滑鼠右鍵按一下 表格樣式 並選擇 新樣式.

  3. 新增樣式 對話方塊,保留 標籤 名稱是 table 並輸入 double-border類別 名稱欄位。

  4. 按一下​ 「完成」

    名為的新表格樣式 table.double-border 會在「表格樣式」清單下建立並新增。

  5. 選取 table.double-border表格樣式 清單,並設定下列屬性:

    • 套用格式至:您可以選取將樣式格式設定套用至整個表格、奇數/偶數列或欄,或第一個/最後一個列或欄。

      note note
      NOTE
      下列設定可在 一般 區段時間 套用格式至 設為 整個表格.
    • 文繞排:選取如何在表格周圍繞排文字。 當表格位於另一個區塊層級元素內,且表格必須隨區塊元素中的其他內容一起呈現時,此選項會很有用。 包裝選項為 左側 已對齊,或 .

    • 邊框摺疊:選取表格邊框的外觀。 如果您選取「摺疊」,則只會在表格儲存格之間繪製單一框線。 不過,若為個別樣式,則每個具有額外邊框間距的儲存格周圍都會顯示邊框。

      {width="500"}

    • 邊框間距:此設定僅在「邊框摺疊」設定為「分隔」時可用。 使用此設定,您可以指定儲存格邊界之間的垂直和水平間距。

      {width="500"}

      note note
      NOTE
      下列設定可在 儲存格 區段時間 套用格式至 設為 整個表格.
    • 內距:指定表格儲存格之間的邊框間距。 您可以為上、下、左和右指定不同的邊框間距值。

    • 垂直對齊:指定儲存格內容的垂直對齊方式。 可用的選項包括:「頂端」、「中間」和「底部」。

    • 邊框側、樣式、顏色、寬度、半徑: 指定邊框相關屬性。 您可以選擇只在特定側邊上有框線,例如左邊或右邊。 「邊框樣式」會列出可用的邊框樣式,例如「實線」、「虛線」、「雙線」等等。 使用調色盤指定邊框顏色。 您可以指定邊框寬度(畫素、pt、rem、em、%和單位)。 「半徑」定義曲線以產生圓角。

    本主題的其他範例說明了「字型」、「邊框」、「版面」、「分頁」和「背景」下的其他屬性。 根據您在 套用格式至 屬性,您可以將這些值套用至整個表格或選取的列或欄。

    以不同方式格式化的不同列之範例表格的預覽如下所示:

    {width="500"}

使用其他樣式 other-styles

如果您使用結構化(DITA)內容,您會注意到幾乎所有的DITA元素在預設樣式表中都有樣式對應。 例如, <shortdesc> 元素的樣式定義於 其他樣式 > .shortdesc 樣式定義。 您可以輕鬆自訂任何這些樣式,系統就會自動套用至結構化內容產生的PDF輸出中。 這表示與其他自訂樣式不同,您不需要新增 outputclass 這些樣式內容的屬性。

如果您想要為預設無法使用的任何元素建立樣式定義,或您有自訂元素,則可以在樣式表中輕鬆建立它。 您必須考慮的唯一一點就是建立與結構化元素名稱同名的樣式。

在下列範例中,我們將建立新視窗的標題(wintitle)樣式:

  1. 開啟所需的樣式表以進行編輯。

    note note
    NOTE
    另請參閱 自訂預先定義的樣式或新樣式 用於開啟樣式表以進行自訂或編輯的區段。
  2. 樣式 清單,展開 其他樣式.

  3. 以右鍵按一下 其他樣式 並選擇 新樣式.

  4. 新增樣式 對話方塊,保留 標籤 名稱是 空白 並輸入 wintitle類別 名稱欄位。

    作為 wintitle 是可辨識的DITA元素名稱,其樣式定義會自動對應至 <wintitle> 個元素。

  5. 按一下​ 「完成」

    名為的新樣式 .wintitle 建立並新增於 其他樣式 清單。

  6. 選取.wintitle,從 其他樣式 清單,並視需要設定屬性。

下列熒幕擷圖顯示套用至「主要控制項」文字的wintitle樣式。

為單頁版面配置定義唯一樣式

發佈原生PDF輸出時,所有樣式都會合併到最終PDF中,為CSS中的每個範本指派唯一樣式至關重要。
使用不同的CSS樣式名稱,將特定字型和樣式套用至PDF的不同區段。 例如,您可以使用下列CSS定義封面頁的所需字型。

...
[data-page-layout="Front"] * {
    font-size: 18pt;
}
...

檔案的其餘部分將使用您為Body標籤指定的預設字型 content.csslayout.css. 這樣可確保不會合併樣式,且每個區段都保留其預期設計。 如果您想要不同的字型大小,請為其建立特定的樣式。

例如,您可以定義下列樣式來定義封面首頁段落的字型大小18和封面首頁的字型大小11 pt:

[data-page-layout="Front"] p { //For all paragraphs inside Front page
  font-size: 18pt;
}

[data-page-layout="Back"] p { //For all paragraphs inside Back page
  font-size: 11pt;
}
NOTE
在上一個範例中,「前面」和「後面」是配置圖檔案的範例名稱,您可以在範本中使用。

定義字首與字尾內容的自訂CSS樣式

如果您定義自訂CSS樣式,則在產生原生PDF輸出時,會優先提供給它們。
下列預設CSS樣式會隱藏字首與字尾內容。

...
.prefix-content, .suffix-content{
    display: none;
}
...

若要允許在 <note> 元素,將下列CSS加入您的 content.css

...
.prefix-content{
    display: inline !important;
}
...

<note> 元素會產生一個額外的 <span> 具有與其型別屬性對應的類別前置詞content。 此CSS規則的目標為 .prefix-content 類別範圍 <note> 元素具有type屬性,可讓您視需要樣式化或操作前置詞內容。

recommendation-more-help
11125c99-e1a1-4369-b5d7-fb3098b9b178