دروس css القوائم

خصائص قائمة العنصر ul li تسمح لك :

    * تعيين عنصر قائمة علامات مختلفة للقوائم أمر
    * تعيين عنصر قائمة علامات مختلفة للقوائم غير مرتبة
    * ضبط صورة بوصفها علامة قائمة البند




lمثال

<style type="text/css">
ul.a {list-style-type:circle;}
ol.c {list-style-type:upper-roman;}

ul.b {list-style-type:square;}
ol.d {list-style-type:lower-alpha;}
</style>

مشاهد معاينه الكود

خصائص القوائم غير مرتبه ul

القيمة      الوصف
none     لا علامة
disc    الافتراضية. العلامة هي عبارة عن دائرة مملوءة
circle     العلامة هي عبارة عن دائرة
square     علامة هو مربع


خصائص القوائم المرتبه ol
القيمه الوصف
armenian رقم
decimal رقم
decimal-leadinr   النتجه (01, 02, 03, etc.)
georgian   ر(an, ban, gan, etc.)
lower-alpha    النتجه (a, b, c, d, e, etc.)
lower-greek    النتجه (alpha, beta, gamma, etc.)
lower-latin  النتجه (a, b, c, d, e, etc.)
lower-roman    النتجه (i, ii, iii, iv, v, etc.)
upper-alpha   النتجه  (A, B, C, D, E, etc.) 
upper-latin    النتجه (A, B, C, D, E, etc.)
upper-roman    النتجه (I, II, III, IV, V, etc.)

وضع القوائم ايكون

 <style type="text/css">
#aaa
{
list-style-image:url('http://www.google.com/images/feed-icon.gif');
}

#bbb
{
list-style-type:none;
padding:0px;
margin:0px;
}
#bbb li
{
background-image:url('http://www.google.com/images/feed-icon.gif');
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:14px;

}
</style>

مشاهد معاينه الكود

التفاصيل

الخاصيه الوصف القيمه 
list-style
مجموعات كافة الخصائص للحصول على قائمة واحدة list-style-type list-style-position list-style-image
list-style-image 
يحدد صورة بوصفها علامة قائمة URL none inherit

list-style-position
 يحدد ما إذا كان ينبغي علامات قائمة البند تظهر داخل أو خارج تدفق المحتوى inside outside inherit
l
ist-style-type
 يحدد نوع علامة قائمة البند none disc circle square decimal decimal-leading-zero armenian georgian lower-alpha upper-alpha lower-greek lower-latin upper-latin lower-roman upper-roman inherit 1



التفاصيل

الملكية	القيمه	الوصف
list-style	list-style-type list-style-position list-style-image	مجموعات كافة الخصائص للحصول على قائمة واحدة
list-style-image	url none inherit	يحدد صورة بوصفها علامة قائمة
list-style-position	Inside Outside inherit	يحدد ما إذا كان ينبغي علامات قائمة تظهر داخل أو خارج المحتوى
list-style-type	armenian circle cjk-ideographic decimal decimal-leading-zero disc georgian hebrew hiragana hiragana-iroha inherit katakana katakana-iroha lower-alpha lower-greek lower-latin lower-roman none square upper-alpha upper-latin upper-roman	يحدد نوع علامة القائمة