در CSS از ویژگی list-style-image برای تعیین یک تصویر یا رنگ شیبدار (Gradient) به عنوان نشانگر (marker) لیست ها استفاده میشود.
نحوه تعیین تصویر برای نشانگر لیست در CSS با کمک ویژگی list-style-image
مثال زیر نمونهای از تعیین یک تصویر به عنوان نشانه آیتمهای لیست در CSS با کمک ویژگی list-style-image را نمایش میدهد:
ul {
list-style-image: url('sample.gif');
}در این مثال، مقدار url('sample.gif') نشانی فایل تصویر موردنظر را با کمک تابع url() مشخص میکند. با توجه به مسیر نسبی مورد استفاده، این فایل با نام sample.gif در دایرکتوری جاری (همان دایرکتوری که فایل حاوی قانون فوق در آن قرار دارد) میباشد.
مقدار none به عنوان مقدار پیشفرض برای این ویژگی باعث میشود هیچ تصویری در قالب نشانگر آیتمهای لیست مشخص نشود. در این حالت، نشانگری که با کمک ویژگی list-style-type مشخص شده است نمایش داده میشود.
نکته: پیشنهاد میشود همیشه علاوه بر ویژگی list-style-image مقدار ویژگی list-style-type را نیز مشخص کنید. در صورتی که تصویر مشخص شده به هر دلیلی قابل دسترسی نباشد از نشانگری که توسط ویژگی list-style-type تعیین شده استفاده میشود.
تعیین رنگ شیبدار (Gradient) به عنوان نشانگر لیست
همانطور که گفتیم میتوانید از ویژگی list-style-image برای تعیین یک رنگ شیبدار به عنوان مارکر آیتمهای لیست نیز استفاده کنید.
مثال زیر نمونهای از انتخاب یک رنگ Gradient خطی برای نشانگرها (از قرمز به زرد) با کمک تابع linear-gradient() و ویژگی list-style-image را نمایش میدهد:
ul {
list-style-image: linear-gradient(red, yellow);
}
