Show Menu
主題×

變更HTML5表格的預設樣式

HTML5表格會使用HTML5功能來轉譯,而轉譯表格的樣式則會使用CSS來完成。 HTML5表格的預設外觀類似其PDF轉譯。 開發人員可使用自訂CSS來變更HTML5表格的預設外觀。
本文提供變更HTML5表單樣式的逐步資訊,而「樣式簡介」文章 建立HTML5表格的CSS樣式 則包含HTML5表單各樣式方面的詳細資訊。 請務必先閱讀「樣式簡介」,然後再執行本文中提及的步驟。
以下兩張影像顯示預設和自訂樣式之間的差異。

設定表單樣式

  1. 選擇要新增自訂樣式的描述檔
    在URL存取CRX DE介面: https://<server>:<port>/crx/de ,並建立描述檔或選擇現有的描述檔。 要瞭解如何建立配置檔案,請參 閱建立新配置檔案
  2. 建立CSS樣式表以設定HTML5表格的樣式
    導覽至您已建立描述檔轉譯器的檔案夾,並建立CSS樣式表檔案。 要執行的步驟包括
    1. 按一下右鍵資料夾,然後從 菜單中選擇 「創 」>「建立檔案」
    2. 在建立檔案對話框中,輸入樣式表的名稱。 請確定您使用副檔名。css(例如stylesheet.css)
    3. 在導覽窗格中,開啟您所建立的CSS檔案。
    4. 定義要設定樣式的元件的CSS類別,並在這些類別中新增樣式。 若要瞭解在HTML5表單中為特定元件建立哪些CSS類別,請參 閱樣式簡介
  3. 在「描述檔轉譯器」中包含樣式表
    在CRX DE中開啟「描述檔轉譯器」頁面(jsp檔案),並將CSS檔案加入XFA用戶端程式庫正下方的頁面中。 請執行這些步驟,將CSS檔案包含在描述檔中。
    1. 在轉譯器頁面中搜尋下列行:
      <cq:includeClientLib類別="xfaforms.profile" />
    2. 在上面的行下插入以下內容,以包括樣式表:
      <link href="/path/to/stylesheet" rel="stylesheet" type="text/css"/>
    3. 儲存檔案。