السلام عليكم

قد يرغب بعض منا بتغيير تنسيق كل قائمة Widget لوحدها مما يميزها عن غيرها والتحكم في تنسيق كل قائمه لوحدها << بمعنى أن القائمة 1 تحمل لون الخلفية ازرق , والقائمه 2 تحمل لون الخلفية أخضر >> وهكذا,,,

سأقوم بأذن الله بالتطبيق على لون الخلفية لكل قائمه.

أولاً: نبدأ بكتابة وسوم الـ HTML :

<body>

<div id="sidebar"><!--بداية وسم السايدبار-->

<div class="widget gray">
<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 class="widget green">
<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 class="widget red">
<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><!--تسكيرة وسم السايدبار-->

</body>


ملاحظة: نكتب وسوم الـ HTML داخل وسم body:

<body>...هنا تكتب وسوم الـ HTML....</body>

والتنسيق بـ CSS :

#sidebar {
	width:300px;
	background:#333366;
	border:1px solid #000;
	margin:auto;
	padding:8px;
	float:right;
}
.widget {
	border:1px solid #000;
	padding:4px;
	margin:5px;
	text-align:right;
}
.widget h2 {
	color:#fff;
	border-bottom:2px solid #fff;
}
.widget ul {

}
.widget li {
	font-family:tahoma;
	font-size:13px;
	color:#fff;
	list-style:none;
}
.widget li a {
	color:#fff;
	text-decoration:none;
}
.widget li a:hover {
	color:#000;
	text-decoration:none;
}
.gray {/*تنسيق خاص لقائمة التصنيفات*/
	background:gray;
}
.red {/*تنسيق خاص لقائمة روابط*/
	background:red;
}
.green {/*تنسيق خاص لقائمة اخرى*/
	background:green;
}

اعتقد أن الـ CSS واضحة ولا تحتاج الى شرح , لكن لنشرح الـ HTML
أولاً فتحنا وسم السايدبار وأغلقناه وكتبنا بداخله وسوم القائمه:

<div class="widget gray">
<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>

استخدمنا هنا معرفان للقائمه الأولى وهما widget gray تكتبان بجانب بعضهما وبينهم مسافه :
widget : هذا المعرف عام بتنسيق القائمه والهامش واتجاه النص , هو عام لكل القوائم
gray : هذا المعرف يخص هذه القائمه فقط وانما وضعناه لكي نخصص لهذه القائمه لون الخلفية رمادي .

<div class="widget green">
<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>

widget : تم شرحه .
green : هذا المعرف خاص فقط لقائمة [روابط] وهي تحمل لون الخلفية أخضر.

<div class="widget red">
<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>

widget : كما تم الشرح أعلاه.
red : هذا المعرف يخص هذه القائمه فقط [اخرى] وهو يحمل لون الخلفية أحمر.

ثانياً : التنسيق بـ CSS :

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

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

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

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

واتمنى ان يكون الشرح واضح لأني كتبته في عجلةٍ من أمري
وأي استفسار أو شيء غير مفهوم آمل أن يطرح في التعليقات
والسلام عليكم

يوسف العتيبي.

• • •