آموزش لیست‌های CSS

لیست در CSS

با CSS می‌توانید به لیست‌ها استایل‌های متنوعی بدهید. از جمله قابلیت‌های CSS برای لیست‌ها:

• انتخاب نشانگرهای متفاوت برای آیتم‌های لیست‌های مرتب و نامرتب.
• استفاده از تصاویر به عنوان نشانگر آیتم‌های لیست.

انواع لیست‌ها در HTML

• لیست نامرتب (unordered list - ul): آیتم‌ها با نشانگرهای bullets مشخص می‌شوند.
• لیست مرتب (ordered list - ol): آیتم‌ها با اعداد یا حروف نشانه‌گذاری می‌شوند.

نشانگرهای آیتم‌های لیست

از خاصیت 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'); }
    

تثبیت مکان نشانگر در مرورگرهای مختلف

برای نمایش هماهنگ در مرورگرها از روش زیر استفاده کنید:

    ul { 
        list-style-type: none;
        padding: 0;
        margin: 0; }
    ul li {
        background-image: url('sqpurple.gif');
        background-repeat: no-repeat;
        background-position: 0px center;
        padding-left: 15px;}

حذف نشانگر لیست

برای حذف نشانگر آیتم‌های لیست، list-style-type را برابر none قرار دهید.

خاصیت shorthand برای لیست‌ها

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

ul { list-style: square inside url('sqpurple.gif'); }

ترتیب مقادیر shorthand:

• list-style-type: تعیین نوع نشانگر.
• list-style-position: تعیین مکان نشانگر (داخل یا خارج محتوا).
• list-style-image: تعیین تصویر به عنوان نشانگر.