- قهوة
- شاي
- الكوكا كولا
- قهوة
- شاي
- الكوكا كولا
قوائم HTML و CSS قائمة العقارات
في HTML، هناك نوعان رئيسيان من القوائم:
- قوائم غير مرتبة (<ul>) - يتم وضع علامة على عناصر القائمة بوابل من الرصاص
- القوائم المرتبة (<ol>) - يتم وضع علامة على عناصر القائمة مع الأرقام أو الحروف
خصائص قائمة CSS تسمح لك:
- تعيين علامات عنصر قائمة مختلفة للقوائم مرتبة
- تعيين علامات عنصر قائمة مختلفة للقوائم غير مرتبة
- تعيين صورة كقائمة البند علامة
- إضافة ألوان الخلفية لالقوائم وعناصر القائمة
مختلفة علامات عنصر قائمة
في list-style-type الخاصية تحديد نوع عنصر القائمة علامة.
يظهر المثال التالي بعض المتاحة العلامات قائمة البند:
مثال
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
} انها محاولة لنفسك » ملاحظة: بعض القيم هي للقوائم غير مرتبة، وبعض القوائم المطلوبة.
صورة كما ان قائمة البند ماركر
في list-style-image تحدد الخاصية صورة كقائمة البند علامة:
ضع علامات عنصر قائمة
و list-style-position الخاصية تحديد ما إذا يجب أن تظهر علامات قائمة البند داخل أو خارج تدفق المحتوى:
- قائمة الممتلكات إختزال
و list-style الخاصية هي خاصية الاختزال. فهو يستخدم لتعيين كافة خصائص قائمة في إعلان واحد:
عند استخدام خاصية الاختزال، من اجل قيم الخاصية هم:
-
list-style-type(إذا تم تحديد قائمة على غرار صورة، سوف يتم عرض قيمة هذه الخاصية إذا لا يمكن عرض الصورة لسبب ما) -
list-style-position(يحدد ما إذا كان يجب أن تظهر علامات قائمة البند داخل تدفق المحتوى أو خارجها) -
list-style-image(تحدد صورة كقائمة البند علامة)
إذا كان أحد قيمة العقارات فوق مفقودة، سيتم إدراج القيمة الافتراضية لخاصية في عداد المفقودين، إن وجدت.
قائمة التصميم مع الألوان
يمكننا أيضا قوائم الاسلوب مع الألوان، لجعلها تبدو أكثر قليلا للاهتمام.
أي شيء يضاف إلى <ol> أو <ul> العلامة، يؤثر على القائمة بأكملها، في حين أضافت خصائص ل <li> سوف العلامة يؤثر على عناصر القائمة الفردية:
مثال
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background:
#ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul li {
background:
#cce5ff;
margin: 5px;
}نتيجة:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
المزيد من الأمثلة
عرض كامل القائمة يحدها
يوضح هذا المثال كيفية إنشاء قائمة تحدها دون رصاص.
كل مختلف العلامات قائمة البند للقوائم
يوضح هذا المثال عن مختلف علامات القائمة البند في CSS.
اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 »
كل قائمة العقارات CSS
| الملكية | وصف |
|---|---|
| list-style | يحدد كل خصائص قائمة في إعلان واحد |
| list-style-image | يحدد صورة كقائمة البند علامة |
| list-style-position | يحدد إذا يجب أن تظهر علامات قائمة البند داخل أو خارج تدفق المحتوى |
| list-style-type | يحدد نوع القائمة البند علامة |