วิธีการเปลี่ยนสีของลิงค์บนหน้าเว็บ

ด้านล่างนี้เป็นขั้นตอนเกี่ยวกับวิธีการเปลี่ยนสีของลิงก์ที่แสดงบนหน้าเว็บของคุณโดยใช้ HTML และ CSS แม้ว่าสีของลิงก์สามารถทำได้ด้วยแท็ก HTML BODY แต่เราแนะนำให้ทำการตั้งค่าสไตล์ใน CSS ตามที่แสดงด้านล่าง

เคล็ดลับ: เมื่อกำหนดสีขององค์ประกอบหน้าเว็บใด ๆ คุณอาจต้องใช้รหัสสี HTML สำหรับสีหลักคุณสามารถระบุชื่อของสีเหล่านั้นแทนการใช้รหัสสีเช่นแดงน้ำเงินเขียวและดำแทนการใช้ค่ารหัสสีที่เคารพ

ทำความเข้าใจกับไฮเปอร์ลิงก์ชนิดต่าง ๆ

การเชื่อมโยงหลายมิติเป็นองค์ประกอบพิเศษในหน้าของคุณเพราะมันเป็นแบบโต้ตอบ เพื่อระบุว่าพวกเขาเป็นแบบโต้ตอบพวกเขามีสีแตกต่างกันขึ้นอยู่กับสถานะของพวกเขา ไฮเปอร์ลิงก์มีสามสีพิเศษเพิ่มเติมจากสีดั้งเดิมซึ่งเป็นตัวแทนของสถานะที่แตกต่างกันสามสถานะ:

  1. เยี่ยมชมลิงค์ - สีเมื่อมีการเยี่ยมชมลิงค์ หากการเชื่อมโยงหลายมิติเป็นสีนี้ผู้ใช้สามารถคาดหวังได้ว่าการคลิกลิงก์จะนำพวกเขาไปยังหน้าที่พวกเขาเคยเห็นมาแล้ว
  2. ลิงค์โฮเวอร์ - สีเมื่อเมาส์วางอยู่เหนือลิงค์ หากการเชื่อมโยงหลายมิติเป็นสีนี้ผู้ใช้สามารถคาดหวังได้ว่าการกดปุ่มซ้ายของเมาส์ (คลิก) จากนั้นปล่อยปุ่มจะทำให้ลิงค์นั้นเข้าชม สีของโฮเวอร์จะเหมือนกันสำหรับทั้งลิงค์ที่ใช้งานและเยี่ยมชม
  3. Active Link - สีของลิงค์เมื่อคลิก เมื่อผู้ใช้เห็นสีนี้พวกเขาสามารถคาดหวังว่าการปล่อยปุ่มเมาส์จะทำให้เบราว์เซอร์ไปที่ลิงก์

เคล็ดลับ: ดูคำจำกัดความเชื่อมโยงหลายมิติของเราสำหรับข้อมูลเพิ่มเติมและคำถามที่เกี่ยวข้องกับการเชื่อมโยงหลายมิติ

ตัวอย่างสีของลิงค์ CSS

ในตัวอย่าง CSS ด้านล่างเรากำลังตั้งค่าสีไฮเปอร์ลิงก์ให้มีลักษณะคล้ายกับที่แสดงในหน้านี้ ก่อนอื่นแองเคอร์ทั้งหมดจะถูกตั้งค่าเป็น # 2c87f0 (สีฟ้า), # 636 สีม่วงและสีโฮเวอร์และลิงค์ที่ใช้งานทั้งหมด: # c33 (สีแดง) โค้ดด้านล่างสามารถเพิ่มลงในองค์ประกอบสไตล์ CSS หรือในไฟล์. css ของคุณ

 a {color: # 2c87f0; } a: เยี่ยมชม {color: # 636; } a: hover, a: active, a: focus {color: # c33; } 

หากหน้าของคุณไม่ได้ใช้ CSS หรือคุณไม่ต้องการที่จะแปลงเป็น CSS ด้านล่างเป็นขั้นตอนเกี่ยวกับวิธีการทำเช่นนี้ในแท็ก BODY ในรหัส HTML อย่างไรก็ตามดังที่กล่าวไว้ก่อนหน้านี้เราขอแนะนำให้ใช้โค้ด CSS ด้านบนแทนแท็ก body คุณสามารถเพิ่มโค้ดด้านบนลงในไฟล์ CSS และเชื่อมโยงเว็บเพจทั้งหมดของคุณไปยังไฟล์ CSS นั้นได้ จากนั้นคุณสามารถเปลี่ยนค่าสีพื้นหลังในไฟล์ CSS หนึ่งไฟล์นั้นเพื่อเปลี่ยนสีพื้นหลังของทุกหน้าที่เชื่อมโยงกับมัน

ตัวอย่างแท็กเนื้อหา HTML

ในบางสถานการณ์ที่หายากมากอาจไม่สามารถใช้ CSS ได้ สำหรับสถานการณ์เหล่านั้นคุณสามารถกำหนดสีพื้นหลังสีข้อความสีลิงก์และค่าอื่น ๆ ในแท็กเนื้อหา HTML ดังที่แสดงด้านล่าง

ด้านล่างนี้เป็นคำอธิบายของแต่ละแอตทริบิวต์ HTML ในแท็ก body

TEXT = สีของข้อความ

LINK = สีของลิงค์

VLINK = สีของลิงค์ที่เยี่ยมชม

ALINK = สีของลิงค์ที่ใช้งานหรือสีที่ลิงค์เปลี่ยนไปเมื่อคลิก

BGCOLOR = สีพื้นหลังของหน้า