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

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

เพิ่ม Pseudostate ลงในคลาส

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

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

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

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

3. ในแท็บรูปแบบ ให้คลิก :hov

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

ดูข้อมูลเพิ่มเติมได้ที่สลับคลาส Pseudo

เปลี่ยนมิติข้อมูลขององค์ประกอบ

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

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

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

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

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

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

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

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

ประเด็นหลัก: หรือในการประกาศกฎในแท็บรูปแบบ คุณสามารถเปลี่ยนคุณสมบัติความยาวและหน่วยของคุณสมบัติด้วยตัวชี้