Gói CSS cho Tiện ích bổ sung dành cho trình chỉnh sửa

Để giúp Tiện ích bổ sung dành cho Trình chỉnh sửa có giao diện 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 trong gói CSS bên dưới để áp dụng kiểu của Google cho phông chữ, nút và thành phần biểu mẫu. Để xem ví dụ về gói CSS đang 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 đoạn mã 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ả các trình duyệt. Cụ thể, các phần tử <select> cho thấy 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, chỉ cần tải trang này trong trình duyệt đó.

Kiểu chữ

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

Sử dụng và giao diện Đá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 trong khoảng trống liền kề theo chiều ngang sẽ tự động xuất hiện. Có một số màu sắc tuỳ theo mục đích sử dụng:

Sử dụng Giao diện Đá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 hành động 
<button class="create">Create</button>
Chia sẻ hành động 
<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 radio

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>

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

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 xây dự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 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>