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

By


يمكن تصميم عناصر 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;
}




ليست هناك تعليقات:

إرسال تعليق