هناك فرصة جيدة أنك تعرف شخصًا في حياتك مهووس بإعداد القوائم. يقومون بإعداد قوائم البقالة وقوائم الأمنيات وقوائم المهام فقط للشعور بالرضا عن تحقيق الأشياء. حقاً، أنا واحدة من تلك الأشخاص.
ولكن حقًا، ما الذي لا يحبه الناس في القوائم؟ إنها طريقة فعالة لنقل المعلومات على موقع الويب، سواء كانت قائمة بميزات المنتج، أو قائمة بتعليمات خطوة بخطوة، أو قائمة بمكونات وصفة. إنها تبدو منطقية.
كيفية تنسيق القوائم باستخدام CSS؟
يحتوي HTML على نوعين رئيسيين من القوائم: القوائم غير المرتبة (<ul>): في هذه القوائم، لا يهم ترتيب العناصر، مثل العناصر في قائمة البقالة. يتم تعيين كل عنصر في القائمة بواسطة علامة نقطة تعريف افتراضية. القوائم المرتبة (<ol>): في هذه القوائم، يهم ترتيب العناصر، مثل الخطوات في دليل تعليمي. يتم تعيين كل عنصر في القائمة برقم افتراضي.
طرق تنسيق القوائم باستخدام CSS
هناك عدة طرق مختلفة لإضافة تنسيق للقوائم باستخدام CSS، اعتمادًا على التأثير الذي ترغب في تحقيقه. في هذا المقال، سنغطي الأساليب التالية: خاصية list-style-type، خاصية list-style-image، خاصية list-style-position، الخاصية المختصرة list-style، وعنصر الشبح ::marker.
خاصية list-style-type
تقوم خاصية list-style-type بتعيين علامة لعنصر القائمة أو عنصر عنصر القائمة. العلامة هي حرف (أو مجموعة من الأحرف) تشير إلى بداية عنصر قائمة جديد.
خاصية list-style-image
مثل خاصية list-style-type، تتيح لك خاصية list-style-image أيضًا تغيير مظهر العلامات في القائمة. الفرق هو أن خاصية list-style-image تعين صورة كعلامة، وهذا مفيد إذا كنت ترغب في استخدام رمز أو رسمة مخصصة لعلامتك.
خاصية list-style-position
تقوم خاصية list-style-position بتعيين موضع علامات القائمة. عند إنشاء عنصر <ul> أو <ol>، يتم وضع نص عنصر القائمة في صندوقه الخاص، ويتم فصل هذا الصندوق عن علامته بمسافة فارغة. يمكنك استخدام خاصية list-style-position لتغيير ذلك.
الخاصية المختصرة list-style
تعد الخاصية المختصرة list-style مجموعة تجمع بين خاصيتي list-style-type و list-style-position و list-style-image في هذا الترتيب. أوصي باستخدام الخاصية المختصرة list-style (والخصائص المختصرة بشكل عام) لجعل الشفرة أكثر اختصارًا. ها هي الخاصية في العمل:
عنصر الشبح ::marker
أخيرًا، دعونا نناقش عنصر الشبح ::marker. يمثل هذا العنصر الشبح علامة عنصر القائمة. يمكنك استهداف هذا العنصر الشبح بأنماط CSS لتغيير مظهره، بما في ذلك الحجم واللون والخط والوزن. يمكنك حتى اختيار الحرف المستخدم للعلامة باستخدام خاصية المحتوى. إذا كنت تقوم بإعداد وصفة للكوكيز، فلماذا لا تستخدم إيموجي الكوكيز بدلاً من الرموز القياسية لقائمة المكونات؟
قم بإعطاء قوائمك لمسة مميزة. عناصر <ol> و <ul> هي بعض أول عناصر HTML التي تتعلمها عند البدء. إنها تقوم بالعمل المطلوب، ولكنني لا أعتقد أنني وحدي عندما أقول أنه في بعض الأحيان يمكن أن تبدو قليلاً – همم – أساسية.
الأخبار السارة هي أن القليل من CSS يمكن أن يأخذك بعيدًا. باستخدام خاصية list-style أو عنصر الشبح ::marker، يمكنك إنشاء قوائم تتناسب بشكل أفضل مع موضوع موقعك وتضيف لحظة سعادة صغيرة للزوار المحظوظين.
اترك تعليقاً