صفت list-style-image در css سبک تصویر آیتم لیست

صفت list-style-image در css سبک تصویر آیتم لیست

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد خاصیت list-style-image در زبان css توضیحاتی را ارائه نماییم.

ویژگی کاربردی list-style-image در زبان css و در اولین نسخه این زبان طراحی یعنی css1 معرفی شده است.

معرفی و کاربرد ویژگی جدید list-style-image در زبان طراحی css

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

خصوصیت list-style-image می تواند بر روی آن دسته از تگ های html که صفت display در آنها از نوع list-item است نیز تاثیر داشته باشد.

مقادیر صفت جدید list-style-image در زبان طراحی css

صفت list-style-image که در زبان طراحی CSS1 معرفی شده است، ۴ مقدار می پذیرد که عبارتند از:

مقدار none
مقدار url
مقدار initial
مقدار inherit

مقدار none درون خاصیت list-style-image در زبان سی اس اس

اگر خاصیت list-style-image را برای یک تگ html برابر با مقدار none تعریف کنیم، یعنی هیچ گونه تصویری برای نشانه گر آیتم های یک لیست تعریف نشود و همان مقادیر پیش فرض تعریف شده نشانه گر آیتم های لیست برای تگ html مربوطه در نظر گرفته می شود. ( مقدار پیش فرض )

[html] div{ list-style-image:none; }[/html]

مقدار url درون خاصیت list-style-image در زبان سی اس اس

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

[html] div{ list-style-image: url(‘sqpurple.gif’); }[/html]

مقدار initial درون خاصیت list-style-image در زبان سی اس اس

اگر خاصیت list-style-image را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

مقدار inherit درون خاصیت list-style-image در زبان سی اس اس

اگر خاصیت list-style-image را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه خصوصیت مورد نظر را از والد پدری خود به ارث می برد.