ดูและเปลี่ยน CSS

Kayce Basques

Sofia Emelianova

ทำตามบทแนะนำแบบอินเทอร์แอกทีฟเหล่านี้เพื่อเรียนรู้พื้นฐานเกี่ยวกับการดูและเปลี่ยน CSS ของหน้าเว็บโดยใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

ดู CSS ขององค์ประกอบ

1. คลิกขวาที่ข้อความ Inspect me! ด้านล่าง แล้วเลือกตรวจสอบ แผงองค์ประกอบของเครื่องมือสำหรับนักพัฒนาเว็บจะเปิดขึ้น

   ตรวจสอบฉัน

2. ดูองค์ประกอบ Inspect me! ที่ไฮไลต์สีน้ำเงินในแผนผัง DOM

   

3. ในต้นไม้ DOM ให้ค้นหาค่าของแอตทริบิวต์ data-message สำหรับองค์ประกอบ Inspect me!

4. ป้อนค่าของแอตทริบิวต์ในกล่องข้อความด้านล่าง

5. ในแท็บองค์ประกอบ > สไตล์ ให้ค้นหากฎคลาส aloha

   แท็บสไตล์จะแสดงกฎ CSS ที่ใช้กับองค์ประกอบที่เลือกในแผนผัง DOM ซึ่งควรจะยังเป็นองค์ประกอบ Inspect me!

6. คลาส aloha ประกาศค่าสำหรับ padding ป้อนค่านี้และหน่วยโดยไม่เว้นวรรคในกล่องข้อความด้านล่าง

หากต้องการยึดหน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บไว้ทางด้านขวาของวิวพอร์ต เช่น ในภาพหน้าจอของขั้นตอนที่ 1 โปรดดูเปลี่ยนตำแหน่งเครื่องมือสำหรับนักพัฒนาเว็บ

เพิ่มประกาศ CSS ลงในองค์ประกอบ

ใช้แท็บรูปแบบเมื่อคุณต้องการเปลี่ยนหรือเพิ่มประกาศ CSS ลงในองค์ประกอบ

1. คลิกขวาที่ข้อความ Add a background color to me! ด้านล่าง แล้วเลือกตรวจสอบ

   เพิ่มสีพื้นหลังให้ฉัน

2. คลิก element.style ใกล้กับด้านบนของแท็บสไตล์

3. พิมพ์ background-color แล้วกด Enter

4. พิมพ์ honeydew แล้วกด Enter ในต้นไม้ DOM คุณจะเห็นว่ามีการใช้ประกาศสไตล์ในบรรทัดกับองค์ประกอบ

เพิ่มคลาส CSS ลงในองค์ประกอบ

ใช้แท็บสไตล์เพื่อดูลักษณะขององค์ประกอบเมื่อมีการใช้หรือนำคลาส CSS ออกจากองค์ประกอบ

1. คลิกขวาที่องค์ประกอบ Add a class to me! ด้านล่าง แล้วเลือกตรวจสอบ

   เพิ่มชั้นเรียนให้ฉัน

2. คลิก .cls DevTools จะแสดงกล่องข้อความที่คุณเพิ่มคลาสลงในองค์ประกอบที่เลือกได้

3. พิมพ์ color_me ในกล่องข้อความเพิ่มชั้นเรียนใหม่ แล้วกด Enter ช่องทําเครื่องหมายจะปรากฏใต้กล่องข้อความเพิ่มคลาสใหม่ ซึ่งคุณสามารถเปิดและปิดคลาสได้ หากองค์ประกอบ Add a class to me! ใช้คลาสอื่นๆ อยู่ คุณจะสลับคลาสเหล่านั้นได้จากที่นี่

เพิ่มสถานะจำลองลงในคลาส

ใช้แท็บรูปแบบเพื่อใช้สถานะจำลอง CSS กับองค์ประกอบ

1. วางเมาส์เหนือข้อความ Hover over me! ด้านล่าง สีพื้นหลังจะเปลี่ยนไป

   วางเมาส์เหนือฉัน

2. คลิกขวาที่ข้อความ Hover over me! แล้วเลือกตรวจสอบ

3. ในแท็บสไตล์ ให้คลิก :hov

4. เลือกช่องทําเครื่องหมาย :hover สีพื้นหลังจะเปลี่ยนเหมือนเช่นเคย แม้ว่าคุณจะไม่ได้วางเมาส์เหนือองค์ประกอบนั้นก็ตาม

ดูข้อมูลเพิ่มเติมได้ที่เปิด/ปิดคลาสจำลอง

เปลี่ยนขนาดขององค์ประกอบ

ใช้แผนภาพอินเทอร์แอกทีฟรูปแบบกล่องในแท็บสไตล์เพื่อเปลี่ยนความกว้าง ความสูง ระยะห่างจากขอบ ระยะขอบ หรือความยาวเส้นขอบขององค์ประกอบ

1. คลิกขวาที่องค์ประกอบ Change my margin! ด้านล่าง แล้วเลือกตรวจสอบ

   เปลี่ยนระยะขอบของฉัน

2. หากต้องการดูรูปแบบกล่อง ให้คลิกปุ่ม แสดงแถบด้านข้างในแถบการดำเนินการในแท็บสไตล์

3. ในแผนภาพรูปแบบกล่องในแท็บสไตล์ ให้วางเมาส์เหนือระยะห่างจากขอบ ระบบจะไฮไลต์ระยะห่างจากขอบขององค์ประกอบในวิวพอร์ต

4. ดับเบิลคลิกระยะขอบด้านซ้ายในรูปแบบกล่อง ขณะนี้องค์ประกอบไม่มีระยะขอบ margin-left จึงมีค่าเป็น -

5. พิมพ์ 100 แล้วกด Enter

รูปแบบกล่องจะใช้ค่าเริ่มต้นเป็นพิกเซล แต่ก็ยอมรับค่าอื่นๆ ด้วย เช่น 25% หรือ 10vw