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  WallHack D3D, Best Hack For NA EU PH BR AND MORE, CROSSFIRE HACK
Tags
Show More
" Here you can search for everything you want and you will find it as soon as possible "

Scorpion

Welcome To The Biggest Site For Android Games And Apps You Can Find New Modded Games And Game Cheat & CrossFire Hacks You Can Find Daily Update Only Here Don’t Forget To Like Page in Facebook And Subscribe To Blog

Related Articles

Leave a Reply

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

Check Also

Close

Adblock Detected

Please consider supporting us by disabling your ad blocker