إذا أردت تغيير خلفية ال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 يتم تنسيقهم لوحدهم.

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