تغيير تصميم القائمة في CSS | قوائم CSS

 

هناك العديد من السمات في CSS لقوائم التنسيق. في هذا الدرس، سنتعرف على السمات.


هناك نوعان رئيسيان من القوائم في HTML:

القوائم غير المرتبة (<ul>)  
القوائم المتسلسلة (<ol>) - يتم تمييز عناصر القائمة بالأرقام والحروف. 

تسمح لنا سمات CSS للقوائم بما يلي:

   استخدام إشارات مرجعية مختلفة لعناصر قائمتك
   استخدام إشارات مرجعية مختلفة لعناصر القائمة غير المتسلسلة
  ● استخدام الصور كعلامات لعناصر القائمة
   تحدد صورة خلفية لقائمتك وعناصرها

استخدام إشارات مرجعية مختلفة لعناصر القائمة 

باستخدام سمة list-style-type، يمكنك تحديد نوع العلامة لعناصر القائمة.

يوضح المثال التالي بعض هذه العلامات:

ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}


بعض القيم في المثال أعلاه لقوائم متسلسلة وبعضها لقوائم غير متسلسلة.


استخدام الصورة كإشارة مرجعية

تُستخدم سمة list-style-image لتحديد صورة الإشارة المرجعية في القائمة:

ul {
list-style-image: url('sqpurple.gif');
}

 وضع الإشارات المرجعية في القائمة

تُستخدم خاصية list-style-position لتحديد ما إذا كانت الإشارات المرجعية يجب أن تكون داخل القائمة أو خارجها.

ul {
list-style-position: inside;
}

إزالة الإعدادات الافتراضية

نوع القائمة: لا شيء يمكن استخدامه لإزالة المؤشرات والمسامير. لاحظ أن القائمة لا تزال تحتوي على قيمة افتراضية margin و padding. لحذفه، أضف قيمة margin:0 و margin:0 إلى <ul> أو <ol>:


ul {
list-style-type: none;
margin: 0;
padding: 0;
}

سمة نمط القائمة list-style  (سمة مختصرة)

سمة list-style هي سمة مختصرة. يمكن استخدامه لتعيين جميع سمات القائمة في إشعار واحد:

ul {
list-style: square inside url("sqpurple.gif");
}

عند استخدام سمة مختصرة، يكون ترتيب قيم السمة كما يلي:

list-style-type
list-style-position
list-style-image

إذا لم تكن أي من السمات المذكورة أعلاه في الإعلان، فسيتم استبدال قيمتها الافتراضية.


قوائم التصميم مع الألوان 

لتجميل القوائم، يمكن تصميمها بألوان مختلفة.

أي شيء مضاف إلى علامتي <ol> أو <ul> يؤثر على القائمة بأكملها. بينما السمات المطبقة على <li> العلامات تؤثر فقط على العنصر نفسه.

ol {
background: #ff9999;
padding: 20px;
}

ul {
background: #3399ff;
padding: 20px;
}

ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}

ul li {
background: #cce5ff;
margin: 5px;
}



كلمات مفتاحية: