Pseudo-classes อย่างไรกับ Link หลากสี

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

ในการเขียน CSS ของผมไม่ว่าจะนำไปใช้สำหรับเว็บใด หรือหน้าเพจพิเศษ ไหนก็ตาม ผมจะกำหนด Pseudo-classes หลักเพื่อให้เป็น ฐานของการลิงค์ ของเว็บเสมอ คือ ถ้าในคลาสอื่นๆ ไม่ได้มีการเรียกใช้ Pseudo-classes พิเศษใดๆ ที่เฉพาะเจาะจงออกไปแล้ว ลิงค์ ทุกลิงค์ จะแสดงผลออกมาลักษณะเหมือนกัน

ซึ่งลักษณะต่างๆ แยะเป็น

  • Link = ลิงค์ที่ยังไม่เคยคลิ๊ก
  • Visited = ลิงค์ที่เคยคลิ๊กมาแล้ว
  • Active = ลิงค์ขณะกำลัง Activate
  • Hover = ลิงค์ขณะเอาเมาส์เข้าไปวางทับ

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

จากตัวอย่างด้านบน Pseudo-classes หลักในขณะที่เป็น a:link จะเป็นสี #ff9900 ถ้าหากเคยคลิ๊กเข้าไปแล้วจะกลายเป็นสี #ff6600 และขณะที่เอาเมาส์ขึ้น Hover จะกลายเป็นสี #000000 และมีเส้นใต้ เพราะติด text-decoration: underline; มาด้วย ในกรณีที่เราไม่อยากให้มีก็แค่ เปลี่ยนเป็น text-decoration: none; เท่านั้นเองครับ

ลองนำเอาโค้ดตัวอย่างไปปรับใช้และลองใช้ดูนะครับ จะได้เขียนแปลก และแตกต่างเพิ่มเติมอีกได้หลายวิธี

รักกันชอบกันอย่าลืมแชร์นะครัช:
error0
Tweet 20
fb-share-icon20

Back to Top

5 Responses to Pseudo-classes อย่างไรกับ Link หลากสี

  1. IcEsTea

    .forum { font-size: 0.8em; font-family: Tahoma; }

    a.forum:link { color: #603A39; text-decoration: none; }

    a.forum:visited { color: #80706A; text-decoration: none; }

    a.forum:hover { color: #B1A6A3; text-decoration: none; }

    ผมทำแบบนี้แหมพี่ ตอนให้มันเป็นสีก็กำหนด class ในแท็ก a เลยครับ

    ว่าแต่มันถูกกฎมั้ยพี่ ตัว Html Validator มันก็เป็นเครื่องหมายถูกครับ

    ปล.อันนี้ผมลองผิดลองถูกอยู่นานครับ

    Reply

  2. นัต

    ภาพสวยจังเลยค่ะ

    Reply

  3. norm

    อืมๆ แล้วถ้าเขียนแบบนี้มั่งล่ะ

    .forum { font-size: 0.8em; font-family: Tahoma; }

    .forum a:link { color: #603A39; text-decoration: none; }

    .forum a:visited { color: #80706A; text-decoration: none; }

    .forum a:hover { color: #B1A6A3; text-decoration: none; }

    เขียนแบบไหนถูกหลักการครับเนี่ย

    Reply

  4. หวาน

    -ขอบคุณมากๆเลยคะ

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top

Social Share Buttons and Icons powered by Ultimatelysocial