Gói CSS cho các tiện ích bổ sung của Trình chỉnh sửa

Để giúp tiện ích bổ sung cho Trình chỉnh sửa trông giống như Google Trang tính, Tài liệu, Trang trình bày hoặc Biểu mẫu, hãy liên kết gói CSS bên dưới để áp dụng kiểu của Google cho phông chữ, nút và phần tử biểu mẫu. Để biết mẫu gói CSS đang được sử dụng, hãy xem phần Bắt đầu nhanh về tiện ích bổ sung Tài liệu. Để sử dụng gói CSS, bạn chỉ cần thêm nội dung sau vào đầu mỗi tệp HTML:

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

Xin lưu ý rằng bạn không thể kiểm soát hoàn toàn kiểu cho các phần tử biểu mẫu trong tất cả trình duyệt. Cụ thể, các phần tử <select> hiển thị một số cấu phần phần mềm hình ảnh trong Firefox và Internet Explorer, mặc dù các phần tử này vẫn hoạt động đúng cách. Để xem các kiểu trông như thế nào trong một trình duyệt nhất định, bạn chỉ cần tải trang này trong trình duyệt đó.

Kiểu chữ

Sử dụng phông chữ Arial cho tất cả văn bản, theo các kiểu sau tuỳ thuộc vào mục đích sử dụng:

Cách sử dụng và hình thức Đánh dấu bằng gói 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>

Nút

Bạn có thể sử dụng bất kỳ loại nút tiêu chuẩn nào – <button>, <input type="button"> hoặc <input type="submit">, cũng như <a class="button">. Các nút nằm cạnh nhau theo chiều ngang sẽ tự động căn chỉnh. Có một số màu để sử dụng cho nhiều mục đích:

Sử dụng Diện mạo Đánh dấu bằng gói CSS
Hành động chính 
<button class="action">Translate</button>
(Các) hành động phụ 
<button>Close</button>
Tạo thao tác 
<button class="create">Create</button>
Thao tác chia sẻ 
<button class="share">Share</button>

Hộp kiểm

Ví dụ: Đánh dấu bằng gói 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>

Nút chọn

Ví dụ: Đánh dấu bằng gói 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>

Chọn trình đơn

Ví dụ: Đánh dấu bằng gói 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>

Vùng văn bản

Ví dụ: Đánh dấu bằng gói CSS 
<div class="form-group">
  <label for="sampleTextArea">Label</label>
  <textarea id="sampleTextArea" rows="3"></textarea>
</div>

Trường văn bản

Ví dụ: Đánh dấu bằng gói 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>

Bạn có thể gặp khó khăn khi tạo kiểu cho thanh bên vì mặc dù chiều cao có thể thay đổi, nhưng nhiều tiện ích bổ sung cần bao gồm một khu vực thương hiệu không cuộn được. Dưới đây là bản sao đơn giản của thanh bên trong phần Bắt đầu nhanh với tiện ích bổ sung của Google Tài liệu. Nếu bạn kéo góc dưới bên phải của vùng văn bản để nội dung cao hơn thanh bên, thì vùng nội dung sẽ tự động cuộn nhưng thương hiệu ở dưới cùng sẽ không cuộn.

Ví dụ này sử dụng lớp sidebar để áp dụng khoảng đệm chính xác và lớp bottom để buộc vùng thương hiệu xuống dưới cùng. Sau đó, một lớp cục bộ, branding-below, sẽ xác định khu vực mà khu vực chính của thanh bên phải để trống ở dưới cùng.

Ví dụ: Đánh dấu bằng gói 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>