آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

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

دوره های مرتبط با این مقاله

لیست در CSS

خاصیت های لیست در CSS به شما قابلیت های زیر را ارائه می دهد :

به شما امکان می دهد نشانگرهای مختلف برای آیتم های فهرست ویژه ی لیست های رده بندی یا دارای ترتیب (ordered) انتخاب کنید.

به شما اجازه می دهد نشانگرهای مختلف برای آیتم های فهرست ویژه ی لیست های که با عدد یا حروف رده بندی یا نشانه گذاری نشده اند (unordered) انتخاب کنید.

همچنین به شما این امکان را می دهد تصویر به عنوان نشانگر آیتم لیست انتخاب کنید .

انواع لیست ها

در HTML، دو نوع متفاوت لیست وجود دارد :

  • unordered lists (< ul>) – تمامی اقلام یا آیتم های لیست با علامت Bullets نشانه گذاری شده اند .
  • ordered lists (< ol>) – آیتم های لیست با عدد یا حروف علامت گذاری شده اند

با بهره گیری از امکاناتی که CSS در اختیار طراح وب قرار می دهد، می توان سبک دهی به فهرست ها و لیست ها را وارد مرحله ی تازه ای کرد، برای مثال از تصاویر به مثابه ی نشانگرهای آیتم های یک لیست استفاده کرد .

نشانگرهای مختلف آیتم های لیست (list item marker)

نوع نشانگر آیتم های لیست به وسیله ی خاصیت 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');
        }
امتحان کنید

مثالی که در بالا مشاهده می کنید در کلیه ی مرورگرها به طور مشابه نمایش داده نمی شوند . IE و Opera هر دو image-marker (تصویر نشانگر) را کمی بالاتر نسبت به مرورگرهای Firefox، Chrome و Safari نمایش می دهد .

اگر می خواهید image-marker در تمامی مرورگرها در مکانی یکسان جاگذاری و نمایش داده شود، می توانید از مثال زیر کمک بگیرید که در آن image-marker در چندین مرورگر مختلف به طور مشابه و در موقعیتی یکسان قرار گرفته است .

مثال:

نمونه سه

  ul {
            list-style-type: none;
            padding: 0px;
            margin: 0px;
        }

            ul li {
                background-image: url(sqpurple.gif);
                background-repeat: no-repeat;
                background-position: 0px center;
                padding-left: 15px;
            }
امتحان کنید
مثال:

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

هر دو خصوصیت padding (ویژگی padding میزان فاصله و حاشیه ی محتوای درون یک بلاک را مشخص می کند) و margin (فاصله دو بلاک یا دو لایه را در صفحات وب تعیین می کند) را به 0px تنظیم کنید (بنا به دلایل سازگاری یا compatibility جهت پشتیبانی از چندین مرورگر / سازگاری یک صفحه وب و کدهای آن با مرورگرهای گوناگون).

برای تمامی < li> در < ul> :

  • URL تصویر مربوطه را انتخاب کرده و آن را تنها یکبار نمایش می دهد (بدون هیچ تکراری).
  • تصویر مورد نظر را هرجا که مایلید قرار دهید (left 0px و vertical value: center).
  • نوشته را در لیست با padding-left جای گذاری کنید

آموزش خاصیت List - Shorthand

list-style property در واقع یک خاصیت مختصر نویسی است . از خصوصیت مزبور جهت تعریف تمامی خاصیت های لیست تنها در یک تعریف (declaration) استفاده می شود .

مثال:

نمونه چهار

 ul {
            list-style: square inside url('sqpurple.gif');
        }
امتحان کنید

در حین استفاده از خاصیت یا ویژه گی مختصر نویسی، توجه داشته باشید که ترتیب مقادیر property ها به ترتیب زیر هستند :

list-style-type (چنانچه list-style-image مشخص شده باشد، مقدار این خاصیت در صورت عدم امکان نمایش تصویر (به هر دلیلی)، نشان داده می شود) .

list-style-position (مشخص می کند آیا نشانگرهای آیتم های لیست باید داخل یا خارج گردش محتوا (content flow) نمایش داده شوند).

list-style-image (یک تصویر را به عنوان نشانگر آیتم لیست انتخاب می کند).

در صورت عدم وجود یا در دسترس نبودن یکی از مقادیر property های فوق، مقدار پیش فرض برای خصوصیتی که در دسترس نیست درج می شود .

کلیه ی خاصیت های مربوط به لیست در جدول ذیل تشریح شده اند :

شرح
خاصیت
این ویژه گی یک خصوصیت مختصر نویسی است که مقادیر سه خاصیت مختلف مربوط به لیست را در یک تعریف (declaration) قرار می دهد . در واقع تمامی خصوصیت های کی لیست را در تنها یک اعلان ست می کند .
list-style
یک تصویر را به عنوان نشانگر یا مارکر آیتم لیست انتخاب می کند . با استفاده از این ویژگی برای عکس نشانگر تعریف می کند و به صورت یک آیکون کوچک نمایش داده می شود و شامل دو حالت است که یکی none می باشد که در این حالت هیچ عکسی در لیست دیده نمی شود،و حالت url که با استفاده از این حالت آدرس تصویر مورد نظر را وارد می کنند .
list-style-image
در این ویژگی موقعیت قرارگیری نشانه و متن آیتم های لیست را بر حسب یکی از حالت های زیرتعیین می کند.که این ویژگی هم شامل دو حالت می باشد که یکی inside می باشد که در این حالت نشانه لیست و متن آیتم های آن کمی تو رفته تر نمایش داده می شوند و حالت outside نشانه لیست و متن آیتم های به صورت عادی نمایش داده می شوند (تعیین می کند که نشانگرهای آیتم های لیست داخل یا خارج content flow ظاهر شوند یا خیر) .
list-style-position
نوع نشانگر آیتم لیست را تعیین می کند (با استفاده از این ویژگی می توان marker لیست خود را به شکل دلخواه عوض کنید) .
list-style-type
  • 4155
  •    2584
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .