المُعاصر

اثناء تصميم صفحات الويب نحتاج الى تخصيص طريقة عرض بعض عناصر Html ويتم ذلك عن طريق منحها خواص css خاصه بها ولهذا فنحن نسنتخدم ID’s و Classes … في هذه التدوينه سنتناول تعريف كل منهما وكيفية استخدامها .

لا يوجد ما يميز ID عن Class في CSS من حيث الاستخدام فما يمكنك القيام به باحدهما يمكنك القيام به بالاخر وتبقى لك الحرية في استخدام اي منهما تبعاً لرؤيتك و تقديرك اي منهما سيكون مناسب لعنصرك أكثر .

نظرة على Classes
- يمكن استخدام نفس class لاكثر من عنصر في الصفحة الواحده .
- يمكن استخدام اكثر من class للعنصر الواحد .

استخدام Classes
عند تعريف class في CSS يجب ان يسبق اسم الكلاس نقطة ( . ) بالشكل التالي :
( تذكر لا تبدأ اسم الكلاس برقم )

.paragraph{
	color:#FF0000;
	font-weight:bold;
}
.center{
	text-align:center;
}

في المثال السابق قمنا بتعريف كلاسين الاول اسميناه paragraph و الثاني center
الان علينا تحديد العناصر التي نرغب في تطبيق الكلاس عليها :

<p class="paragraph">
هذه فقرة ...
</p>
 
<p class="paragraph">
هذه فقرة أخرى ... !
</p>

في المثال السابق سيقوم المستعرض بتطبيق الخواص التي تم تحديدها في الكلاس paragraph على الفقرتين ( وعلي اي عناصر اخرى تم تحديد الكلاس paragraph لها ) اي ستظهر الفقرتين بخط عريض ولون أزرق .

حسنا .. ماذا اذا اردت ان اطبق اكثر من كلاس على عنصر واحد .. ؟
لتطبيق ذلك عليك كتابة اسماء الكلاسات مع ترك فراغ بين الاسماء بالشكل التالي :

<p class="paragraph center">
هذه فقرة ...
</p>

في المثال السابق سيتم تطبيق الخواص المحدده في الكلاسين paragraph و center اي ستعرض الفقرة بخط عريض ولون ازرق ومحاذاة الفقرة سيكون في الوسط .

نظرة على ID
- لكل عنصر id واحد .
- تحتوي الصفحة الواحدة على عنصر وحيد يحمل ID فريد ( خاص به ) .

يمكننا ان نشبة ID بالارقم التسلسلية للمنتجات و الكروت مسبقة الدفع ( كروت شحن الجوالات و الانترنت وغيرها ) .. فلكل منها رقم فريد خاص بها لا يمكن أن يتكرر .

استخدام ID’s :
عند تعريف ID في css علينا وضع ( # ) قبل اسم ID :
( تذكر لا تبدأ اسم ID برقم )

#paragraph1{
	color:#0000FF;
	font-weight:bold;
}

الان علينا ان نحدد ما هو العنصر الوحيد الذي نريد تطبيق هذه الخواص عليه :

<p id="paragraph1">
هذه فقرة ...
</p>

استخدام اسماء ID’s في الروابط :
تتميز ID بامكانية استخدامها في الروابط حيث سيؤدي الرابط الى العنصر الذي يحمل ID الذي استخدمناه في الرابط :

<a href="#paragraph1">الانتقال الى الفقرة</a>

يجب وضع # قبل اسم ID المراد الانتقال اليه في الرابط .
بالضغط على ” الانتقال الى الفقرة ” سينتقل المستعرض الى الفقرة التي تحمل ID باسم paragraph1 . وستلاحظ تغير مسار الصفحة في شريط العنوان في المستعرض باضافة #paragraph1 الى مسار الصفحة الحالية :

http://www.yourpath.com/example.html#paragraph1

يمكن للعنصر الواحد ان يحتوي على id و class معا

<p id="item1" class="paragraph">
هذه فقرة أخرى ... !
</p>

تخصيص class او ID لعنصر معين :
يمكنك تخصيص Class او ID لعنصر معين لا يتم تطبيق خواصهما الا على هذا العنصر فقط ويتم ذلك عن طريق وضع اسم العنصر قبل اسم Cass او ID … دعني اوضح بمثال :

اكواد css

.example{
	font-family:Arial;
	font-size:12pt;
	font-weight:bold;
}
p.example{
	color:#FF0000;
}
h1.example{
	color:#0000FF;
}

اكواد html

<h1 class="example">هذا عنوان ..</h1>
 
<p class="example">
هذه فقرة ...
</p>

لنشرح المثال …
اولا عرفت class باسم example بخط عريض من نوع Arial و حجم 12pt ثم بعد ذلك حددت بان اي فقرة تحمل كلاس example تعرض بلون أحمر و حددت بان اي عنوان يحمل الكلاس example يعرض بلون ازرق.. مع الاحتفاظ بخواص الكلاس example الخاصة بالخط لكل من الفقرة و العنوان .

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

الوسوم: css, عين على CSS