CSS – القوائم Lists

القوائم lists من اكثر عناصر HTML استخداما وكما ف درس html هناك نوعين من القوائم: المرتبة والغير مرتبة. لكن يوجد ايضا مجموعة من خصائص CSS تتحكم في شكل القوائم خصوصا شكل العلامات:

• list-style-type : هي تستخدم لتغير شكل علامات القائمة مثلا بدلا من النقاط الدائرية تكون مربعات او بدلا من الارقام للترتيب تكون الاحرف الهجائية.
• list-style-image: تستخدم لجعل شكل علامات القائمة صورا
• list-style-position: تحدد اذا ما كان علامات القائمة جزءا من المحتوى ام خارجة.
• list-style: هي خاصية مجمعة للخواص السابقة.

خاصية شكل علامات القائمة list-style-type

تستخدم الخاصية list-style-type لتحديد شكل علامات القائمة وتختلف قيمتها اذا كانت القائمة مرتبة ordered او غير مرتبة unordered.

القوائم الغير مرتبة unordered lists

• none: تكون القائمة من غير علامات.
• disc: تكون العلامات عبارة عن دائرة مصمتة.
• circle: تكون العلامات عبارة عن دائرة مفرغة.
• square : تكون العلامات عبارة عن مربعات مفرغة.

.circleList{
	list-style-type:circle;
}

.squareList{
	list-style-type:square;
}

القوائم المرتبة ordered lists

• decimal: تكون علامات القائمة عبارة عن الارقام العشرية.
• decimal-leading-zero: تكون علامات القائمة عبارة عن الارقام العشرية وتكون الارقام مسبوقة باصفار.
• lower-alpha: تكون علامات القائمة عبارة عن الابجدية وتكون حالة الحروف صغيرة small.
• upper-alpha: تكون علامات القائمة عبارة عن الابجدية وتكون حالة الحروف كبيرة Capital.
• lower-roman: تكون علامات القائمة عبارة عن الارقام اليونانية وتكون حالة الحروف صغيرة small.
• upper-roman: تكون علامات القائمة عبارة عن الارقام اليونانية وتكون حالة الحروف كبيرة Capital.

.decimalLeadingZeroList{
	list-style-type:decimal-leading-zero;
}

.lowerAlphaList{
	list-style-type:lower-alpha;
}

خاصية شكل صور القائمة list-style-image

تستخدم الخاصية list-style-image لتحديد صورلعلامات القائمة

.imageStyleList{
	list-style-image: url("/image");
}

خاصية موضع علامات القائمة list-style-position

تستخدم خاصية list-style-position لتحدد اذا ما كان علامات القائمة جزءا من المحتوى ام خارجة.

.outSideContent {
  list-style-position: outside;
   
  border-width: 2px;
  background-color: gray;
}
 
.inSideContent {
  list-style-position: inside;
  border-width: 2px;
   
  background-color: yellow;
}

الخاصية المجمهة لعلامات القائمة list-style

هي خاصية تجمع الخواص السابقة و يكون ترتيبها list-style-type ثم list-style-position ثم list-style-image .

.allPropertiesList {
  list-position: square inside url("sqpurple.gif");
}