CSS

كيفية إزالة النقاط في CSS؟


في بعض الحالات ، يُطلب منا إزالة الرموز النقطية من القوائم غير المرتبة والمرتبة. إزالة قائمة الرموز النقطية ليست مهمة معقدة باستخدام CSS يمكن القيام بذلك بسهولة عن طريق تعيين خاصية نمط القائمة أو نمط القائمة على لا شيء .

في قائمة النمط من نوع يستخدم خاصية CSS لوضع علامة (مثل قرص، والحرف، أو نمط مخصص العداد) من قائمة عنصر البند. تساعدنا خاصية CSS هذه في إنشاء قائمة بدون رموز نقطية. يمكن تطبيقه فقط على تلك العناصر التي تم تعيين قيمة عرضها على عنصر قائمة. في قائمة النمط من نوع يورث الممتلكات، لذلك يمكن تطبيقها على العنصر الأصلي (مثل <UL> أو <OL > ) لجعلها تنطبق على جميع عناصر القائمة.

بشكل افتراضي ، يتم ترقيم عناصر القائمة المرتبة بالأرقام العربية (1 ، 2 ، 3 ، إلخ) ، ويتم تمييز العناصر الموجودة في قائمة غير مرتبة برموز نقطية دائرية (•). في قائمة النمط من نوع الملكية CSS تسمح لنا لتغيير نوع القائمة الافتراضية للعلامة إلى أي نوع آخر مثل مربع، دائرة، الأرقام الرومانية والحروف اللاتينية، وغيرها الكثير.

إذا قمنا بتعيين قيمته على لا شيء ، فسيتم إزالة العلامات / الرموز النقطية. بدلاً من إزالة الرموز النقطية في القائمة ، يمكننا استبدالها بالصور. يجعل الموقع بصريا أكثر جاذبية. يمكن القيام بذلك باستخدام خاصية list-style-image .

دعونا نفهم كيفية إزالة النقاط باستخدام مثال.

مثال
في هذا المثال ، نستخدم كلاً من القوائم المرتبة وغير المرتبة ونطبق خاصية نوع نمط القائمة مع القيمة لا شيء لإزالة النقاط النقطية لعناصر القائمة.

<!DOCTYPE html> <html> <head> <style> ol { list-style-type: none; font-weight: bold; font-size: 20px; } ul { list-style-type: none; font-weight: bold; font-size: 20px; } </style> </head> <body> <h2>Ordered list</h2> <ol> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ol> <h2>Unordered list</h2> <ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ul> </body> </html>
Code language: HTML, XML (xml)
النتيجة

اظهر المزيد

مقالات ذات صلة

شاهد أيضاً
إغلاق
زر الذهاب إلى الأعلى

أنت تستخدم إضافة Adblock

الاعلانات هي مصدرنا الوحيد لدفع التكلفة التشغيلية لهذا المشروع الريادي يرجى الغاء تفعيل حاجب الأعلانات