CSSقوائم التعداد

مفهوم قوائم التعداد

قوائم التعداد نوعان، قوائم مرتبة ( Order Lists ) يبدأ فيها كل عنصر برقم يدل على موقعه فيها أو قوائم غير مرتبة ( Unordered Lists ) حيث يكون هناك دائرة، مربع، رمز مخصص أو صورة في بداية كل عنصر.

الرقم أو الرمز الذي يظهر في بداية العنصر يسمى مُحدّد العنصر ( Item marker ) مهما كان شكله أو نوعه.

في هذا الدرس ستتعلم كيف تحدد نوع التنقيط و الترقيم، كيف تعرض صورة بدل التنقيط، كيف تحدد ما إن كان التنقيط أو الترقيم سيظهر بداخل أو خارج القائمة.

تحديد نوع الترقيم و التنقيط

يمكنك تحديد نوع الترقيم الذي سيظهر في القائمة التي تحصل عليها بواسطة الوسم <ol> باستخدام الخاصية list-style-type و تمرير إحدى القيم التالية لها.

في المثال التالي قمنا بتجربة أنواع الترقيم المختلفة.

.arabic-indic {
    list-style-type: arabic-indic;
}

.decimal {
    list-style-type: decimal;
}

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

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

.upper-alpha {
    list-style-type: upper-alpha;
}

.lower-roman {
    list-style-type: lower-roman;
}

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

.hebrew {
    list-style-type: hebrew;
}

يمكنك تحديد نوع التنقيط الذي سيظهر في القائمة التي تحصل عليها بواسطة الوسم <ul> باستخدام الخاصية list-style-type أيضاً و تمرير إحدى القيم التالية لها.

في المثال التالي قمنا بتجربة أنواع التنقيط المختلفة.

.disc {
    list-style-type: disc;
}

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

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

سواء كنت تستخدم قائمة نوعها <ol> أو <ul> يمكنك تمرير القيم التالية للخاصية list-style-type أيضاً.

في المثال التالي قمنا بإخفاء الترقيم و التنقيط.

ol, ul {
    list-style-type: none;
}

في المثال التالي قمنا بجعل القائمة الداخلية تستخدم نفس نوع الترقيم المُستخدم في القائمة الخارجية.

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

ol ol {
    list-style-type: inherit;
}

في المثال التالي قمنا بعرض رمز في بداية كل عنصر.

ol, ul {
    list-style-type: '- ';
}

في المثال التالي قمنا بعرض إيموجي في بداية كل عنصر.

ol, ul {
    list-style-type: '👉 ';
}

عرض صورة في بداية كل عنصر

في القائمة التي تحصل عليها بواسطة الوسم <ul> يمكنك عرض صورة صغيرة أو لون في بداية كل عنصر بدلاً من التنقيط التقليدي باستخدام الخاصية list-style-image و تمرير إحدى القيم التالية لها.

في المثال التالي قمنا بعرض صورة في بداية كل عنصر.

ul {
    list-style-image: url('circle.png');
}

في المثال التالي قمنا بعرض مربع متدرج الألوان في بداية كل عنصر.

ul {
    list-style-image: linear-gradient(to left bottom, red, blue);
}

في المثال التالي قمنا بعرض مربع متدرج الألوان و بشكل دائري في بداية كل عنصر.

ul {
    list-style-image: radial-gradient(red, blue);
}

تحديد مكان محددات العناصر

يمكنك تحديد مكان ظهور محددات العناصر باستخدام الخاصية list-style-position و تمرير إحدى القيم التالية لها.

في المثال التالي قمنا بإظهار محددات العناصر مرة بداخل حدودها و مرة خارجها.
ملاحظة: قمنا بإظهار حدود العناصر حتى تلاحظ الفرق.

ul li {
    border: 1px solid;
}

.inside {
    list-style-position: inside;
}

.outside {
    list-style-position: outside;
}

تعديل تصميم القائمة و العناصر

CSS تتيج لك تعديل تصميم القوائم كيفما تشاء حيث تستطيع إضافة ألوان، حدود، خلفيات للعناصر بالإضافة إلى تعديل تصميم محددات العناصر بشكل كلي.

الوصول لخصائص القوائم

الأسلوب التالي يتيح لك الوصول لخصائص القائمة و التعديل عليها كيفما تشاء.

/* لإضافة خصائص للقائمة بحد ذاتها */
ul {

}

/* لإضافة خصائص لجميع عناصر القائمة */
ul li {
    
}

/* لإضافة خصائص لجميع محددات عناصر القائمة */
ul li::marker {
    
}

في المثال التالي قمنا بتعديل هوامش القائمة الإفتراضية، لون خلفيتها، لون عناصرها و ألوان المحددات الموجودة فيها.

ul {
    margin: 0;
    padding: 5px 10px;
    list-style-type: disc;
    list-style-position: inside;
    background: deepskyblue;
}

ul li {
    background: darkslateblue;
    color: white;
    margin: 5px 0;
    padding: 5px;
}

ul li::marker {
    color: gold;
}

عرض أيقونة في بداية العنصر

إذا كنت تستخدم أيقونات جوجل أو أيقونات Font Awesome فإنه بإمكانك أيضاً استخدام هذه الأيقونات كمحددات في القوائم، حيث يمكنك عرض أيقوناتهم في بداية كل عنصر بالإضافة إلى تخصيص طريقة عرضها حتى تظهر بشكل الذي تريده.

في المثال التالي قمنا بعرض أيقونة النجمة الموجودة ضمن أيقونات FontAwesome في بداية كل عنصر و قمنا بتلوينها و تحديد حجمها و إبعاد نص العناصر عنها أيضاً.

ul {
    list-style-type: '\f006'; /* رمز إظهار النجمة */
    padding: 0 0 0 15px;
    margin: 0;
}
            
ul li {
    padding-left: 5px;
    line-height: 26px;
}
            
ul li::marker {
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    font-size: 14px;
    color: gold;
}