แบบฝึกหัด - ตัวเลือก

เสร็จสมบูรณ์เมื่อ

ในแบบฝึกหัดก่อนหน้านี้ คุณได้นําสไตล์ไปใช้กับองค์ประกอบ เช่น html และ h1 คุณมักจะต้องแคบลงเล็กน้อยในสไตล์การสมัคร

ในแบบฝึกหัดนี้ คุณกําหนดลักษณะสําหรับส่วนโซเชียลมีเดียและประสบการณ์และลิงก์บนหน้า

การใช้สไตล์กับคลาสและ ID

คุณเริ่มต้นด้วยการกําหนดสไตล์สําหรับส่วนโซเชียลมีเดียและประสบการณ์

1. กลับไปยังหน้าต่าง vscode.dev ที่คุณใช้ในแบบฝึกหัดก่อนหน้านี้

2. ภายใน index.htmlสังเกต section องค์ประกอบที่มีรหัสของ โซเชียลมีเดีย ที่บรรทัดที่ 10 คุณใช้สไตล์กับส่วนนี้เพื่อตั้งค่าสีเป็นสีน้ําเงิน

3. ในตอนท้ายของ style.cssให้เพิ่ม CSS ต่อไปนี้เพื่อตั้งค่าสีสําหรับองค์ประกอบ สื่อทางสังคม:

   #social-media {
       color: blue;
   }
   

4. หน้าจะอัปเดต โดยตั้งค่าเนื้อหาในส่วนโซเชียลมีเดียเป็นสีน้ําเงิน

5. ภายใน index.htmlให้สังเกตสองส่วนที่บรรทัดที่ 28 และ 32 พร้อม ประสบการณ์ในชั้นเรียน คุณใช้สไตล์กับส่วนเหล่านี้เพื่อทําให้แบบอักษรเป็นตัวเอียง

6. ในตอนท้ายของ style.cssให้เพิ่ม CSS ต่อไปนี้เพื่อปรับเปลี่ยนฟอนต์สําหรับองค์ประกอบที่มีประสบการณ์การใช้งาน คลาส:

   .experience {
       font-style: italic;
   }
   

7. หน้าจะอัปเดต โดยตั้งค่าแบบอักษรภายในประสบการณ์เป็นตัวเอียง

การใช้คลาสหลอกเพื่อตั้งค่ารูปแบบลิงก์

นักพัฒนาเว็บหลายคนเปลี่ยนสีและสไตล์ของไฮเปอร์ลิงก์บนเพจ คุณตั้งค่าสีสําหรับลิงก์เป็นสีเขียวและไฮไลต์ลิงก์เมื่อผู้ใช้วางเมาส์เหนือลิงก์เหล่านั้น

1. ที่ส่วนท้ายของ style.cssให้เพิ่ม CSS ต่อไปนี้เพื่อตั้งค่าลิงก์เป็นสีเขียวเสมอ:

   a:visited {
       color: green;
   }
   
   a:link {
       color: green;
   }
   

2. เพจจะปรับปรุงเพื่อแสดงการเชื่อมโยงเป็นสีเขียว

3. เพิ่ม CSS ต่อไปนี้ลงในส่วนท้ายของ style.css เพื่อไฮไลต์ลิงก์ขณะที่กําลังโฮเวอร์เหนือลิงก์:

   a:hover {
       background-color: yellow;
   }
   

4. วางเมาส์เหนือลิงก์บนหน้าและสังเกตว่าลิงก์ถูกไฮไลต์แล้ว

ทบทวน

สกรีนช็อตต่อไปนี้แสดงผลลัพธ์ของ CSS ที่คุณนําไปใช้ คุณใช้คลาส รหัส และคลาสเทียมเพื่อนําสไตล์ไปใช้กับองค์ประกอบเฉพาะและกลุ่มเชิงตรรกะขององค์ประกอบ