วิธีเชื่อมโยงสไตล์ด้วย CSS

การเชื่อมโยงเป็นเรื่องธรรมดาในหน้าเว็บ แต่นักออกแบบเว็บจำนวนมากไม่ตระหนักถึงพลังที่ตนมีกับ CSS เพื่อจัดการและจัดการลิงก์ของตนได้อย่างมีประสิทธิภาพ คุณสามารถกำหนดลิงก์ที่มีสถานะเข้าเยี่ยมชมเลื่อนเมาส์และใช้งานได้ นอกจากนี้คุณยังสามารถทำงานกับเส้นขอบและพื้นหลังเพื่อให้ลิงก์ของคุณมีความพิถีพิถันมากขึ้นหรือทำให้ดูคล้ายปุ่มหรือแม้แต่ภาพ

นักออกแบบเว็บส่วนใหญ่เริ่มต้นด้วยการกำหนดสไตล์ในแท็ก "a"

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; }

ใส่ภาพพื้นหลังในลิงค์เพื่อเพิ่มไอคอนหรือสัญลักษณ์แสดงหัวข้อย่อย

คุณสามารถวางพื้นหลังของลิงก์ไว้ในบทความ Stylish Backgrounds ได้ แต่โดยการเล่นพื้นหลังเล็กน้อยคุณสามารถสร้างลิงก์ที่มีไอคอนที่เกี่ยวข้องได้ เลือกไอคอนที่มีขนาดเล็กประมาณ 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; }