فواصل » شرح،تغيير،خلفيه،القوائم،بلغه،css https://portal.fwasl.com Wed, 16 Oct 2019 18:49:35 +0000 ar hourly 1 https://wordpress.org/?v=3.9.40 تغيير خلفية القوائم css https://portal.fwasl.com/%d8%aa%d8%ba%d9%8a%d9%8a%d8%b1-%d8%ae%d9%84%d9%81%d9%8a%d8%a9-%d8%a7%d9%84%d9%82%d9%88%d8%a7%d8%a6%d9%85-css/ https://portal.fwasl.com/%d8%aa%d8%ba%d9%8a%d9%8a%d8%b1-%d8%ae%d9%84%d9%81%d9%8a%d8%a9-%d8%a7%d9%84%d9%82%d9%88%d8%a7%d8%a6%d9%85-css/#comments Wed, 04 Jan 2012 20:56:57 +0000 http://www.portal.fwasl.com/?p=5427 إذا أردت تغيير خلفية الWidget أو كل قائمة علي حديبشكل مميز عن غيرها والتحكم في التنسيق والشكل بمعنى أن القائمة الأولي تحمل لون الخلفية ازرق , والقائمهالثانيه تحمل لون الخلفية أخضر وهكذا,,, أي تكون كل قائمة منفرده بتمييز معين

سوف أتحدث في هذه التدوينه بإذن الله عن كيفية التحكم بلون خلفية كل قائمه منفصله

أولا: ابدأ بكتابة كود HTML

[html] <div>
<!–بداية وسم السايدبار–>
<div>
<h2>التصنيفات</h2>
<ul>
<li><a href="#">تصنيف 1</a></li>
<li><a href="#">تصنيف 2</a></li>
<li><a href="#">تصنيف 3</a></li>
<li><a href="#">تصنيف 4</a></li>
<li><a href="#">تصنيف 5</a></li>
</ul>
</div>
<div>
<h2>روابط</h2>
<ul>
<li><a href="#">رابط 1</a></li>
<li><a href="#">رابط 2</a></li>
<li><a href="#">رابط 3</a></li>
<li><a href="#">رابط 4</a></li>
<li><a href="#">رابط 5</a></li>
</ul>
</div>
<div>
<h2>اخرى</h2>
<ul>
<li><a href="#">رابط نصي</a></li>
<li><a href="#">رابط نصي</a></li>
<li><a href="#">رابط نصي</a></li>
<li><a href="#">رابط نصي</a></li>
<li><a href="#">رابط نصي</a></li>
</ul>
</div>
</div>
<!–تسكيرة وسم السايدبار–>
[/html]

[note] ملاحظة: نكتب وسوم الـ HTML داخل وسم body:
[/note] [html] …هنا تكتب وسوم الـ HTML….
[/html]

والأن مع التنسيق ب CSS

أقصد بها تنسيق الـمعرفات gray , green , red , ويتم تنسيق كلٍ على حده:

[html] .gray {/*تنسيق خاص لقائمة التصنيفات*/
background:gray;
}
.red {/*تنسيق خاص لقائمة روابط*/
background:red;
}
.green {/*تنسيق خاص لقائمة اخرى*/
background:green;
}
[/html]

حيثُ أن green يتم تنسيقها لوحدها وكذلك الـ red و gray يتم تنسيقهم لوحدهم.

وهكذا في بقية القوائم تستطيع تنسيق كل قائمه لوحدها
للمعاينه أضغط
هنا

]]> https://portal.fwasl.com/%d8%aa%d8%ba%d9%8a%d9%8a%d8%b1-%d8%ae%d9%84%d9%81%d9%8a%d8%a9-%d8%a7%d9%84%d9%82%d9%88%d8%a7%d8%a6%d9%85-css/feed/ 0