Like And Win VIP Hack
Click Like To WIN 30 Day VIP Hack

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

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

Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0
 

يمكن تصميم عناصر 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;
}
Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0

0 Comments ON " [ دورة CSS ] الدروس المتقدمة CSS – الدرس الث... "
leave a response

*







Copyright © All Rights Reserved 2014→2017 To Add-Fast.CoM