تعتبر المحددات أو ما تعرف بال selectors جزء لا يمكن التخلي عنه عند تصميم موقعنا بال css و جيكويري و غيرها .
و بما أننا أحيانا نطمح للتطوير و ننسى أساسيات مهمة جدا , نجد أن عددا كبيرا جدا من مصممي الويب لا يستعملون إلّا نوعين من المحددات : "class." للكلاس , "id#" للـ ID !
هذه التدوينة ستساعدك حتما و تفيدك في تصميم مواقعك و تطويرها .
سنتعرف معا عن ماهيّة المحددات .
أنواع ال selectors , و طريقة إستعمالهم !
ماهي المحددات selectors ؟
المحددات تستعمل لإدراج بعض التعديلات على عنصر (element) معين دون غيره , أو مجموعة من العناصر في صفحة ويب معينة .
تختلف أنواع المحددات و تتعدد , لذا سنتعرض معا لمجموعة من المجددات مع تفسيرها و أمثلة لها .
1- محدد * :
غني عن التعريف , يستعمله غالبية مصممي المواقع , حيث يقوم بتحديد كل العناصر الموجودة في الصفحة و إضافة بعض التأثيرات أو التغييرات فيه .
مثال :
*{
margin:0px;
padding:0px;
font-family:tahoma;
font-size:15px;
background:red;
}
margin:0px;
padding:0px;
font-family:tahoma;
font-size:15px;
background:red;
}
في هذا الكود قمنا بإختيار كل عناصر الصفحة , إدارج margin:0px; و padding:0px; و إختيار الخط و حجمه و إضافة خلفية حمراء له ..
2- محدد + :
ربما تكون هذه أول مرة تسمع فيها عن هذا المحدد , وظيفة هذا الأخير المحدد المجاور (adjacent) ,
فإن قلت :
فإن قلت :
div + p
فكأنك قلت له حدد لي العنصر p التابع للعنصر div مباشرة .مهم جدا :
هذا لا يعني أن p موجود داخل العنصر div , لا !!
هذا يعني أن العنصر div بعد إغلاقه , إذا كان هناك وسم p , فأضف للعنصر p ذلك مجموعة من التعديلات .
ممتاز !
هذا لا يعني أن p موجود داخل العنصر div , لا !!
هذا يعني أن العنصر div بعد إغلاقه , إذا كان هناك وسم p , فأضف للعنصر p ذلك مجموعة من التعديلات .
ممتاز !
مثال :
div + p{
background:red;
}
في هذا الكود قمنا بإختيار العنصر p الذي يأتي مباشرة بعد العنصر div , و أضفنا له خلفية حمراء .
2- محدد < :
يشبه إلى حد كبير إلى محدد div p , لكن الإختلاف بينهما أن div p يختار كل العناصر p الموجودة في العنصر div مهما كان المستوى , في حين أن بالمحدد < لا ينظر إلّا إلى المستوى الأول .
هنا قمنا يتحديد كل عنصر p حيث يكون "إبنا للعنصر الأب" و هو div .
3 - ["a[href="link
2- محدد < :
يشبه إلى حد كبير إلى محدد div p , لكن الإختلاف بينهما أن div p يختار كل العناصر p الموجودة في العنصر div مهما كان المستوى , في حين أن بالمحدد < لا ينظر إلّا إلى المستوى الأول .
div > p{
background:red;
}
background:red;
}
هنا قمنا يتحديد كل عنصر p حيث يكون "إبنا للعنصر الأب" و هو div .
3 - ["a[href="link
هنا كأنك طلبت كل عنصر a ذو attribut href بالرابط link .
و إضافة بعض التعديلات عليه .
مثال :
a[href="http://modawin-blogger.blogspot.com"]{
background:red;
}
background:red;
}
هذا ليس إلا جزء بسيطا جدا من المحددات في ال css , نتعرف معا إلى أنواع أخرى منها في جزء ثاني قريبا جدا .
تعليقك المشجع , و مشاركة التدوينة مع أصدقائك تشجعني على العمل و النشر و الإفادة .. شكرا ! ^^
هذا النص الغبي ، غير مقصود لقرائته . وفقا لذلك فمن الصعب معرفة متى وأين نهايته ، لكن حتى . فإن هذا النص الغبي ، ليس مقصود لقرائته . نقطة رجوع لسطر مدونة عرب ويب ترحب بك
تحويل كودإخفاء محول الأكواد الإبتساماتإخفاء