หากต้องการให้ส่วนเสริมของเอดิเตอร์มีรูปลักษณ์เหมือน 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> |