خاصية صورة علامة القائمة
آخر تحديث: 2026-09-13
list-style-image خاصية صورة علامة القائمة
تستبدل list-style-image العلامة الافتراضية (نقطة أو رقم وغيرها) بصورة مخصصة على عناصر القائمة. والقيمة الافتراضية none تعني عدم استخدام صورة. كثيرًا ما تُستخدم لإعطاء القوائم أيقونات صغيرة ذات هوية أو أسهمًا زخرفية لمظهر أغنى.
| الفئة | |
|---|---|
| القيمة الأولية | none |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS1 |
| الحالة | قياسي |
📝 التركيب
list-style-image: none | <image>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
none | كلمة مفتاحية | لا توجد صورة |
<image> | النوع | صورة علامة مخصصة |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| list-style-image | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： لا تتحكم list-style-image في حجم الصورة؛ ولمرونة أكبر، استخدم عنصرًا زائفًا ::before مع background-image.
تحذير： إذا فشل تحميل الصورة، تختفي العلامة، لذا من الحكمة ضبط list-style-type أيضًا كبديل احتياطي.
❓ الأسئلة الشائعة
Qأيهما أفضل، list-style-image أم عنصر زائف ::before؟
A::before أكثر مرونة: تتحكم في حجم الصورة وموضعها ومسافتها ومحاذاتها، وتعمل مع خطوط الأيقونات. أما list-style-image فبسيطة لكنها لا تكبّر الصورة ولا تضبط المحاذاة بدقة. استخدم ::before مع background-image و background-size عند الحاجة إلى تحكم دقيق؛ واستخدم list-style-image لاستبدال العلامات بسرعة.
Qكيف أُحاذي الصورة في list-style-image؟
Aلا تتحكم list-style-image بدقة في المحاذاة — إذ تُرسم الصورة بحجمها الجوهري. وللتوسيط الدقيق، بدّل إلى li::before مع إدراج content: "" و background-image و background-position: center، مع تحديد الحجم عبر background-size والتوسيط/التحجيم حسب الحاجة.
Qماذا يحدث عند فشل تحميل list-style-image؟
Aإذا فشل تحميل الصورة (مسار خاطئ أو تنسيق غير مدعوم أو محظور)، تختفي العلامة أو تعود إلى لا شيء، تاركة عناصر القائمة 'عارية'. لتجنّب ذلك، احتفظ بـ list-style-type كاحتياطي، مثل list-style: disc url(bullet.png); — يظهر disc عندما تكون الصورة غير متاحة.
Qلماذا لا يمكنني تغيير حجم صورة list-style-image؟
Aلأن الخاصية ترسم الصورة بحجمها الجوهري عند موضع العلامة، وCSS لا يوفر معلمة لتحجيمها أو تلوينها. فالصور كبيرة أو صغيرة الحجم لا تتكيف مع حجم الخط والتخطيط. وللتحكم في الحجم، بدّل إلى li::before مع background-image و background-size، أو استخدم أيقونة SVG مضمّنة واضبط عرضها وارتفاعها.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
