วิธีทำ link หลายสีใน page เดียวกัน ด้วย CSS

หน้าหลัก » CSS Design โดย pun February 20, 2012 11:54 pm
การทำลิงค์หลายสีหลายแบบในหน้าเว็บเดียวกัน เมื่อก่อนผม งง มาก ทำได้อย่างไร แต่พอได้ศึกษาหัดเล่นไปเรื่อยๆก็พอเข้าใจบ้าง จริงๆสามารถเขียนได้หลายแบบ แต่ในตัวอย่างนี้ผมขอยกตัวอย่าง การเขียนแบบ class ใน css

ขั้นตอน 1. สร้างไฟล์ style.css มานึ่งไฟล์
ขั้นตอน 2. เขียนตามรูปแบบ code นี้ ตั้งชื่อ class เป็น link2
[css]
a.link2,a.link2:link,a.link2:visited {
text-decoration: none;
Color: #0066CC;
font-family: Tahoma;
font-size: 16px;
}
a.link2:hover {
text-decoration: none;
Color: #666666;
font-family: Tahoma;
font-size: 16px;}
[/css]

ขั้นตอน 3. เรียกใช้งาน
[html]<a href="http://www.wpdsign.com/" class="link2">link ตัวอย่าง</a>[/html]
ให้เพิ่ม class="link2" เวลาสร้างลิงค์ link2 คือชื่อ class ของ css ที่เราเขียนไว้

code ใน {} ชุด1 กำหนดให้เมื่อแสดงลิงค์เฉยๆ
code ใน {} ชุด2 กำหนดให้เมื่อเอาไปชี้ mouse over

เพิ่มเติม
text-decoration: none; // กำหนดให้มีเส้นใต้หรือไม ถ้าไม่ต้องการใส่ none
Color: #0066CC; // สีเลือกได้ตามใจชอบ
font-family: Tahoma; // กำหนด font เลือกได้ตามใจชอบ ส่วนมากใช้ฟ้อน Tahoma
font-size: 16px; // ขนาดของตัวอักษรของลิงค์ที่ต้องการ

วิธีทำ link หลายสีใน page เดียวกัน ด้วย CSS


บทความโดย pun