เปลี่ยนรูปแบบโดยใช้แผง CSS

แผง CSS

แผง CSS จะแสดงกฎรูปแบบที่กำหนดไว้สำหรับองค์ประกอบใดก็ตามที่คุณเลือก ซึ่งรวมถึงกฎ keyframes สำหรับองค์ประกอบแบบเคลื่อนไหว นอกจากนี้ คุณยังแก้ไขรูปแบบสำหรับคลาสขององค์ประกอบ เพิ่มการจัดรูปแบบอินไลน์ และสร้างกฎรูปแบบใหม่โดยใช้แท็บรูปแบบของแผง CSS ได้ด้วย

หากต้องการดูรายการคุณสมบัติ CSS สำหรับองค์ประกอบ ให้เปลี่ยนไปเป็นแท็บที่คำนวณ

วิธีสร้างกฎรูปแบบใหม่ในเอกสาร

1. เลือกองค์ประกอบที่ต้องการใช้กฎรูปแบบใหม่
2. คลิกปุ่มเพิ่มกฎ ที่ด้านล่างของแผง CSS
3. Google Web Designer จะสร้างตัวเลือกคลาสที่ไม่ซ้ำขึ้นมา ซึ่งคุณแก้ไขได้ หากคุณป้อนตัวเลือกคลาส Web Designer จะเพิ่มคลาสดังกล่าวไปยังองค์ประกอบที่เลือก
4. ระหว่างวงเล็บสำหรับการประกาศของกฎใหม่ ให้คลิกเพิ่มคุณสมบัติ แล้วป้อนคุณสมบัติและค่า CSS เช่น width: 209px;
5. เพิ่มคู่คุณสมบัติ/ค่าใหม่ต่อไปจนกว่าจะกำหนดกฎเสร็จสมบูรณ์

วิธีเพิ่มรูปแบบอินไลน์ให้แก่องค์ประกอบ

1. เลือกองค์ประกอบ
2. ในแผง CSS ให้คลิกปุ่มเพิ่มคุณสมบัติในส่วนรูปแบบอินไลน์
3. เพิ่มคู่คุณสมบัติ/ค่าเพื่อแก้ไขรูปแบบขององค์ประกอบ

วิธีแก้ไขรูปแบบ

1. เลือกองค์ประกอบในเอกสาร แผง CSS จะแสดงกฎของรูปแบบที่เชื่อมโยงกับองค์ประกอบนั้น
2. คลิกคุณสมบัติหรือค่าเพื่อแก้ไข หากต้องการลบคุณสมบัติ ให้ล้างชื่อคุณสมบัติ

วิธีสลับเลือกใช้หรือไม่ใช้คุณสมบัติ

1. คลิกช่องทำเครื่องหมายข้างชื่อคุณสมบัติ หากไม่ได้เลือกช่องทำเครื่องหมายไว้ ไฟล์ที่เผยแพร่และการแสดงตัวอย่างในเบราว์เซอร์จะไม่รวมคุณสมบัตินั้นไว้ด้วย
2. หากต้องการเปิดใช้งานคุณสมบัติอีกครั้ง ให้คลิกช่องทำเครื่องหมายอีกครั้ง

กฎคีย์เฟรมสำหรับภาพเคลื่อนไหว

แผง CSS จะแสดงกฎคีย์เฟรม (ที่มีคีย์เวิร์ด @keyframes) สำหรับองค์ประกอบที่เคลื่อนไหวได้ด้วย CSS

วิธีสร้างกฎคีย์เฟรมใหม่สำหรับองค์ประกอบ

1. เลือกองค์ประกอบที่ไม่มีการเคลื่อนไหว
2. คลิกปุ่มเพิ่มกฎคีย์เฟรม ที่ด้านล่างของแผง CSS จากนั้น Google Web Designer จะเพิ่มคีย์เฟรมเริ่มต้นและสิ้นสุด (0% และ 100%) และตั้งค่าระยะเวลาการเคลื่อนไหวเป็น 1 วินาทีโดยค่าเริ่มต้น
3. ในการเพิ่มคุณสมบัติเคลื่อนไหวลงในคีย์เฟรม ให้คลิกเพิ่มคุณสมบัติและป้อนคุณสมบัติและค่า CSS
4. เพิ่มคู่คุณสมบัติ/ค่าใหม่ต่อไปจนกว่าจะกำหนดกฎเสร็จสมบูรณ์

วิธีเพิ่มคีย์เฟรม

1. เลือกองค์ประกอบที่เคลื่อนไหวได้
2. ในแผง CSS ให้คลิกแทรกคีย์เฟรมระหว่างคีย์เฟรมที่มีอยู่
3. Web Designer จะตั้งค่าคีย์เฟรมโดยอัตโนมัติให้ปรากฏขึ้นกลางทางระหว่างคีย์เฟรมที่ล้อมรอบ คลิกเปอร์เซ็นต์เพื่อเปลี่ยนกำหนดเวลาของคีย์เฟรม
4. จะมีการแทรกคุณสมบัติเคลื่อนไหวจากคีย์เฟรมที่ล้อมรอบ เพิ่ม แก้ไข หรือลบคุณสมบัติของคีย์เฟรมใหม่

คุณจะเพิ่มคีย์เฟรมหลังจากที่ภาพเคลื่อนไหวที่มีอยู่สิ้นสุดลงไม่ได้ ให้ใช้ไทม์ไลน์แทน