CSS - Lists القوائم
CSS - تنسيق القوائم (Lists)
🔸 في HTML، يتم استخدام العناصر <ul> للقوائم غير المرتبة (bulleted)، و<ol> للقوائم المرتبة (مرقمة)، و<li> لعناصر القائمة. باستخدام CSS يمكننا التحكم في شكل هذه القوائم بشكل كامل.
✅ أهم خصائص تنسيق القوائم
list-style-type: تُحدد شكل الرمز المستخدم في القائمة (دائرة، رقم، مربع...)list-style-position: تُحدد موضع الرمز داخل أو خارج العنصرlist-style-image: تسمح باستخدام صورة بدلًا من الرمزlist-style: خاصية مختصرة تُجمع الثلاث خصائص أعلاه في سطر واحد
🧪 أمثلة على 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;
}
🧪 مثال HTML مع التطبيق
<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<ul class="a">
<li>تفاحة</li>
<li>موز</li>
<li>برتقال</li>
</ul>
<ul class="b">
<li>قطة</li>
<li>كلب</li>
<li>عصفور</li>
</ul>
<ol class="c">
<li>درس أول</li>
<li>درس ثاني</li>
</ol>
<ol class="d">
<li>مرحلة أولى</li>
<li>مرحلة ثانية</li>
</ol>
</body>
</html>
📌 استخدام صورة بدل الرمز
ul.custom {
list-style-image: url('icon.png');
}
📌 التحكم في موضع الرمز
ul.inside {
list-style-position: inside;
}
ul.outside {
list-style-position: outside;
}
🧪 استخدام الخاصية المختصرة list-style
ul {
list-style: square inside url('icon.png');
}
💡 ملاحظات مهمة
- تُستخدم
list-style: none;لإزالة الرموز تمامًا من القائمة. - يفضل استخدام القوائم لتنسيق العناصر المتكررة بطريقة منظمة.
- يمكنك تنسيق
<li>أيضًا باستخدام خصائصmargin،padding،colorوغيرها.
تعليقات
إرسال تعليق