021-20483015

لیست ها در CSS

لیست های 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 استفاده کنید.

مثال :

تصویر به عنوان علامت آیتم
ul {
    list-style-image: url('sqpurple.gif');
}
مشاهده مثال

 

موقعیت علامت آیتم های لیست

با استفاده از صفت list-style-position می توان تعیین کرد که علامت آیتم ها در داخل یا خارج از محدوده محتوا قرار گیرد.

مثال :

موقعیت دهی علامت آیتم
ul {
    list-style-position: inside;
}
مشاهده مثال

خلاصه نویسی صفت لیست

برای خلاصه کردن کدهای مربوط به لیست از صفت list-style استفاده می شود.

مثال :

صفت خلاصه شده علامت آیتم
ul {
    list-style: square inside url("sqpurple.gif");
}
مشاهده مثال

ترتیب قرارگیری صفات در کد خلاصه شده لیست :

- 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;
}
مشاهده مثال

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط