القوائم في CSS

القائمة غير المرتبة:

  • قهوة
  • شاي
  • كوكا كولا
  • قهوة
  • شاي
  • كوكا كولا

القائمة المرتبة:

  1. قهوة
  2. شاي
  3. كوكا كولا
  1. قهوة
  2. شاي
  3. كوكا كولا

قوائم 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 يحدد هذا السمة موقع علامة العنصر (قائمة المشروع).

"list-style-position: outside;" يُعني أن نقطة قائمة المشروع ستكون خارج عنصر القائمة. ستصبح بداية كل سطر من القائمة متزامنة بشكل عمودي. هذا هو الوضع الافتراضي:

  • القهوة - مشروب مختلطة من حبوب القهوة المحروقة
  • شاي
  • كوكا-كولا

"list-style-position: inside;" يُمثل هذا علامة النقطة في الداخل من عنصر القائمة. لأنها جزء من عنصر القائمة، فإنها ستكون جزءًا من النص، وستقوم بفتح النص في البداية:

  • القهوة - مشروب مختلطة من حبوب القهوة المحروقة
  • شاي
  • كوكا-كولا

مثال

ul.a {
  list-style-position: outside;
}
ul.b {
  list-style-position: inside;
}

جربها بنفسك

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

list-style-type:none يمكن استخدام الخصائص أيضًا لإزالة العلامات/النقاط margin:0 و padding:0 :

مثال

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;
}

النتيجة:

  1. قهوة
  2. شاي
  3. كوكا كولا
  • قهوة
  • شاي
  • كوكا كولا

جربها بنفسك

مزيد من الأمثلة

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

جميع خصائص القائمة CSS

خصائص وصف
list-style خصائص مختصرة. تعيين جميع خصائص القائمة في بيانة واحدة.
list-style-image تحديد الصورة كعلامة للعنصر في القائمة.
list-style-position تحديد موقع علامة العنصر في القائمة.
list-style-type تحديد نوع علامة العنصر في القائمة.