แอตทริบิวต์ Cascading Style Sheets (CSS) มักใช้เพื่อเปลี่ยนสีของไฮเปอร์ลิงก์ในหน้าเว็บ วิธีแก้ปัญหาที่ใช้งานได้น้อยกว่าสำหรับปัญหานี้อยู่ในภาษา HTML (ภาษามาร์กอัป HyperText - "ภาษามาร์กอัปไฮเปอร์เท็กซ์")
มันจำเป็น
ความรู้พื้นฐานของภาษา HTML และ CSS CSS
คำแนะนำ
ขั้นตอนที่ 1
เตรียมบล็อกการจัดรูปแบบสำหรับไฮเปอร์ลิงก์ ในรูปแบบที่ง่ายที่สุด อาจมีลักษณะดังนี้: a {color: Green} ในที่นี้ "a" เรียกว่า "selector" ซึ่งระบุว่าคำอธิบายลักษณะในวงเล็บควรใช้กับแท็กลิงก์ทั้งหมดในเอกสาร สีเขียวกำหนดสีของลิงค์ ซึ่งเป็นคำจำกัดความคร่าวๆ ของสีและไม่ค่อยได้ใช้ บ่อยครั้งที่มีการเพิ่ม "คลาสหลอก" ลงในตัวเลือก "a" - เป็นป้ายกำกับที่ให้คุณระบุรูปแบบของลิงก์ในสามสถานะที่แตกต่างกัน
ขั้นตอนที่ 2
ใช้ลิงก์ pseudo-class เพื่อจัดรูปแบบสถานะปกติ (ไม่ทำงาน) ของลิงก์ อาจมีลักษณะดังนี้: a: link {color: Green}
ขั้นตอนที่ 3
ใช้โฮเวอร์คลาสหลอกเพื่อระบุว่าลิงก์ควรปรากฏบนโฮเวอร์อย่างไร ตัวอย่างเช่น: a: โฮเวอร์ {สี: มะนาว}
ขั้นตอนที่ 4
ใช้ pseudo-class ที่เยี่ยมชมเพื่ออธิบายรูปแบบของลิงค์ที่เข้าชมแล้ว ตัวอย่างเช่น: ก: เยี่ยมชม {สี: DarkGreen}
ขั้นตอนที่ 5
รวมทั้งสามสถานะไว้ในบล็อกคำอธิบายสไตล์เดียว ลักษณะของโค้ด HTML ที่มีคำอธิบาย CSS ของสไตล์สามารถมีลักษณะดังนี้:
a: ลิงค์ {สี: เขียว}
a: เยี่ยมชมแล้ว {สี: DarkGreen}
a: โฮเวอร์ {สี: มะนาว}
ในที่นี้ แท็กสไตล์ HTML ที่เปิดและปิดจะบอกเบราว์เซอร์ว่าคำอธิบายสไตล์เริ่มต้นและสิ้นสุดที่ใด และระหว่างนั้นจะเป็นคำอธิบายของลักษณะการทำงานของลิงก์ในสามสถานะ
ขั้นตอนที่ 6
ตัวอย่างที่ใช้ด้านบนแสดงเฉพาะลักษณะสี แต่สามารถรวมแอตทริบิวต์อื่นๆ ไว้ในคำอธิบายได้ ตัวอย่างเช่น หากการออกแบบหน้าเว็บกำหนดให้ลิงก์ไม่ถูกขีดเส้นใต้ในสถานะปกติ (ไม่ทำงาน) แต่ขีดเส้นใต้เมื่อวางเคอร์เซอร์ไว้เหนือ โค้ดสามารถแก้ไขได้ดังนี้:
a: ลิงค์ {สี: เขียว; การตกแต่งข้อความ: none;}
a: เยี่ยมชม {สี: DarkGreen; การตกแต่งข้อความ: none;}
a: โฮเวอร์ {สี: มะนาว; ตกแต่งข้อความ: ขีดเส้นใต้;}
ขั้นตอนที่ 7
หากคุณต้องการเปลี่ยนสีเฉพาะบางลิงก์ในหน้า และปล่อยให้ส่วนที่เหลือเป็นการตั้งค่าเริ่มต้น ให้เพิ่มแอตทริบิวต์ class ลงในแท็กของแต่ละลิงก์ที่มีการเปลี่ยนแปลง ตัวอย่างเช่น ตั้งชื่อคลาสไฮเปอร์ลิงก์นี้ newLinks จากนั้นแท็กลิงก์อาจมีลักษณะดังนี้: ลิงก์ข้อความ ต้องเพิ่มชื่อคลาสเดียวกันในคำอธิบายสไตล์:
a.newLinks: ลิงค์ {สี: สีเขียว; การตกแต่งข้อความ: none;}
a.newLinks: เข้าชมแล้ว {สี: DarkGreen; การตกแต่งข้อความ: none;}
a.newLinks: โฮเวอร์ {สี: Lime; ตกแต่งข้อความ: ขีดเส้นใต้;}
ขั้นตอนที่ 8
วางโค้ดคำอธิบายลักษณะที่จัดเตรียมจากตัวอย่างที่อธิบายไว้ข้างต้นในส่วนหัวของหน้า - ระหว่างแท็ก และ หากจำเป็น ให้เพิ่มแอตทริบิวต์คลาสให้กับแท็กลิงก์ด้วยชื่อที่ใช้ในคำอธิบายสไตล์ จากนั้นให้บันทึกหน้าที่แก้ไขและขั้นตอนการเปลี่ยนสีของไฮเปอร์ลิงก์จะเสร็จสมบูรณ์