More

[ دورة CSS ] الدروس المتقدمة CSS – الدرس الثالث عشر – لواحق المنتقى

" Here you can search for everything you want and you will find it as soon as possible "

يمكن تصميم عناصر HTML من خلال لواحق معينة
من الممكن تصميم نموذج معين لعناصر HTML والتي تحتوي على لواحق معينة ليس فقط عند استخدام خاصية استدعاء التصميم الخاص مثل class و id
ملاحظة : تدعم خاصية لواحق المنتقى مع المتصفح IE7 و IE8 فقط وذلك بعد تعريف صفحة الويب !DOCTYPE ولكن هذه العملية غير مدعومة من خلال نسخة IE6 أو أقدم



لواحق المنتقى

في المثال التالي جميع العناصر التي تحتوي على اللاحقة العنوان [title]

[title]{
color:blue;
}

لاحقة المنتقى وقيمة المنتقى

يمكن تخصيص تصميم معين ليس فقط على لاحقة المنتقى وانما القيمة الموجودة مع تلك اللاحقة وفي المثال التالي سيتم تطبيق تصميم على كل عنصر HTML ويحتوي على لاحقة بالقيمة

 “Arabic-institute”

[title=Arabic-institute]{
border:5px solid green;
}

لاحقة المنتقى وقيمة المنتقى / قيم متعددة

في المثال التالي سيتم تطبيق تصميم معين على جميع العناصر التي تحتوي اللاحقة “العنوان” والتي تحتوي على قيمة معينة . تعمل هذه الطريقة اذا كانت اللاحقة تحتوي على قيم منفصلة
مثال :

[title~=hello] { color:blue; }

في المثال التالي تم تطبيق تصميم على جميع العناصر التي تحتوي على اللاحقة lang والتي تحتوي على قيمة مخصصة . تعمل هذه الطريقة اذا كانت اللاحقة تحتوي على وصلة ( – ) مع قيم أخرى :

[lang|=en] { color:blue; }

تصميم النماذج Forms

ان استخدام خاصية لاحقة المنتقى مساعدة و مفيدة جداً عند استخدام تصميم للنماذج بدون استخدام تصميم خاص class او id
مثال

input[type="text"]{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]{
width:120px;
margin-left:35px;
display:block;
}



You may also like  بطنكِ ممسوح في أسبوع مع هذه الخطوات البسيطة!
Show More
" Here you can search for everything you want and you will find it as soon as possible "

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Adblock Detected

Please consider supporting us by disabling your ad blocker