ถ้าลองสังเกต จะเห็นว่า pkpNUKE นั้น link ต่าง ๆ จะถูกบังคับให้มี style เดียวกัน นั่นคือ โดนกำหนดจาก theme ที่เราใช้ในปัจจุบัน
เรามีทางเลือก ที่จะเปลี่ยนสี link บางที่ให้แปลกออกไป ง่าย ๆ โดยการจัดการที่ themes/themeของท่าน/style/style.css
การกำหนดให้ ลักษณะของการแสดงตัวอักษรและ link เป็นอย่างเดียวกันหมด ใช้การกำหนดที่ CSS files
css หรือ cascading style sheets เป็น features หนึ่งที่นักทำเวปรู้จักกันดี เป็นการกำหนดลักษณะครอบคลุมรูปแบบตัวหนังสือ สี ตาราง ส่วนที่ css นี้อ้างถึง ให้มีลักษณะ สี และรูปแบบ แบบเดียวกัน code จะดูง่าย ขนาดเล็กลง ตัวอย่าง style.css
A:link {BACKGROUND: none; COLOR: #0d4466; FONT-SIZE: 10px ;FONT-WEIGHT :normal;FONT-FAMILY :MS Sans Serif,Verdana, Helvetica; TEXT-DECORATION: none}
A:active {BACKGROUND: none; COLOR: #0d4466; FONT-SIZE: 10px ;FONT-WEIGHT :normal;FONT-FAMILY :MS Sans Serif,Verdana, Helvetica; TEXT-DECORATION: none}
A:visited {BACKGROUND: none; COLOR: #0d4466; FONT-SIZE: 10px ;FONT-WEIGHT :normal;FONT-FAMILY : MS Sans Serif,Verdana, Helvetica; TEXT-DECORATION: none}
A:hover {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 10px ;FONT-WEIGHT :normal;FONT-FAMILY :MS Sans Serif,Verdana, Helvetica; TEXT-DECORATION: underline ,bold}
ถ้ามีการอ้างถึง file.css นี้ ก็จะบังคับให้ลักษณะลิงค์ เป็นอย่างนี้
น่าเบื่อไหมตลอดเอกสาร
แต่ถ้าต้องการอย่างนี้
เพื่อเอาไปใช้ในบางส่วนที่ต้องการเน้น เราก็เพียงแต่กำหนด condition เพิ่มเข้าไปใน style.css ของท่าน
A.type1:link {color:#FFDD00; text-decoration:none;}
A.type1:visited {color:#FFDD00; text-decoration:none;}
A.type1:active {color:#FFDD00; text-decoration:none;}
A.type1:hover {color:#00FF80; text-decoration:underline;}
A.type2:link {color:#FF0000; text-decoration:underline;}
A.type2:visited {color:#FF0000; text-decoration:underline;}
A.type2:active {color:#FF0000; text-decoration:underline;}
A.type2:hover {color:#ABCDEF; text-decoration:underline;}
A.type3:link {color:#00CCFF; text-decoration:none;}
A.type3:visited {color:#00CCFF; text-decoration:none;}
A.type3:active {color:#00CCFF; text-decoration:none;}
A.type3:hover {color:#FF8000; text-decoration:overline underline;}
เวลาเรียกใช้ก็เรียกโดยวิธี
a class="type1" href="XXX แทนที่ a href="XXX ธรรมดา
ท่านก็จะสามารถให้ link ส่วนใดมีลักษณะใดก็ได้ ลองดูตัวอย่าง navigation bar ของ Thaihealth ครับ
