سنستعمل css “لتخصيص” بعض الانواع من الروابط كتلك التي تكون عبارة عن ملف pdf او doc أو روابط عادية
الصورة التالية توضح ما سنحصل عليه من هذا الدرس
بعض أوامر 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 ..
تطبيق الدرس سيساعد على فهم attribute selectors حيث ان لها استعمالات عديدة ..
وكالعادة لا يوجد ملفات جاهزة، لكن توجد هدية عبارة عن إيقونات مقدمة من google docs وايقونات اخرى متنوعة
السلام عليكم ورحمة الله
درس رائع و جميل
و ياليت تضيف صفحات حية (demo) لكل درس
:)
بارك الله فيك
وعليكم السلام ورحمة الله
بكل سرور اخي فايز
ساضيف demo ابتداء من الدروس الجديدة
شكرا لتعقيبك
وعليكم السلام ورحمة الله
لم اتوقع هذا الهجوم بسبب عدم ادراج صفحات حية demo ؟؟؟ الله يستر
ابتداء من الدروس المقبلة ستكون هناك صفحات demo و download ايضا
ما رايك اخي عبد االهادي ؟
تمت إضافة صفحة demo
معلومات جديدة شكرا ً جزيلا ً …
شكراً أخي .. فكرة رائعة :) ..
وأطلب منك طلباً صغيراً .. أن تجعل الخط المستخدم في عموم الموقع هكذا:
tahoma,arial, serif فهذا يسهل القراءة في الأنظمة غير وندوز :) .. وشكراً
لون:
العفو عزيزي :)
اسف تعليقك ذهب مباشرة الى spam رغم انه لا يحتوي على اي روابط
عمر الدليمي:
العفو، هل تقصد theme المدونة ام شيء اخر
مع التحية
شكرا لك أخي على تعديل التدوينة وإضافة المطلوب.. نعم الرجل أنت ^_^
بالنسبة لاقتراح الأخ عمر فإنني أرى أن الخط المستخدم هو tahoma أصلا، أم لعله يعني شيئا آخر؟ عموما لك الكرة أخي ^_^
موفق ومني لك أرق تحية..
[...] روابط ب css [...]
موضوع جميل.. للأسف هذه التقنية المتقدمة لا يمكن استخدامها -عملياً- بعد لقلة الدعم من المتصفحات.
ما الهدف من دخل عنصر القائمة؟
والسـلام
عذرا اخي المصمم توقيع
لم افهم سؤال
مع التحية
المبدع cssbit شكراً لك يالغالي على هالطرح الرائع , انا استخدمتها في نص مثل ما طرحت وليست في قائمة طبعاً القائمه بإمكان إستخدامها وتعمل بشكل سليم لكن بالنسبه في نص كما طرحت
ضبطت معي في الفايرفوكس لكنها لم تضبط في الإكسبلورر حيث ان الوسم a لا يتفاعل مع padding في الإكسبلورر تضهر صوره خلفيه لكنها ليست مزاحه قليلاً
فما الحل, وشكراً لك
شكراً للمشاركة
http://www.css-edge.blogspot.com