عندما نقوم بتصميم موقع ويب، نحتاج أحيانًا إلى إنشاء أنماط مختلفة بناءً على سمات عناصر الصفحة، على سبيل المثال، عرض رموز ارتباطات مختلفة لأنواع ارتباطات مختلفة. تعد محددات CSS تقنية مفيدة جدًا، حيث يمكننا من خلالها تحقيق تأثيرات معينة بسهولة. سنقدم اليوم محدد سمات CSS عن طريق إنشاء نمط رابط مخصص.
دعونا نلقي نظرة على العرض التوضيحي أولاً:
كما ترون في الصورة أعلاه، فقد قمنا بتحديد أنماط مختلفة لكل نوع من الروابط: عندما تكون قيمة سمة href للرابط أ هي رابط البريد الإلكتروني "mailto"، يتم عرض رمز البريد خلف الرابط عند الارتباط هو ملف Word، يتم عرض أيقونة مستند 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) عدم التكرار لليمين 4 بكسل; الحشو الأيمن: 18 بكسل؛ اللون: #369؛ ارتفاع الخط: 24 بكسل؛ } |
بهذه الطريقة، قمنا بتحديد النمط الافتراضي لجميع الروابط، وسيتم عرض رمز سهم أحمر صغير على الجانب الأيمن لجميع الروابط.
2. تحديد الأنماط المخصصة الآن دعونا نحدد الأنماط المعنية لأنواع مختلفة من الروابط، في الواقع، كل ما يتعين علينا القيام به في هذا الوقت هو تحديد مواضع مختلفة لصور الخلفية (موضع الخلفية):
mailtomailtoرابط البريد على شكل href=. " mailto:[email protected]"، قيمة السمة href الخاصة بها تبدأ بـ mailto، ثم نستخدم التنسيق [att^=val]:
| أ[href^="مايلتو:"] { موضع الخلفية: يمين -242 بكسل؛ } |
| أ[href$=".doc"] { موضع الخلفية: يمين -160 بكسل } |
يتم أيضًا تنفيذ المستندات بتنسيق PDF وexcel وmp3 والتنسيقات الأخرى من خلال هذه الطريقة.
الروابط التي تحتوي على حقل qianduan.net بالنسبة للروابط التي تحتوي على سلسلة معينة، يمكنك استخدام [att*=val]:
| أ { الخلفية: url(a.gif) عدم التكرار لليمين 4 بكسل; الحشو على اليمين: 18px;اللون:#369;ارتفاع الخط:24px; } أ[href^="mailto:"] {background-position:right -242px;} أ[href$=".doc"] {background-position:right -161px} أ[href$=".xls"] {background-position:right -282px} أ[href$=".pdf"] {background-position:right -79px} أ[href$=".mp3"] {background-position:right -204px} أ[href$=".swf"] {background-position:right -120px} أ[href$=".rar"] {background-position:right -38px} a[href*="qianduan.net"] {background-position:right -328px} |
وعندما نستخدمه، لا نحتاج إلى إضافة فئات إضافية:
| مستند Word |