CSS การตกแต่ง Link

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

การตกแต่งลิ้งด้วย CSS รูปแบบต่างๆ

1.เปลี่ยนสีตัวอักษรลิ้ง

a:link {
    color: #FFFFFF;
}
a:visited {
    color: #FF0000;
}
a:hover {
    color: #000000;
}
a:active {
    color: #0000FF;
}

จากตัวอย่างด้านบนนี้เป็นการกำหนดสีให้กับลิ้งตาม events ต่างๆของลิ้งตามที่เราต้องการ

2.การตกแต่งรูปแบบของลิ้ง

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

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

3.พื้นหลังของลิ้ง

a:link {
    background-color: #B2FF99;
}
a:visited {
    background-color: #FFFF85;
}
a:hover {
    background-color: #FF704D;
}
a:active {
    background-color: #FF704D;
}

จากตัวอย่างที่3เป็นการเซ็ตสีให้กับพื้นหลังของลิ้งที่เราต้องการและตาม events ต่างๆที่เกิดขึ้นกับลิ้ง

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