عند تصميم موقع ويب ، نحتاج أحيانًا إلى إنشاء أنماط مختلفة بناءً على سمات عناصر الصفحة ، على سبيل المثال ، لأنواع الارتباطات المختلفة ، يتم عرض أيقونات الارتباطات المختلفة. محددات CSS هي تقنية مفيدة للغاية ، من خلالها ، يمكننا بسهولة تحقيق تأثيرات معينة. اليوم سوف نقدم محدد الممتلكات من CSS من خلال إنشاء نمط رابط مخصص.
دعونا نلقي نظرة على المظاهرة أولاً:
كما يمكن رؤيته في الشكل أعلاه ، نحدد نمطًا مختلفًا لكل رابط: عندما تكون قيمة السمة HREF للرابط A هي رابط البريد "Mailto" ، يتم عرض أيقونة البريد الإلكتروني خلف الرابط ؛ عند استخدام ملف Word ، يتم عرض أيقونة وثيقة Word خلفها ؛
في الواقع ، من السهل جدًا تنفيذ هذه الوظيفة.
تجدر الإشارة إلى أن IE7 و IE8 Selector CSS بغض النظر عن إصدار CSS 2.1 أو CSS 3 ، كما أن متصفحات WebKit و Gecko Core فقط.
حسنًا ، دعنا ننفذ هذه الأنماط:
1. النمط الأساسي للرابط أولاً ، نقوم بإعداد صورة CSS Sprites ، وندمج جميع الرموز في هذا A.GIF.
| أ { الخلفية: URL (A.GIF) لا يكرر اليمين 4px ؛ حشو اليمين: 18 بكسل ؛ اللون:#369 ؛ Line-Leight: 24px ؛ } |
وبهذه الطريقة ، نحدد النمط الافتراضي لجميع الروابط ، وسيتم عرض رمز سهم أحمر صغير على الجانب الأيمن لجميع الروابط.
2. تحديد الأنماط المخصصة.
MailTomailto Rines في نمط HREF = "Mailto: [email protected]".
| a [href^= "mailto:"] {{ الخلفية -posity: اليمين -242px ؛ } |
نعتقد عمومًا أن جميع روابط ملف DOC موجودة بتنسيق HREF = "ABC.DOC" ، مما يعني أن عنوان الارتباط ينتهي بـ .DOC ، لذلك نحتاج إلى استخدام تنسيق [ATT $ = VAL]. النمط كما يلي:
| A [href $ = ". doc"] { خلفية الموضع: يمين -160 بكسل } |
يتم تنفيذ المستندات في PDF ، Excle ، تنسيقات MP3 أيضًا بهذه الطريقة.
الروابط التي تحتوي على حقول qianduan.net للروابط التي تحتوي على سلسلة معينة ، يمكنك استخدام [att*= val]:
| أ { الخلفية: URL (A.GIF) لا يكرر اليمين 4px ؛ Padding-Right: 18px ؛ Color:#369 ؛ Line-Height: 24px ؛ } a [href^= "mailto:"] {background -position: right -242px ؛} A [HREF $ = ". A [HREF $ = ". A [HREF $ = ". A [HREF $ = ". A [HREF $ = ". A [HREF $ = ". RAR"] {procession -position: right -38px} a [href*= "qianduan.net"] {background -position: right -328px} |
وعندما نستخدمه ، لا نحتاج إلى إضافة فصل إضافي:
| <a href = "abc.doc"> مستند كلمة </a> |