為了讓編輯器外掛程式的外觀及風格更像 Google 試算表、文件、簡報或表單,請連結至下列 CSS 套件中的連結,將 Google 樣式套用至字型、按鈕和表單元素。如需 CSS 套件的使用範例,請參閱文件外掛程式快速入門導覽課程。如要使用 CSS 套件,只要在每個 HTML 檔案的頂端加入以下內容:
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
請注意,您無法在所有瀏覽器中完全控製表單元素的樣式。具體來說,<select>
元素會在 Firefox 和 Internet Explorer 中顯示部分視覺構件,但仍可正常運作。如要查看特定瀏覽器中的樣式,只需在該瀏覽器中載入這個頁面即可。
字體排版
針對所有文字,請採用以下各種樣式的_則:
使用與外觀 |
使用 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> |