قوائم CSS
القوائم غير المرتبة:
- قهوة
- شاي
- كوكا كولا
- قهوة
- شاي
- كوكا كولا
القوائم المطلوبة:
- قهوة
- شاي
- كوكا كولا
- قهوة
- شاي
- كوكا كولا
قوائم HTML وخصائص قائمة 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.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
إزالة الإعدادات الافتراضية
يمكن list-style-type:noneأيضًا استخدام الخاصية لإزالة العلامات / الرموز النقطية. لاحظ أن القائمة تحتوي أيضًا على هامش افتراضي ومساحة. لإزالة هذا ، أضف margin:0وإلى padding:0<ul> أو <ol>:
مثال
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
قائمة - خاصية الاختزال
الخاصية هي list-styleخاصية الاختزال. يتم استخدامه لتعيين جميع خصائص القائمة في إعلان واحد:
مثال
ul
{
list-style: square inside url("sqpurple.gif");
}
عند استخدام خاصية الاختزال ، يكون ترتيب قيم الخاصية كما يلي:
list-style-type(إذا تم تحديد list-style-image ، فسيتم عرض قيمة هذه الخاصية إذا تعذر عرض الصورة لسبب ما)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;
}
نتيجة:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
مزيد من الأمثلة
يوضح هذا المثال كيفية إنشاء قائمة بحد أيسر أحمر.
يوضح هذا المثال كيفية إنشاء قائمة ذات حدود بدون تعداد نقطي.
يوضح هذا المثال جميع علامات عناصر القائمة المختلفة في CSS.
كافة خصائص قائمة CSS
| Property | Description |
|---|---|
| list-style | Sets all the properties for a list in one declaration |
| list-style-image | Specifies an image as the list-item marker |
| list-style-position | Specifies the position of the list-item markers (bullet points) |
| list-style-type | Specifies the type of list-item marker |