CSS - ลิงค์

บทนี้สอนวิธีตั้งค่าคุณสมบัติต่างๆของไฮเปอร์ลิงก์โดยใช้ CSS คุณสามารถตั้งค่าคุณสมบัติต่อไปนี้ของไฮเปอร์ลิงค์ -

เราจะกลับมาดูคุณสมบัติเดิมเมื่อเราจะพูดถึง Pseudo-Classes ของ CSS

:link หมายถึงการเชื่อมโยงหลายมิติที่ไม่ได้เข้าชม
:visited หมายถึงไฮเปอร์ลิงก์ที่เยี่ยมชม
:hover หมายถึงองค์ประกอบที่ปัจจุบันมีตัวชี้เมาส์ของผู้ใช้วางเมาส์เหนือองค์ประกอบนั้น
:active หมายถึงองค์ประกอบที่ผู้ใช้กำลังคลิกอยู่

โดยปกติคุณสมบัติเหล่านี้ทั้งหมดจะถูกเก็บไว้ในส่วนหัวของเอกสาร HTML

โปรดจำไว้ว่า a: hover ต้องอยู่หลังลิงก์: และ a: เยี่ยมชมในนิยาม CSS เพื่อให้มีประสิทธิภาพ นอกจากนี้ a: active ต้องอยู่หลัง a: hover ในนิยาม CSS ดังนี้ -

<style type = "text/css">
   a:link {color: #000000}
   a:visited {color: #006600}
   a:hover {color: #FFCC00}
   a:active {color: #FF00CC}
</style>

ตอนนี้เราจะดูวิธีใช้คุณสมบัติเหล่านี้เพื่อให้เอฟเฟกต์ต่าง ๆ กับไฮเปอร์ลิงก์

ตั้งค่าสีของลิงค์

ตัวอย่างต่อไปนี้สาธิตวิธีการตั้งค่าสีของลิงค์ ค่าที่เป็นไปได้อาจเป็นชื่อสีใดก็ได้ในรูปแบบที่ถูกต้อง

<html>
   <head>
      <style type = "text/css">
         a:link {color:#000000}
     </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html>

มันจะสร้างลิงค์สีดำดังต่อไปนี้ -

กำหนดสีของลิงก์ที่เยี่ยมชม

ตัวอย่างต่อไปนี้สาธิตวิธีการตั้งค่าสีของลิงก์ที่เยี่ยมชม ค่าที่เป็นไปได้อาจเป็นชื่อสีใดก็ได้ในรูปแบบที่ถูกต้อง

<html>
   <head>
      <style type = "text/css">
         a:visited {color: #006600}
      </style>
   </head>

   <body>
      <a href = ""> link</a> 
   </body>
</html>

มันจะสร้างลิงค์ต่อไปนี้ เมื่อคุณคลิกลิงก์นี้ลิงก์นี้จะเปลี่ยนสีเป็นสีเขียว

เปลี่ยนสีของลิงค์เมื่อเมาส์อยู่เหนือ

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการเปลี่ยนสีของลิงก์เมื่อเรานำตัวชี้เมาส์ไปที่ลิงก์นั้น ค่าที่เป็นไปได้อาจเป็นชื่อสีใดก็ได้ในรูปแบบที่ถูกต้อง

<html>
   <head>
      <style type = "text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html>

มันจะสร้างลิงค์ต่อไปนี้ ตอนนี้คุณนำเมาส์ไปวางเหนือลิงค์นี้และคุณจะเห็นว่ามันเปลี่ยนสีเป็นสีเหลือง

เปลี่ยนสีของลิงค์ที่ใช้งานอยู่

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการเปลี่ยนสีของลิงก์ที่ใช้งานอยู่ ค่าที่เป็นไปได้อาจเป็นชื่อสีใดก็ได้ในรูปแบบที่ถูกต้อง

<html>
   <head>
      <style type = "text/css">
         a:active {color: #FF00CC}
      </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html>

มันจะสร้างลิงค์ต่อไปนี้ จะเปลี่ยนสีเป็นสีชมพูเมื่อผู้ใช้คลิก