القوائم Lists

انواع القوائم في لغة HTML

هناك ثلاثة أنواع مختلفة من القوائم في HTML ولكل منها استخدامها :

  • القائمة الغير مرتبة (Unordered list)- تُستخدم لإنشاء قائمة بالبنود ذات الصلة ، بدون ترتيب معين.
  • القائمة المرتبة (Ordered list)- تُستخدم لإنشاء قائمة بالبنود ذات الصلة بترتيب معين.
  • قائمة الوصف (Description list) - تستخدم لإنشاء قائمة بالمصطلحات وتفصيلاتها.

لمعرفة المزيد حول القوائم وكيفية إنشائها راجع درس القوائم Lists في لغة HTML.

تنسيق القوائم بإستخدام لغة CSS

توفر لغة CSS العديد من الخصائص لتصميم وتنسيق القوائم غير المرتبة Unordered lists والقوائم المرتبة Ordered lists الأكثر استخدامًا. تسمح لنا خصائص القائمة في لغة CSS بما يلي:

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

في هذا الدرس سوف نناقش الخصائص التي يمكن استخدامها لتصميم وتنسيق قوائم HTML.

تغيير شكل العلامة للقوائم

بشكل افتراضي ، يتم ترقيم العناصر الموجودة في القائمة المرتبة بأرقام عربية (1 ، 2 ، 3 ، 4 ، وما إلى ذلك) ، بينما يتم تمييز العناصر في القائمة الغير مرتبة بعلامات دائرية •.
ولكن ، يمكنك تغيير نوع علامة القائمة الافتراضية هذه إلى أي نوع آخر مثل الأرقام الرومانية Roman Numerals ، والأحرف اللاتينية Latin Letters ، والدائرة Circle ، والمربع Square ، وما إلى ذلك باستخدام الخاصية list-style-type.

لنجرب المثال التالي لفهم كيفية عمل هذه الخاصية بشكل عملي:

مثال
تشغيل
  1. ul {
  2. list-style-type: square;
  3. }
  4. ol {
  5. list-style-type: upper-roman;
  6. }

تغيير موضع العلامة للقوائم

بشكل افتراضي ، يتم وضع علامات كل عناصر القائمة خارج مربعات العرض الخاصة بها.
ومع ذلك ، يمكنك أيضًا وضع هذه العلامات داخل مربعات عرض بنود القائمة باستخدام الخاصية list-style-position مع القيمة inside.

لنجرب المثال التالي لفهم كيفية عمل هذه الخاصية بشكل عملي:

مثال
تشغيل
  1. ol.in li {
  2. list-style-position: inside;
  3. }
  4. ol.out li {
  5. list-style-position: outside;
  6. }

استخدام الصور كعلامات للقائمة

يمكننا أيضًا تحديد صورة كعلامة قائمة باستخدام الخاصية list-style-image.
المثال التالي سنقوم بتحديد صورة ذات خلفية شفافة من النوع PNG كعلامة قائمة لجميع البنود في القائمة الغير مرتبة. لنجربها ونرى كيفة عملها:

مثال
تشغيل
  1. ul li {
  2. list-style-image: url("images/bullet.png");
  3. }

في بعض الأحيان ، لا تعطي الخاصية list-style-image المخرجات المتوقعة. بدلاً من ذلك ، يمكنك استخدام الحل التالي للتحكم بشكل أفضل في جعل الصورة علامة للقائمة.
كحل بديل ، يمكننا أيضًا جعل الصور كعلامات للقائمة عبر الخاصية background-image في لغة CSS . أولاً ، قم بإزالة العلامات من القائمة عن طريق الخاصية list-style-type كما ذكرنا سابقا . ثم حدد صورة خلفية غير متكررة لبنود القائمة كما في المثال التالي :

يعرض المثال التالي الصورة كعلامات للقائمة وسيتم تطبيقها بالتساوي في جميع المتصفحات:

مثال
تشغيل
  1. ul {
  2. list-style-type: none;
  3. }
  4. ul li {
  5. background-image: url("images/bullet.png");
  6. background-position: 0px 5px;
  7. background-repeat: no-repeat;
  8. padding-left: 20px;
  9. }

تحديد كافة خصائص القائمة مرة واحدة

إن الخاصية list-style هي خاصية مختصرة لتحديد الخصائص الثلاث للقائمة list-style-type و list-style-image و list-style-position في مكان واحد.
في المثال التالي سنقوم بتحديد علامة لبنود القائمة المرتبة لتكون أرقام رومانية كبيرة تظهر داخل مربعات عرض بنود القائمة في حال لم تظهر الصورة المحددة :

مثال
تشغيل
  1. ol {
  2. list-style: upper-roman inside url("images/bullet.png");
  3. }
ملاحظة:

عند استخدام الخاصية المختصرة list-style ، فإن ترتيب القيم هو:

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

لا يهم إذا كانت إحدى هذه القيم المذكورة مفقودة طالما أن الباقي في الترتيب الصحيح.

إنشاء قوائم التنقل Navigation Menus باستخدام القوائم

تُستخدم قوائم HTML بشكل متكرر لإنشاء شريط أو قائمة تنقل navigation bar أفقية تظهر عادةً أعلى موقع ويب. ولكن نظرًا لأن عناصر القائمة هي عناصر كتلة block elements ، لذا لعرضها في السطر ، نحتاج إلى استخدام الخاصية display من لغة CSS.
لنجرب المثال التالي لفهم كيفة انشاء شريط أو قائمة تنقل بشكل عملي:

مثال
تشغيل
  1. ul {
  2. padding: 0;
  3. list-style: none;
  4. background: #f2f2f2;
  5. }
  6. ul li {
  7. display: inline-block;
  8. }
  9. ul li a {
  10. display: block;
  11. padding: 10px 25px;
  12. color: #333;
  13. text-decoration: none;
  14. }
  15. ul li a:hover {
  16. color: #fff;
  17. background: #939393;
  18. }

سوف تتعرف على الخاصية display والخاصية padding بالتفصيل في الدروس القادمة.

« التالي السابق »