عن smashing magazine

مدونة عربية متخصصة في css

روابط ب css

سنستعمل css “لتخصيص” بعض الانواع من الروابط كتلك التي تكون عبارة عن ملف pdf او doc أو روابط عادية
الصورة التالية توضح ما سنحصل عليه من هذا الدرس

screen

بعض أوامر css التي سنستخدمها هنا، لا تعمل مع IE6 لأنه لا يدعمها مع الأسف لكنها تعمل مع أخيه IE7
………………..

سنبدأ بتصميم قائمة ثم ننتقل الى فقرة تحتوي على نص

<ul id="nav">
	<li><a href="#">excel</a></li>
	<li><a href="#">document</a></li>
	<li><a href="#">powerpoint</a></li>
</ul>

لن نشرح مجددا طريقة تصميم قائمة، يمكن الرجوع للدرس السابق، واستعمال نفس الطريقة

وضعت عبارات excel, document .. فقط من اجل مزيد من التوضيح خصوصا ان هذه الملفات ستكون عبارة عن روابط من هذه الانواع من الملفات

<ul id="nav">
	<li><a href="./file.xls">excel</a></li>
	<li><a href="./file.doc">document</a></li>
	<li><a href="./file.ppt">powerpoint</a></li>
</ul>

يجب ان احترم امتداد كل ملف (mp3, html, doc, pdf, ppt, xls ….. الخ)

سنستعمل خاصية Attribute selectors ويمكنك القراءة عنها هنا، حيث لها عدة استعمالات، وتكتب بأشكال مختلفة حسب الشيء الذي تريد الحصول عليه (روابط، نصوص، صور ..).

p[title*="intro"]
a[href$=".html"]
object[type^="image/"]

سنتطرق في هذا الدرس الى الروابط لذك سنستعمل الامر التالي:

a[href="http://site.com"]
a[href$=".extension"]
a[href^="http://"]

حيث يمثل الرمز $ نهاية الرابط الذي سيبدا بامتداد نوع من انواع الملفات (.extension) مثل (.doc و .pdf .. )، لاحظ النقطة قبل الامتداد، بينما يمثل الرمز ^ بداية الرابط ..
اما القيمة value فيمكن ان تكون رابط من نوع http:// او بريد الكتروني mailto: او حتى رابط عادي يحمل القيمة rel مثل

<a rel="copyright">droits</a>

……
بما انني استعملت قائمة ul فساضيف اكواد css على ما كتبته في الدرس السابق ..

ul#nav li a[href$='.doc'] {
	background: url(doc.gif) no-repeat left center;
	padding: 0 0 0 20px;
}
ul#nav li a[href$='.xls'] {
	background: url(spread.gif) no-repeat left center;
	padding: 0 0 0 20px;
}
ul#nav li a[href$=".ppt"] {
	background: url(pres.gif) no-repeat left center;
	padding: 0 0 0 20px;
}

عند كل نوع من الامتدادات، اضفت خلفية على شكل ايقونة مع التحكم في مكانها (يمين، يسار ..) .. الخ
وفي النص، ساستعمل روابط من نوع اخر (رابط http:// .. )

p a[href^='http://'] {
  background: url(link.gif) no-repeat right top;
  padding: 0 14px 0 0;
}
 
p a[rel~="copyright"]{
  color:#f00
}

كود xhtml:

 
Please notice: .. <a href="http://google.com">google</a> and
approaches which you can use in your future projects ..

screen

screen

تطبيق الدرس سيساعد على فهم attribute selectors حيث ان لها استعمالات عديدة ..
وكالعادة لا يوجد ملفات جاهزة، لكن توجد هدية عبارة عن إيقونات مقدمة من google docs وايقونات اخرى متنوعة

screen

تحميل الإيقونات
صفحة demo

هذه التدوينة نشرت بتاريخ: الخميس 7 أغسطس 2008 و مصنفة تحت تصنيف دروس. يمكنك متابعة أي تعليقات عبر رابط RSS 2.0. كل من التعليقات و التعقيبات مغلقة حالياً.

13 تعليقات

  1. Fayez قال:
    7 أغسطس 2008 عند 3:24 م

    السلام عليكم ورحمة الله
    درس رائع و جميل

    و ياليت تضيف صفحات حية (demo) لكل درس

    :)

    بارك الله فيك

  2. cssbit قال:
    7 أغسطس 2008 عند 4:56 م

    وعليكم السلام ورحمة الله
    بكل سرور اخي فايز

    ساضيف demo ابتداء من الدروس الجديدة
    شكرا لتعقيبك

  3. cssbit قال:
    7 أغسطس 2008 عند 8:59 م

    وعليكم السلام ورحمة الله

    لم اتوقع هذا الهجوم بسبب عدم ادراج صفحات حية demo ؟؟؟ الله يستر
    ابتداء من الدروس المقبلة ستكون هناك صفحات demo و download ايضا
    ما رايك اخي عبد االهادي ؟

  4. cssbit قال:
    7 أغسطس 2008 عند 10:14 م

    تمت إضافة صفحة demo

  5. لوّن قال:
    7 أغسطس 2008 عند 11:28 م

    معلومات جديدة شكرا ً جزيلا ً …

  6. عمر الدليمي قال:
    8 أغسطس 2008 عند 10:21 ص

    شكراً أخي .. فكرة رائعة :) ..
    وأطلب منك طلباً صغيراً .. أن تجعل الخط المستخدم في عموم الموقع هكذا:
    tahoma,arial, serif فهذا يسهل القراءة في الأنظمة غير وندوز :) .. وشكراً

  7. cssbit قال:
    8 أغسطس 2008 عند 6:36 م

    لون:
    العفو عزيزي :)
    اسف تعليقك ذهب مباشرة الى spam رغم انه لا يحتوي على اي روابط

    عمر الدليمي:
    العفو، هل تقصد theme المدونة ام شيء اخر

    مع التحية

  8. عبد الهادي قال:
    11 أغسطس 2008 عند 12:58 م

    شكرا لك أخي على تعديل التدوينة وإضافة المطلوب.. نعم الرجل أنت ^_^
    بالنسبة لاقتراح الأخ عمر فإنني أرى أن الخط المستخدم هو tahoma أصلا، أم لعله يعني شيئا آخر؟ عموما لك الكرة أخي ^_^
    موفق ومني لك أرق تحية..

  10. المصمم توقيع قال:
    20 أغسطس 2008 عند 6:39 ص

    موضوع جميل.. للأسف هذه التقنية المتقدمة لا يمكن استخدامها -عملياً- بعد لقلة الدعم من المتصفحات.

    ما الهدف من دخل عنصر القائمة؟

    والسـلام

  11. cssbit قال:
    20 أغسطس 2008 عند 11:03 ص

    عذرا اخي المصمم توقيع
    لم افهم سؤال

    مع التحية

  12. عبدالملك الثاري قال:
    22 أغسطس 2008 عند 12:42 ص

    المبدع cssbit شكراً لك يالغالي على هالطرح الرائع , انا استخدمتها في نص مثل ما طرحت وليست في قائمة طبعاً القائمه بإمكان إستخدامها وتعمل بشكل سليم لكن بالنسبه في نص كما طرحت

    وفي النص، ساستعمل روابط من نوع اخر (رابط http:// .. )

    ضبطت معي في الفايرفوكس لكنها لم تضبط في الإكسبلورر حيث ان الوسم a لا يتفاعل مع padding في الإكسبلورر تضهر صوره خلفيه لكنها ليست مزاحه قليلاً

    فما الحل, وشكراً لك