เมื่อเราออกแบบเว็บไซต์ บางครั้งเราจำเป็นต้องสร้างสไตล์ที่แตกต่างกันตามคุณลักษณะขององค์ประกอบของหน้า ตัวอย่างเช่น การแสดงไอคอนลิงก์ที่แตกต่างกันสำหรับประเภทลิงก์ที่แตกต่างกัน ตัวเลือก CSS เป็นเทคโนโลยีที่มีประโยชน์มาก ซึ่งทำให้เราสามารถสร้างเอฟเฟกต์บางอย่างได้อย่างง่ายดาย วันนี้เราจะแนะนำตัวเลือกแอตทริบิวต์ CSS โดยการสร้างรูปแบบลิงก์ส่วนบุคคล
มาดูการสาธิตก่อน:
ดังที่คุณเห็นในภาพด้านบน เราได้กำหนดสไตล์ที่แตกต่างกันสำหรับลิงก์แต่ละประเภท: เมื่อค่าของแอตทริบิวต์ href ของลิงก์ a คือลิงก์อีเมล "mailto" ไอคอนเมลจะแสดงอยู่ด้านหลังลิงก์ เป็นไฟล์ word ไอคอนคำเอกสารจะปรากฏที่ด้านหลัง เมื่อที่อยู่ลิงก์เป็น mp3 ไอคอนเครื่องเล่นเพลงจะปรากฏขึ้น เมื่อที่อยู่ลิงก์มี "qianduan.net" ไอคอนหน้าแรกจะปรากฏขึ้น
... มันง่ายมากที่จะใช้ฟังก์ชั่นดังกล่าว ก่อนอื่นมาดูที่ไวยากรณ์ของตัวเลือกแอตทริบิวต์ CSS:
ควรสังเกตว่าตัวเลือก CSS โดยไม่คำนึงถึงเวอร์ชัน CSS 2.1 หรือ CSS 3 ได้รับการสนับสนุนโดย IE7 และ IE8 เช่นเดียวกับ webkit, Gecko core และ Opera เฉพาะเบราว์เซอร์ที่ต่ำกว่า IE6 เท่านั้นที่ไม่รองรับ
เอาล่ะ เรามาปรับใช้สไตล์เหล่านี้กันดีกว่า:
1. รูปแบบพื้นฐานของลิงก์ ขั้นแรก เราได้เตรียมอิมเมจ CSS Sprites และรวมไอคอนทั้งหมดไว้ใน a.gif นี้
| { พื้นหลัง: url (a.gif) ไม่ทำซ้ำ 4px; ช่องว่างภายในขวา:18px; สี:#369; ความสูงของบรรทัด:24px; } |
ด้วยวิธีนี้ เราได้กำหนดรูปแบบเริ่มต้นสำหรับลิงก์ทั้งหมด และไอคอนลูกศรสีแดงเล็กๆ จะแสดงทางด้านขวาของลิงก์ทั้งหมด
2. กำหนดสไตล์ส่วนบุคคล ตอนนี้เรามากำหนดสไตล์ตามลำดับสำหรับลิงก์ประเภทต่างๆ กัน ที่จริงแล้ว สิ่งที่เราต้องทำในตอนนี้คือการกำหนดตำแหน่งภาพพื้นหลังที่แตกต่างกัน (ตำแหน่งพื้นหลัง):
mailtomailtoลิงก์เมลอยู่ในรูปของ href= " mailto:[email protected]" ค่าของแอตทริบิวต์ href เริ่มต้นด้วย mailto จากนั้นเราจะใช้รูปแบบ [att^=val]:
| a[href^="mailto:"] { ตำแหน่งพื้นหลัง: ขวา -242px; } |
| a[href$=".doc"] { ตำแหน่งพื้นหลัง: ขวา -160px } |
เอกสารในรูปแบบ PDF, Excel, MP3 และรูปแบบอื่น ๆ ก็ถูกนำมาใช้ด้วยวิธีนี้เช่นกัน
ลิงก์ที่มีฟิลด์ qianduan.net สำหรับลิงก์ที่มีสตริงที่ระบุ คุณสามารถใช้ [att*=val]:
| { พื้นหลัง: url (a.gif) ไม่ทำซ้ำ 4px; ช่องว่างภายใน-ขวา:18px;สี:#369;line-height:24px; - [href^="mailto:"] {พื้นหลังตำแหน่ง: ขวา -242px;} [href$=".doc"] {พื้นหลังตำแหน่ง: ขวา -161px} a[href$=".xls"] {พื้นหลังตำแหน่ง: ขวา -282px} a[href$=".pdf"] {พื้นหลังตำแหน่ง: ขวา -79px} [href$=".mp3"] {พื้นหลังตำแหน่ง: ขวา -204px} [href$=".swf"] {พื้นหลังตำแหน่ง: ขวา -120px} a[href$=".rar"] {พื้นหลังตำแหน่ง: ขวา -38px} a[href*="qianduan.net"] {พื้นหลัง-position:right -328px} |
และเมื่อเราใช้งาน เราไม่จำเป็นต้องเพิ่มคลาสเพิ่มเติม:
| เอกสาร Word |