Article
>  Home   HTML   CSS   JavaScript   PHP   Perl   Photoshop   TCP/IP 

การทำลิงค์ธรรมดาให้มีลูกเล่นด้วย CSS

โดย สรวุฒิ กอสุวรรณศิริ

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

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

เริ่มแรก เราจะมาดูกันก่อนว่า Element ใดบ้างที่เกี่ยวข้องกับตัวลิงค์
A:linkเป็นลิงค์ในสภาพปกติ
A:visitedเป็นลิงค์ที่เคยไปมาแล้ว
A:activeเป็นลิงก์ที่ถูกกด
A:hoverเป็นลิงก์ที่ถูก mouse ทับ
เราจะกำหนดคุณลักษณะต่างๆให้กับ Element เหล่านี้ด้วย CSS หากเรากำหนดให้ A:hover มีลักษณะแตกต่างกับ Element อื่นๆ ก็จะทำให้ตัวลิงค์สามารถตอบสนองต่อการชึ้ของ mouse ได้นั่นเอง

ที่นี้เราจะมาดูกันต่อว่าคุณลักษณะอะไรบ้าง ที่น่าจะนำมาใช้

color: ใช้กำหนดสี
background-color:ใช้กำหนดสีพื้นหลัง
text-decoration:ใช้กำหนดการขีดเส้น
font-weight:ใช้กำหนดความหนาของตัวอักษร

ลงมือสร้าง Style Sheet

วิธีการที่ผมจะใช้ก็คือ ผมจะสร้าง Style Sheet ไว้บนส่วนหัวของไฟล์ ด้วยแท็ก <style type="text/css">...</style> ดังนี้ครับ ... ... <head> <style type="text/css"> A:link { color:blue } A:visited { color:blue} A:active { color: white} A:hover { color:green } </style> </head> .... ...
คราวนี้ผมจะเอาการขีดเส้นใต้ของลิงค์ในสถานะปกติออก ... ... <head> <style type="text/css"> A:link { color:blue;text-decoration:none; } A:visited { color:blue;text-decoration:none;} A:active { color: white;text-decoration:none;} A:hover { color:green;text-decoration:underline; } </style> </head> .... ...
เอางี้มั่ง! ให้ชี้แล้วเป็นตัวหนา ... ... <head> <style type="text/css"> A:link {font-weight:normal } A:visited { font-weight:normal} A:active { font-weight:normal} A:hover { font-weight:bold} </style> </head> .... ...

เห็นแล้วใช่ไหมครับ ว่ามันง่ายจริงๆ แถมยังมีประสิทธิภาพ ถ้าท่านต้องการศึกษา CSS ให้มากกว่านี้ เราก็มีบทเรียนให้ท่านได้ศึกษาอย่างจุใจ ที่ หน้าบทเรียน CSS

Back to top





© copyright 2001 Sorrawut Korsuwansiri