แพ็กเกจ CSS สําหรับส่วนเสริมของเครื่องมือแก้ไข

หากต้องการให้ส่วนเสริมสำหรับเครื่องมือแก้ไขมีลักษณะเหมือนกับ Google ชีต, เอกสาร, สไลด์ หรือฟอร์ม ให้ลิงก์แพ็กเกจ CSS ด้านล่างเพื่อใช้การจัดรูปแบบของ Google กับแบบอักษร ปุ่ม และองค์ประกอบของแบบฟอร์ม ดูตัวอย่างแพ็กเกจ CSS ที่ใช้ได้ที่คู่มือเริ่มต้นใช้งานส่วนเสริมของเอกสาร หากต้องการใช้แพ็กเกจ 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>