เมื่อออกแบบเว็บไซต์บางครั้งเราจำเป็นต้องสร้างสไตล์ที่แตกต่างกันตามแอตทริบิวต์ขององค์ประกอบหน้าเช่นสำหรับประเภทลิงก์ที่แตกต่างกันไอคอนลิงก์ที่แตกต่างกันจะปรากฏขึ้น ตัวเลือก CSS เป็นเทคนิคที่มีประโยชน์มากผ่านพวกเขาเราสามารถบรรลุเอฟเฟกต์บางอย่างได้อย่างง่ายดาย วันนี้เราจะแนะนำตัวเลือกอสังหาริมทรัพย์ของ CSS โดยการสร้างรูปแบบการเชื่อมโยงส่วนบุคคล
มาดูการสาธิตก่อน:
ดังที่เห็นได้ในรูปด้านบนเรากำหนดรูปแบบที่แตกต่างกันสำหรับแต่ละลิงก์: เมื่อค่าของแอตทริบิวต์ HREF ของลิงค์ A คือ "Mailto" ลิงก์ Mail ไอคอนของอีเมลจะแสดงอยู่ด้านหลังลิงค์ เมื่อใช้ไฟล์คำว่าไอคอนเอกสารคำจะปรากฏขึ้นด้านหลัง
ในความเป็นจริงมันเป็นเรื่องง่ายมากที่จะใช้ฟังก์ชั่นดังกล่าว
ควรสังเกตว่า IE7 และ IE8 สนับสนุนตัวเลือก CSS โดยไม่คำนึงถึง CSS 2.1 หรือ CSS 3 เวอร์ชันและ WebKit, Gecko Core และ Opera ยังรองรับเฉพาะเบราว์เซอร์ด้านล่าง IE6
โอเคใช้สไตล์เหล่านี้กันเถอะ:
1. รูปแบบพื้นฐานของการเชื่อมโยงก่อนเราเตรียมภาพ CSS Sprites และเรารวมไอคอนทั้งหมดเข้ากับ A.GIF นี้
| A { ความเป็นมา: URL (A.GIF) ไม่มีการทำซ้ำ 4px; Padding-Right: 18px; สี:#369; ความสูงของสาย: 24px; - |
ด้วยวิธีนี้เรากำหนดรูปแบบเริ่มต้นสำหรับลิงก์ทั้งหมดและไอคอนลูกศรสีแดงขนาดเล็กจะปรากฏขึ้นทางด้านขวาของลิงก์ทั้งหมด
2. กำหนดรูปแบบส่วนบุคคล
ลิงก์ Mailtomailto Mail อยู่ในรูปแบบของ href = "mailto: [email protected]"
| a [href^= "mailto:"] {{ ความเป็นมา -ความโดดเด่น: ขวา -242px; - |
โดยทั่วไปเราเชื่อว่าลิงก์ไฟล์ DOC ทั้งหมดอยู่ในรูปแบบของ HREF = "ABC.DOC" ซึ่งหมายความว่าที่อยู่ลิงก์จะลงท้ายด้วย. doc ดังนั้นเราจึงต้องใช้รูปแบบของ [ATT $ = VAL] สไตล์มีดังนี้:
| a [href $ = ". doc"] { ตำแหน่งพื้นหลัง: ขวา -160px - |
เอกสารใน PDF, excle, รูปแบบ mp3 ยังถูกนำไปใช้ในลักษณะนี้
ลิงค์ที่มีฟิลด์ Qianduan.net สำหรับลิงก์ที่มีสตริงที่แน่นอนคุณสามารถใช้ [Att*= val]:
| A { ความเป็นมา: URL (A.GIF) ไม่มีการทำซ้ำ 4px; Padding-Right: 18px; Color:#369; Line-Height: 24px; - a [href^= "mailto:"] {ตำแหน่งพื้นหลัง: ขวา -242px;} a [href $ = ". doc"] {ตำแหน่งพื้นหลัง: ขวา -161px} a [href $ = ". xls"] {ตำแหน่งพื้นหลัง: ขวา -282px} a [href $ = ". pdf"] {ตำแหน่งพื้นหลัง: ขวา -79px} a [href $ = ". mp3"] {ตำแหน่งพื้นหลัง: ขวา -204px} a [href $ = ". swf"] {ตำแหน่งพื้นหลัง: ขวา -120px} a [href $ = ". rar"] {ตำแหน่งพื้นหลัง: ขวา -38px} a [href*= "qianduan.net"] {ตำแหน่งพื้นหลัง: ขวา -328px} |
และเมื่อเราใช้มันเราไม่จำเป็นต้องเพิ่มคลาสพิเศษ:
| <a href = "abc.doc"> เอกสารคำ </a> |