خاصية اختصار نمط القائمة (list-style)
آخر تحديث: 2026-09-13
list-style خاصية اختصار نمط القائمة (list-style)
خاصية list-style هي الاختصار لـ list-style-type و list-style-position و list-style-image، وتضبط كل جوانب علامات عناصر القائمة دفعة واحدة. والافتراضي هو disc outside none. وهي أكثر الطرق كفاءة للتحكم في مظهر القائمة، وتُستخدم عادةً لتخصيص أو إعادة ضبط أنماط القائمة بسرعة.
| الفئة | |
|---|---|
| القيمة الأولية | disc outside none |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS1 |
| الحالة | قياسي |
📝 التركيب
list-style: <list-style-type> || <list-style-position> || <list-style-image>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
<list-style-type> || <list-style-position> || <list-style-image> | القيمة | اختصار نمط القائمة |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| list-style | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يُستخدم list-style: none عادةً في أشرطة التنقل والأماكن المشابهة لإزالة علامات القائمة الافتراضية.
تلميح： تعود الخصائص الفرعية غير المحددة في الاختصار إلى قيمها الافتراضية، لذا يمسح list-style: none كلًا من type و image.
❓ الأسئلة الشائعة
Qما الفرق بين list-style: none و display: block؟
Aلا يزيل list-style: none سوى العلامة أمام كل عنصر؛ يبقى li عنصر قائمة بدلالته سليمة، وما زال قارئ الشاشة يتعرف على القائمة. أما display: block فيغير العنصر إلى عرض على مستوى الكتلة، مما قد يؤثر على الدلالة وكيفية فهم التقنيات المساعدة لهيكل القائمة. ولإعادة ضبط مظهر القائمة، يكفي list-style: none — دون حاجة لتغيير display.
Qهل يهم ترتيب القيم في اختصار list-style؟
Aلا توجد ترتيب صارم — والمتصفحات تميز القيم حسب النوع — لكن الترتيب الموصى به هو type و position و image، مثل list-style: square inside none;. لاحظ أن الخصائص الفرعية غير المحددة تُعاد إلى قيمها الافتراضية، فيمسح list-style: none كلًا من type و image.
Qما الفرق بين list-style: none و padding-left: 0؟
Aلا يزيل list-style: none سوى رموز العلامات؛ ويبقى المسافة البادئة اليسرى الافتراضية للمتصفح (نحو 40px من padding). لمحاذاة القائمة مع النص المحيط، ادمج list-style: none; padding-left: 0; margin: 0;. هذه هي ثلاثية إعادة الضبط الكلاسيكية — وتزيل قوائم التنقل الأفقية النقاط والمسافة البادئة بهذه الطريقة.
Qما الخصائص الفرعية التي يُعيد اختصار list-style ضبطها؟
Aأي خاصية فرعية تُغفل تُعاد إلى قيمتها الافتراضية: type إلى disc، و position إلى outside، و image إلى none. فإذا ضبطت صورة بـ list-style-image أولًا ثم كتبت لاحقًا list-style: inside;، تُمسح الصورة. وعندما تريد تغيير خاصية فرعية واحدة فقط، استخدم الخاصية المفصلة مباشرةً لتكون في الأمان.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
