หากเบราว์เซอร์ของผู้เยี่ยมชมเว็บไซต์ไม่พบสิ่งบ่งชี้การออกแบบสีของไฮเปอร์ลิงก์ในโค้ดของหน้า เบราว์เซอร์จะใช้ค่าเริ่มต้น ค่าเหล่านี้เป็นสีน้ำเงินสำหรับลิงก์แบบพาสซีฟ สีแดงสำหรับลิงก์ที่ใช้งานอยู่ (เมื่อวางเมาส์เหนือ) และโทนสีม่วงแดงสำหรับลิงก์ที่เข้าชมแล้ว แบบแผนชุดสีนี้ไม่ได้ใช้ร่วมกับแบบแผนชุดสีของการออกแบบหน้าเว็บเสมอไป ดังนั้น จึงมักจะรวมบล็อกของคำอธิบายลักษณะลิงก์ไว้ในโค้ด
คำแนะนำ
ขั้นตอนที่ 1
สร้างชุดคำสั่งสำหรับเบราว์เซอร์ที่จะอธิบายสีของลิงค์ในสามสถานะ ตัวอย่างเช่น อาจมีลักษณะดังนี้: a: link {color: Red;}
a: เยี่ยมชมแล้ว {สี: เหลือง;}
a: hover {color: Orange;} ในที่นี้ "a" ที่จุดเริ่มต้นของแต่ละบรรทัดเรียกว่า "selector" และระบุแท็กที่เบราว์เซอร์ควรใช้คำอธิบายลักษณะที่อยู่ในวงเล็บปีกกา "A" คือแท็กไฮเปอร์ลิงก์ คำที่เพิ่มลงในตัวเลือกที่คั่นด้วยเครื่องหมายทวิภาคเรียกว่า "คลาสหลอก" ซึ่งเบราว์เซอร์ใช้เพื่อกำหนดลิงก์ที่ระบุว่าสไตล์ในวงเล็บปีกกานั้นเป็นของ ลิงก์จะตรงกับลิงก์ปกติ เข้าชมลิงก์ที่เคยเข้าชมแล้ว และวางเมาส์เหนือลิงก์เมื่อวางเคอร์เซอร์ไว้เหนือลิงก์นั้น สีที่กำหนดให้กับพารามิเตอร์สีภายในวงเล็บปีกกาสามารถระบุโดยใช้ชื่อของเฉดสีหรือรหัสฐานสิบหก
ขั้นตอนที่ 2
หากคุณต้องการกำหนดสีต่างๆ ให้กับกลุ่มลิงก์ต่างๆ บนหน้า ให้กำหนดชื่อของแต่ละกลุ่มเอง ("คลาส") และสร้างคำอธิบายแยกกันของสไตล์สำหรับแต่ละกลุ่ม ตัวอย่างเช่น ตั้งชื่อกลุ่มหนึ่งว่า LinksRed และอีกกลุ่มหนึ่งคือ LinksGreen จากนั้นคำอธิบายลักษณะจะมีลักษณะดังนี้: a. LinksRed: link {color: Red;}
a. LinksRed: เข้าชมแล้ว {สี: สีเหลือง;}
a. LinksRed: โฮเวอร์ {สี: สีส้ม;} a. LinksGreen: ลิงก์ {สี: สีเขียว;}
a. LinksGreen: เข้าชมแล้ว {สี: DarkGreen;}
a. LinksGreen: โฮเวอร์ {สี: Lime;} และในแท็กของลิงก์ของแต่ละกลุ่ม คุณต้องระบุว่าพวกเขาอยู่ในคลาสใด ตัวอย่างเช่น: ลิงค์สีแดง
ลิงค์สีเขียว
ขั้นตอนที่ 3
คำแนะนำเหล่านี้เขียนด้วย CSS (Cascading Style Sheets) ดังนั้นจึงต้องวางไว้ในแท็กสไตล์ที่แยกจากคำแนะนำอื่นๆ ในซอร์สโค้ดของหน้า ซึ่งเขียนด้วย HTML (HyperText Markup Language)):
a. LinksRed: ลิงค์ {สี: แดง;}
a. LinksRed: เข้าชมแล้ว {สี: สีเหลือง;}
a. LinksRed: โฮเวอร์ {สี: สีส้ม;} a. LinksGreen: ลิงก์ {สี: สีเขียว;}
a. LinksGreen: เข้าชมแล้ว {สี: DarkGreen;}
a. LinksGreen: โฮเวอร์ {สี: Lime;}
ขั้นตอนที่ 4
วางบล็อกคำอธิบายลักษณะลิงก์ที่เตรียมไว้ในส่วนส่วนหัวของซอร์สโค้ดของหน้า - คั่นด้วยแท็ก และ