適用於編輯器外掛程式的 CSS 套件

如要讓編輯器外掛程式的外觀與 Google 試算表、文件、簡報或表單一致，請連結下方的 CSS 套件，將 Google 樣式套用至字型、按鈕和表單元素。如需 CSS 套件使用中的範例，請參閱 Docs 外掛程式快速入門。如要使用 CSS 套件，只要在每個 HTML 檔案的頂端加入以下內容即可：

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">

請注意，表單元素的樣式無法在所有瀏覽器中完全控制。具體來說，<select> 元素在 Firefox 和 Internet Explorer 中會顯示一些視覺異常，但仍可正常運作。如要查看特定瀏覽器中的樣式，只要在該瀏覽器中載入這個頁面即可。

字體排版

請為所有文字使用 Arial 字型，並根據用途採用下列樣式：

使用方式和外觀 使用 CSS 套件進行標記 
<h1>Titles and headers</h1>
<b>Bold text</b>
Normal text
<a href="">Links</a>
<span class="current">Current navigation selection</span>
<span class="error">Form input errors</span>
<span class="gray">Gray text</span>
<span class="secondary">Secondary text</span>

按鈕

您可以使用任何標準類型的按鈕，包括 <button>、<input type="button">、<input type="submit"> 和 <a class="button">。水平相鄰的按鈕會自動間隔。可用的顏色有好幾種，可用於各種用途：

使用 外觀 使用 CSS 套件進行標記
主要動作 
<button class="action">Translate</button>
次要動作 
<button>Close</button>
建立動作 
<button class="create">Create</button>
分享動作 
<button class="share">Share</button>

核取方塊

範例 使用 CSS 套件進行標記 
<div>
  <input type="checkbox" id="checkbox1" checked>
  <label for="checkbox1">Checked</label>
</div>
<div>
  <input type="checkbox" id="checkbox2">
  <label for="checkbox2">Unchecked</label>
</div>
<div>
  <input type="checkbox" id="checkbox3" checked disabled>
  <label for="checkbox3">Checked, disabled</label>
</div>
<div>
  <input type="checkbox" id="checkbox4" disabled>
  <label for="checkbox4">Unchecked, disabled</label>
</div>

圓形按鈕

範例 使用 CSS 套件進行標記 
<div>
  <input type="radio" name="radio-a" id="radio1" checked>
  <label for="radio1">Checked</label>
</div>
<div>
  <input type="radio" name="radio-a" id="radio2">
  <label for="radio2">Unchecked</label>
</div>
<div>
  <input type="radio" name="radio-b" id="radio3"
      checked disabled>
  <label for="radio3">Checked, disabled</label>
</div>
<div>
  <input type="radio" name="radio-b" id="radio4" disabled>
  <label for="radio4">Unchecked, disabled</label>
</div>

選取選單

範例 使用 CSS 套件進行標記 
<div class="block form-group">
  <label for="select">Select</label>
  <select id="select">
    <option selected>Google Docs</option>
    <option>Google Forms</option>
    <option>Google Sheets</option>
  </select>
</div>
<div class="block form-group">
  <label for="disabled-select">Disabled select</label>
  <select id="disabled-select" disabled>
    <option selected>Google Docs</option>
    <option>Google Forms</option>
    <option>Google Sheets</option>
  </select>
</div>

文字區域

範例 使用 CSS 套件進行標記 
<div class="form-group">
  <label for="sampleTextArea">Label</label>
  <textarea id="sampleTextArea" rows="3"></textarea>
</div>

文字欄位

範例 使用 CSS 套件進行標記 
<div class="inline form-group">
  <label for="city">City</label>
  <input type="text" id="city" style="width: 150px;">
</div>
<div class="inline form-group">
  <label for="state">State</label>
  <input type="text" id="state" style="width: 40px;">
</div>
<div class="inline form-group">
  <label for="zip-code">Zip code</label>
  <input type="text" id="zip-code" style="width: 65px;">
</div>

側欄的樣式可能難以設定，因為雖然高度會有所變化，但許多外掛程式都需要加入不會捲動的品牌區域。以下是 Google 文件外掛程式快速入門的側欄簡易副本。如果您拖曳文字區域的右下角，讓內容比側欄更高，內容區域會自動捲動，但底部的品牌標誌不會。

這個範例會使用 sidebar 類別套用正確的邊框間距，並使用 bottom 類別將品牌區域強制置於底部。接著，本機類別 branding-below 會定義邊欄的主要區域應從底部留出多少空間。

範例 使用 CSS 套件進行標記 
<style>
.branding-below {
  bottom: 56px;
  top: 0;
}
</style>

<div class="sidebar branding-below">
  <div class="block form-group">
    <label for="translated-text">
      <b>Translation</b></label>
    <textarea id="translated-text" rows="15">
    </textarea>
  </div>

  <div class="block">
    <input type="checkbox" id="save-prefs">
    <label for="save-prefs">
      Use these languages by default</label>
  </div>

 <div class="block">
    <button class="blue">Translate</button>
    <button>Insert</button>
  </div>
</div>

<div class="sidebar bottom">
  <span class="gray">
    Translate sample by Google</span>
</div>