การเชื่อมโยงเป็นเรื่องธรรมดาในหน้าเว็บ แต่นักออกแบบเว็บจำนวนมากไม่ตระหนักถึงพลังที่ตนมีกับ CSS เพื่อจัดการและจัดการลิงก์ของตนได้อย่างมีประสิทธิภาพ คุณสามารถกำหนดลิงก์ที่มีสถานะเข้าเยี่ยมชมเลื่อนเมาส์และใช้งานได้ นอกจากนี้คุณยังสามารถทำงานกับเส้นขอบและพื้นหลังเพื่อให้ลิงก์ของคุณมีความพิถีพิถันมากขึ้นหรือทำให้ดูคล้ายปุ่มหรือแม้แต่ภาพ
นักออกแบบเว็บส่วนใหญ่เริ่มต้นด้วยการกำหนดลักษณะใน แท็ก:
a {color: red; }
ซึ่งจะจัดรูปแบบทุกด้านของลิงก์ (เลื่อนไปมาและเข้าใช้งาน) ในการจัดสไตล์แต่ละส่วนแยกกันคุณต้องใช้ลิงค์หลอกคลาส
ลิงก์ Pseudo-Classes
มีสี่ประเภทพื้นฐานของการหลอกลวงลิงก์ที่คุณสามารถกำหนดได้:
- : link - นี่คือสไตล์ดีฟอลต์สำหรับลิงค์
- : visited - หลังจากลิงค์ได้รับการคลิก
- : เลื่อน - เป็นเมาส์จะทรงตัวเหนือลิงก์ (คลิกก่อน)
- : active - ขวาเป็นลิงค์ที่มีการคลิก
หากต้องการกำหนดลิงก์หลอกให้ใช้กับ ในเครื่องมือเลือก CSS ของคุณ ดังนั้นเพื่อเปลี่ยนสีที่เข้าเยี่ยมชมของลิงก์ทั้งหมดของคุณเป็นสีเทาให้เขียน:
a: visited {color: gray; }
หากคุณใช้ลิงก์ปลอมแบบลิงก์หนึ่งลิงก์คุณควรกำหนดสไตล์ให้กับทุกรูปแบบ ด้วยวิธีนี้คุณจะไม่แปลกใจกับผลลัพธ์ที่ไม่เกี่ยวข้อง ดังนั้นหากคุณเพียงแค่ต้องการเปลี่ยนสีที่เข้าชมเป็นสีเทาในขณะที่คุณสมบัติหลอกอื่น ๆ ทั้งหมดของลิงก์ของคุณจะยังคงเป็นสีดำคุณควรเขียน:
a: link, a: hover, a: active {color: black; } a: visited {color: gray; }
เปลี่ยนสีลิงก์
วิธีที่นิยมมากที่สุดในการเชื่อมโยงสไตล์คือการเปลี่ยนสีเมื่อเลื่อนเมาส์ไปเหนือมัน:
a {color: # 00f; } a: เลื่อน {สี: # 0f0; }
แต่อย่าลืมว่าคุณจะมีผลต่อลิงก์ที่มีลักษณะเป็นอย่างไรโดยคลิกที่: active property:
a {color: # 00f; } a: active {color: # f00; }
หรือลักษณะการเชื่อมโยงหลังจากที่คุณเข้าเยี่ยมชมด้วยคุณสมบัติที่เยี่ยมชม:
a {color: # 00f; } a: visited {color: # f0f; }
เพื่อนำมารวมกัน:
a {color: # 00f; } a: visited {color: # f0f; } a: เลื่อน {สี: # 0f0; } a: active {color: # f00; }
ใส่ภาพพื้นหลังในลิงค์เพื่อเพิ่มไอคอนหรือสัญลักษณ์แสดงหัวข้อย่อย
เมื่อเล่นพื้นหลังเล็กน้อยคุณสามารถสร้างลิงก์ที่มีไอคอนที่เกี่ยวข้องได้ เลือกไอคอนที่มีขนาดเล็กประมาณ 15 พิกเซลต่อ 15px เว้นแต่ข้อความของคุณมีขนาดใหญ่ขึ้น วางพื้นหลังไว้ที่ด้านใดด้านหนึ่งของลิงก์และตั้งค่าตัวเลือกซ้ำให้ไม่มีการทำซ้ำ จากนั้นให้วางลิงก์เพื่อให้ข้อความภายในลิงก์ถูกเลื่อนไปทางด้านซ้ายหรือด้านขวาเพื่อดูไอคอน
{padding: 0 2px 1px 15px; พื้นหลัง: #fff url (ball.gif) ซ้ายศูนย์ไม่ซ้ำ; สี: # c00; }
เมื่อคุณมีไอคอนแล้วคุณสามารถตั้งค่าภาพอื่น ๆ ให้เป็นไอคอนเลื่อนตำแหน่งใช้งานและเข้าชมเพื่อเปลี่ยนแปลงการเชื่อมโยงได้:
{padding: 0 2px 1px 15px; พื้นหลัง: #fff url (ball.gif) ซ้ายศูนย์ไม่ซ้ำ; สี: # c00; } a: เลื่อน {พื้นหลัง: #fff url (ball2.gif) ซ้ายศูนย์ไม่ซ้ำ; } a: active {background: #fff url (ball3.gif) ซ้ายศูนย์ไม่ซ้ำ; }
ทำให้ลิงก์ดูเหมือนปุ่ม
ปุ่มเป็นที่นิยมมาก แต่จนกว่า CSS จะมาพร้อมคุณต้องสร้างปุ่มโดยใช้รูปภาพซึ่งจะทำให้หน้าเว็บใช้เวลาโหลดนานขึ้น โชคดีที่มีรูปแบบเส้นขอบที่สามารถช่วยให้คุณสร้างปุ่มเหมือนได้อย่างง่ายดายด้วย CSS
a {border: เริ่มต้น 4px; padding: 2px; ตกแต่งข้อความ: ไม่มี; } a: active {border: 4px inset; }
โปรดทราบว่าเมื่อคุณใส่สีในรูปแบบส่วนหัวและส่วนหัวของเบราว์เซอร์เบราว์เซอร์จะไม่สามารถแสดงผลได้ตามที่คุณคาดไว้ ต่อไปนี้เป็นปุ่มนักเล่นที่มีเส้นขอบสี:
{border-style: แข็ง; border-width: 1px 4px 4px 1px; ตกแต่งข้อความ: ไม่มี; padding: 4px; border-color: # 69f # 00f # 00f # 69f; }
และคุณสามารถส่งผลกระทบต่อ hover และรูปแบบการใช้งานของ link button ด้วยเช่นกันเพียงแค่ใช้ pseudo-classes:
a: link {border-style: solid; border-width: 1px 4px 4px 1px; ตกแต่งข้อความ: ไม่มี; padding: 4px; border-color: # 69f # 00f # 00f # 69f; } a: เลื่อน {border-color: #ccc; }
