الثلاثاء، 1 مارس 2016

تعرف على انواع اخرى من المحددات في css غير Class و ID
  • mohamed morabit, med morabit
  • محمد المرابط
الثلاثاء، 1 مارس 2016

تعتبر المحددات أو ما تعرف بال selectors جزء لا يمكن التخلي عنه عند تصميم موقعنا بال css و جيكويري و غيرها . و بما أننا أحيانا نطمح للتطوير و ننسى أساسيات مهمة جدا , نجد أن عددا كبيرا جدا من مصممي الويب لا يستعملون إلّا نوعين من المحددات : "class." للكلاس , "id#"للـ ID ! هذه التدوينة ستساعدك حتما و تفيدك في تصميم مواقعك و تطويرها بطريقة جديدة,

سنتعرف معا عن ماهيّة المحددات,و أنواع الـ selectors , و طريقة إستعمالهم !

ماهي المحددات الـ selectors ؟:

المحددات تستعمل لإدراج بعض التعديلات على عنصر (element) معين دون غيره , أو مجموعة من العناصر في صفحة ويب معينة . تختلف أنواع المحددات و تتعدد , لذا سنستعرض معا مجموعة من المجددات مع تفسيرها و أمثلة لها .

كيف تستعمل المحددات الـ selectors في css و html؟:

بطريقة مبسطة المحددات تستعمل للإشارة الى عنص معين في html داخل css بإعطائه اسم مميز عن غيره,
وهناك انواع من هذه المحددات النوع الاول هو محدد احادي اي عند استعماله على عنصر معين فسيتحكم فقط في هذا العنصر حتى و لو كان هناك عنصر اخر بنفس الاسم كالمحدد ID,
والنوع الثاني هو النوع الذي يمكن من التحكم في مجموعة من العناصر بنفس الاسم و نفس المحدد كالمحدد Class,
كيفية استعمال المحدد في html: 
<div class="هنا اسم المحدد"> <p>هذا مثال على نص </p> </div>
<div id="هنا اسم المحدد"> <p>هذا مثال على نص </p> </div>
 كيفية استدعاء هذا المحدد في css:
بالنسبة للمحدد class
.اسم المحدد{ background:#FFF;}
بالنسبة للمحدد id
#اسم المحدد{ background:#FFF;}

1- محدد * :

غني عن التعريف , يستعمله غالبية مصممي المواقع , حيث يقوم بتحديد كل العناصر الموجودة في الصفحة و إضافة بعض التأثيرات أو التغييرات فيه . 


مثال :
*{ 
margin:0px; 
padding:0px; 
font-family:tahoma; 
font-size:15px; 
background:red; 
 في هذا الكود قمنا بإختيار كل عناصر الصفحة , إدارج margin:0px; و padding:0px; و إختيار الخط و حجمه و إضافة خلفية حمراء له ..

2- محدد + :

 ربما تكون هذه أول مرة تسمع فيها عن هذا المحدد , وظيفة هذا الأخير المحدد المجاور (adjacent) ,
فإن قلت : div + p كأنك قلت له حدد لي العنصر p التابع للعنصر div مباشرة
مهم جدا : هذا لا يعني أن p موجود داخل العنصر div , لا !! هذا يعني أنه ان لم يجد p داخل وسم div سيبحث خارج الوسم بعد اغلاقه ,
مثال :
div + p{ 
background:red;
 }
 في هذا الكود قمنا بإختيار العنصر p الذي يأتي مباشرة بعد العنصر div , و أضفنا له خلفية حمراء .

3- محدد < :

يشبه الى حد كبير المحدد div p , لكن الإختلاف بينهما أن div p يختار كل العناصر p الموجودة في العنصر div مهما كان المستوى, في حين أن بالمحدد < لا ينظر إلّا إلى المستوى الأول . 
}div > p 
;background:red
{
 هنا قمنا يتحديد كل عنصر p حيث يكون "إبنا للعنصر الأب" و هو div .

3 - ["a[href="link

هنا كأنك طلبت كل عنصر a ذو attribut href بالرابط link . و إضافة بعض التعديلات عليه .
 a[href="http://modawin-blogger.blogspot.com"] {
 ; background:red
{ 
هذا ليس إلا جزء بسيطا جدا من المحددات في ال css , نتعرف معا إلى أنواع أخرى منها في جزء ثاني قريبا جدا . تعليقك المشجع , و مشاركة التدوينة مع أصدقائك تشجعني على العمل و النشر و الإفادة .. شكرا ! ^^ 




شارك الموضوع مع اصدقائك
mohamed morabit محمد المرابط
مصمم جرافيك و مطور ويب حر. حاصل على شهادة infographic design. مسوق بالعمولة سابق لدى شركة orange للاتصالات المغربية. لي خبرة 5سنوات في تطوير المواقع بالـ php , html5 , css3 , mysql , javascript ...