CSS ลิงก์

ด้วย CSS คุณสามารถกำหนดสไตล์ลิงก์ในวิธีที่ต่างกัน

ลิงก์ข้อความ ลิงก์ข้อความ ปุ่มลิงก์ ปุ่มลิงก์

กำหนดสไตล์ลิงก์

ลิงก์สามารถใช้คุณสมบัติ CSS ทุกตัว (เช่น color、font-family、background และอื่นๆ เพื่อกำหนดสไตล์

ตัวอย่าง

a {
  color: hotpink;
}

ลองทดสอบด้วยตัวเอง

นอกจากนี้ คุณยังสามารถกำหนดสไตล์ของลิงก์ตามสถานะที่ลิงก์อยู่

สถานะลิงก์สี่รายการนี้คือ：

  • a:link - ลิงก์ที่ยังไม่ถูกเข้าถึง
  • a:visited - ลิงก์ที่ถูกเข้าถึง
  • a:hover - ขณะที่ผู้ใช้มีหมุนหมายคะแนนลิงก์
  • a:active - ขณะที่ลิงก์ถูกคลิก

ตัวอย่าง

/* ลิงก์ที่ยังไม่ถูกเข้าถึง */
a:link {
  color: red;
}
/* ลิงก์ที่ถูกเข้าถึง */
a:visited {
  color: green;
}
/* ให้มีหมุนหมายคะแนนหลังลิงก์ */
a:hover {
  color: hotpink;
}
/* ลิงก์ที่ถูกเลือก */
a:active {
  color: blue;
}

ลองทดสอบด้วยตัวเอง

ถ้าจะกำหนดสไตล์สำหรับสถานะลิงก์หลายรายการ โปรดปรึกษากฎระเบียบที่นี้

  • a:hover ต้องอยู่หลัง a:link และ a:visited
  • a:active ต้องอยู่หลัง a:hover

ของแบบสรร漾

text-decoration คุณสมบัตินี้หลักใช้เพื่อลบของแบบสรร漾ของลิงก์：

ตัวอย่าง

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}

ลองทดสอบด้วยตัวเอง

สีพื้นหลัง

background-color คุณสมบัติสามารถใช้เพื่อกำหนดสีพื้นหลังของลิงก์：

ตัวอย่าง

a:link {
  background-color: yellow;
}
a:visited {
  background-color: cyan;
}
a:hover {
  background-color: lightgreen;
}
a:active {
  background-color: hotpink;
}

ลองทดสอบด้วยตัวเอง

ปุ่มลิงก์

ตัวอย่างนี้แสดงให้เห็นตัวอย่างที่สูงกว่าเล็กน้อย ที่เรานำมาประกอบคุณสมบัติ CSS หลายรายการเพื่อแสดงลิงก์ในรูปแบบแถว/ปุ่ม：

ตัวอย่าง

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center; 
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active {
  background-color: red;
}

ลองทดสอบด้วยตัวเอง

ตัวอย่างเพิ่มเติม

การเพิ่มสไตล์ต่างๆ ให้กับลิงก์
ตัวอย่างนี้แสดงว่าวิธีที่จะเพิ่มสไตล์อื่นๆ ให้กับลิงก์
ระดับสูง - การสร้างปุ่มลิงก์ที่มีขอบเขต
นี่เป็นตัวอย่างอีกที่แสดงว่าเป็นทางเลือกหนึ่งในการสร้างต่างของลิงก์/ปุ่ม
การเปลี่ยนตามุม
คุณสมบัติ cursor กำหนดชนิดของตามุมที่จะแสดงออก ตัวอย่างนี้แสดงชนิดตามุมที่แตกต่างกัน (มีประโยชน์สำหรับลิงก์)