ลิงก์คือการเชื่อมต่อจากหน้าเว็บหนึ่งไปยังอีกหน้าหนึ่ง และ CSS สามารถจัดรูปแบบลิงก์ได้หลายวิธีผ่านคุณลักษณะที่แตกต่างกัน
1. รูปแบบลิงก์
ลิงก์เป็นส่วนสำคัญของเว็บไซต์ คุณสามารถดูลิงก์จำนวนมากได้ในเกือบทุกหน้าเว็บ การออกแบบรูปแบบลิงก์ที่สมเหตุสมผลสามารถเพิ่มจุดให้กับลักษณะที่ปรากฏของหน้าเว็บได้ ลิงก์มีสถานะที่แตกต่างกันสี่สถานะ ได้แก่ ลิงก์ เยี่ยมชม ใช้งานอยู่ และโฮเวอร์ คุณสามารถตั้งค่าสไตล์ที่แตกต่างกันสำหรับสถานะทั้งสี่ของลิงก์ได้โดยใช้ตัวเลือกคลาสหลอกต่อไปนี้:
(1) a: link => นี่เป็นลิงค์ปกติที่ไม่ได้เข้าชม
(2) a: เยี่ยมชม => นี่คือลิงค์ที่ผู้ใช้เคยเยี่ยมชมอย่างน้อยหนึ่งครั้ง
(3) a:hover => เมื่อวางเมาส์ไว้เหนือมัน มันคือลิงค์
(4) a: active => นี่คือลิงค์ที่เพิ่งคลิก
ไวยากรณ์:
a:link{สี:color_name;}color_name สามารถอยู่ในรูปแบบใดก็ได้ เช่น ชื่อสี (สีเขียว) ค่าเลขฐานสิบหก (#5570f0) หรือค่า RGB - rgb(25, 255, 2) มีสถานะอื่น "a:focus" ซึ่งใช้เพื่อโฟกัสเมื่อผู้ใช้ใช้ปุ่มแท็บเพื่อเรียกดูลิงก์
ค่าเริ่มต้นสำหรับลิงก์:
(1) ตามค่าเริ่มต้น ลิงก์ที่สร้างขึ้นจะถูกขีดเส้นใต้
(2) เมื่อเลื่อนเมาส์ไปที่ลิงค์ มันจะเปลี่ยนเป็นไอคอนรูปมือ
(3) ลิงก์ปกติ/ไม่ได้เข้าชมจะเป็นสีน้ำเงิน
(4) ลิงก์ที่เข้าชมจะเป็นสีม่วง
(5 ) ลิงค์ที่ใช้งานอยู่จะเป็นสีแดง
(6) เมื่อลิงก์ถูกโฟกัส จะมีโครงร่างล้อมรอบลิงก์นั้น
ตัวอย่างเช่น:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>CSSlinks</title><style>p{font-size:25px;text-align:center;}</style></head ><body><p><ahref=https://www.dotcpp.com/>ลิงก์ธรรมดา</a></p></body></html>ผลลัพธ์ที่แสดงมีดังนี้:
2. จะกำหนดรูปแบบลิงค์ด้วย CSS ได้อย่างไร?
ต่อไปนี้เป็นคุณสมบัติ CSS พื้นฐานสำหรับลิงก์:
(1) คุณลักษณะสี
คุณสมบัติ CSS นี้ใช้เพื่อเปลี่ยนสีของข้อความลิงก์
ไวยากรณ์:
ก{สี:สี_ชื่อ;}(2) คุณลักษณะแบบอักษรตระกูล
คุณสมบัตินี้ใช้เพื่อเปลี่ยนประเภทแบบอักษรของลิงก์โดยใช้คุณสมบัติตระกูลแบบอักษร
ไวยากรณ์:
{แบบอักษรครอบครัว: ชื่อครอบครัว;}(3) คุณลักษณะการตกแต่งข้อความ
แอ็ตทริบิวต์นี้ใช้เพื่อลบหรือเพิ่มขีดเส้นใต้และการแก้ไขลิงก์อื่นๆ เป็นหลัก
ไวยากรณ์:
ก {การตกแต่งข้อความ: ไม่มี;}ตัวอย่าง:
<style>/*ตั้งค่าขนาดตัวอักษรเพื่อปรับปรุงการมองเห็น*/p{font-size:2rem;}/*ลบการขีดเส้นใต้โดยใช้แอตทริบิวต์การตกแต่งข้อความ*/a{text- decoration:none;}/*คุณยังสามารถใช้ สไตล์ต่อไปนี้ เพิ่มขีดเส้นใต้ text- decoration:underline;*/</style>(4) คุณลักษณะสีพื้นหลัง
คุณสมบัตินี้ใช้เพื่อกำหนดสีพื้นหลังของลิงก์
ไวยากรณ์:
ก{สีพื้นหลัง:สี_ชื่อ;}