ลำดับตอนที่ #114
คืนค่าการตั้งค่าทั้งหมด
คุณแน่ใจว่าต้องการคืนค่าการตั้งค่าทั้งหมด ?
ลำดับตอนที่ #114 : [lesson] CSS > Styling Link ... ใส่ชีวิตให้ลิงค์
ไม่แน่ใจนักว่าสรุปแล้ว link ภาษาไทยใช้ ก.ไก่ หรือ ค.ควาย การันต์กันแน่ ...แต่เรื่องนั้นก็ช่างมันก่อนเถอะนะ ^^
CSS สามารถช่วยกำหนดลักษณะของ link ได้ (เช่น แบบอักษร สี การตกแต่ง สีพื้นหลัง)
ดังนั้นถ้าอ่านบทนี้ แล้วเอาไปประยุกต์ใช้กับบทที่แล้วๆ มา (เรื่อง bg, text, font) เราก็สามารถสร้างสรรค์ link ที่หลากหลายด้วยตัวเราเอง โดยไม่ต้องพึ่งพาบทความแจกโค้ดที่สักแต่แจกเพิ่มตอนเยอะๆ โดยไม่สอนอะไรเลยล่ะ (ไปว่าเขาอีกเรา)
เข้าเรื่องดีกว่า... link มี 4 สถานะ ได้แก่
- a:link - ลิงค์ปกติ ที่ยังไม่เคยคลิกเข้าไปเยี่ยมชม
- a:visited - ลิงค์ที่เคยคลิกเข้าไปเยี่ยมชมแล้ว
- a:hover - ลิงค์ตอนที่เอาเมาส์ไปวางบนนั้น
- a:active - ลิงค์ตอนที่กดเมาส์ลงไป
และ a:active ก็ต้องมาหลังจาก a:hover เสมอ
เรื่อง link ที่ควรเน้นย้ำก็จบเพียงเท่านี้ (สั้นมาก...)
ลองไปดูตัวอย่างโค้ดและการใช้งานจริงเลยดีกว่า
<style type="text/css">
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
ลิงค์นี้เปลี่ยนการตกแต่งอักษร (ขีดเส้นใต้)
อ้างอิง...
http://www.w3schools.com/css/css_link.asp
เก็บเข้าคอลเล็กชัน
ความคิดเห็น