سنستعمل 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

الفهرس هو index الذي يوجد في مقدمة الكتاب او آخره، يضم عادة جميع اقسام وعناوين الكتاب مع ارقام الصفحات
يمكن استعمال الفهرس في صفحات موقعك لعرض بعض البيانات والصفحات ..

هذا الدرس يشرح طريقة لانجاز ذلك

دائما الحل السحري هو استعمال ul و li في انجاز هذا النوع من المهام
سنبدأ بكتابة قائمة بسيطة كما يلي

<ul id='menu'>
  <li><a href="#">home</a></li>
  <li><a href="#">contact</a></li>
  <li><a href="#">help</a></li>
  <li><a href="#">maps</a></li>
</ul>

وضعت علامتي تنصيص مفردة بدل المزدوجة على سبيل التغيير
بعض المطورين يستعملون ذلك لتقليل عدد bytes ما أمكن، على أي أنت حر

<ul id='menu'>
</ul><ul id="menu">
<!-- are the same -->
</ul>

…………..

الان أضيف أكواد css لأنسق القائمة، يمكنك تنسيقها وفق ما تريد من اطار او لون خلفية، نوع الخط وحجمه ..
عادة عندما نقرأ دروس الاخرين نسعى لانجاز نفس المثال، لماذا لا نجرب التغيير فقد نتعلم شيئا جديدا، فلست اقل شأنا او موهبة من كاتب الدرس ..

ul#menu {
	list-style: none;
	width: 500px;
	border: 1px solid #ddd;
	padding: .5em;
}
ul#menu li {
	margin: 0 0 5px;
	padding: .2em 0 0;
	font: .7em serif;
	text-transform: uppercase;
	color: #ccc;
	background: url(dote.gif) repeat-x 0 35%;
}

حسنا، ساشرح كل سطر مع ان الهدف من كل هذه الدروس هو “أفكار” لمطور الويب اكثر مما هي شرح لأوامر css ..

ul#menu {
	list-style: none;
	width: 500px;
}

لن تعرض bullet امام كل سطر في القائمة و bullet هي تلك الايقونة السوداء الصغيرة التي تظهر بشكل تلقائي عند استعمال الوسم li والتي يمكن اظهارها باشكال مختلفة
وضعت عرضا محددا للقائمة وهو 500px

ul#menu {
	border: 1px solid #ddd;
	padding: .5em;
}

وضعت إطارا للقائمة بلون رمادي #ddd مع توسيع محتوى القائمة ب نصف 1em من جميع الجوانب (يمكنك استعمال px او قيم أخرى، معنى التوسيع هنا هو ان تزيح المحتوى عن border كي لا تظهر العبارات متلاصقة مع الاطار)

أما هذا السطر

ul#menu li {
	margin: 0 0 5px;
}

فلكي أزيح كل item عن الذي اسفل منه، فالسطر السابق مكافئ لهذا السطر:

ul#menu li {
	margin-bottom: 5px;
}

……………
ثم احدد اللون وحجم الخط وشكله الذي سيكون هنا بحروف كبيرة

ul#menu li {
	font: .7em serif;
	text-transform: uppercase;
	color: #ccc;
}

واخيرا ساضع خلفية على شكل نقط dot تظهر مع كل item وبتعديل posistion ساجعل النقط تظهر اسفل العبارات ..

ul#menu li {
	background: url(dote.gif) repeat-x 0 35%;
}

الان سأضيف ارقاما قبل كل item واستعمل span لانني اريد ان اضيف تاثيرات على الارقام، الوسم span هو المناسب هنا، كما يمكن استعمال وسوم اخرى مثل code أو sub أو sup .. لكن من الافضل احترام كل tag ومكان استعماله

<ul id='menu'>
  <li><span>1</span> <a href="#">home</a></li>
  <li><span>2</span> <a href="#">contact</a></li>
  <li><span>3</span> <a href="#">help</a></li>
  <li><span>4</span> <a href="#">maps</a></li>
</ul>

هناك حكمة في وضع الارقام أول كل item ولم اضعها بعد a/ (الطريقتين تفيان بالغرض) والحكمة انه اذا تصفح الزائر القائمة بدون تفعيل css ستظهر له بشكل سليم هكذا:

من الافضل ؟

القائمة اذن ستظهر بهذه الطريقة:

……………..

كود css:

ul#menu li a {
 float: left;
 padding: 0 .5em;
 background: #fff;
 text-decoration: none;
}

جعلت الروابط تظهر على اليسار ووضعت خلفية بلون أبيض (سيتضح السبب من هذا بعد قليل)
تلاحظون في هذه الصورة ان مواضع الارقام قد تغيرت، كما ان الروابط لم تعد ضمن الإطار بمعنى ان اضفت رابطا جديد سيظهر اسفل الاطار ..

وبالتالي سارجع واضيف هذا السطر

ul#menu {
  overflow: auto;
}

وهكذا حلت المشكلة:

كود css:

ul#menu li span {
  float: right;
  padding: 0 .5em ;
  background: #FFF;
  font-size: 1.2em;
}

جعلت الارقام تتجه الى اليمين مع خلفية بيضاء (الخلفية البيضاء ستظهر في الارقام فقط والروابط فقط وبقية المساحة ستكون الخلفية عبارة عن نقط dot)
والا ستظهر هذه النقط في كامل li وهذا ليس في صالح ما نحن بصدد القيام به ..

النتيجة الان كالتالي:

ما أبشعها من قائمة ؟؟ اسف لأنني خيبت ظنكم ههه

بما اننا استعملنا float بقيمتين مختلفتين right و left يجب ان نجد حلا لكي يظهر كل سطر تحت الاخر بشكل متناسق، الحل السهل والمنطقي هو اضافة br عند نهاية كل رابط كما يلي:

<ul id='menu'>
  <li><span>1</span> <a href="#">home</a><br /></li>
  <li><span>2</span> <a href="#">contact</a><br /></li>
  <li><span>3</span> <a href="#">help</a><br /></li>
  <li><span>4</span> <a href="#">maps</a><br /></li>
</ul>

وطالما انني استعملت float من الأفضل ان اضيف خاصية clear: both لهذه br التي اضفتها

ul#menu li br {
  clear: both;
}

قائمتي اصبحت بالشكل التالي:

اذا حذفت الخلفية البيضاء التي اضفتها لكل من a و span يعني الروابط والارقام ستظهر بهذا الشكل

يمكنك استعمال الوان تحبها:

انتهى الدرس
لم اضع هذه المرة ملفات العمل لكي يسعى كل راغب في تطبيقه الى كتابة الاكود بنفسه ..
لكنني سأهديكم ملف مضغوط به ايقونات على شكل نقط مختلفة الشكل واللون ..

تحميل الإيقونات