صفت list-style در css نشانه گر آیتم لیست تگ html

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

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

صفت list-style در css نشانه گر آیتم لیست تگ html - سایت آموزی

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

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

خصوصیت list-style در حقیقت به نوعی یک مختصرنویسی برای ۳ ویژگی دیگر مرتبط با آیتم های لیست در زبان سی اس اس می باشد، که عبارتند از: 

  1. خصوصیت list-style-type
  2. خصوصیت list-style-position
  3. خصوصیت list-style-image

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

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

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

  1. مقدار list-style-type
  2. مقدار list-style-position
  3. مقدار list-style-image
  4. مقدار initial
  5. مقدار inherit

صفت list-style در css نشانه گر آیتم لیست تگ html

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

اگر خاصیت list-style را برای یک عنصر html برابر با مقدار list-style-type تعریف کنیم، یعنی می خواهیم نوع نشانگر آیتم های لیست را در عنصر html مربوطه تعیین کنیم.

مقدار پیش فرض برای این حالت مقدار disc می باشد.

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

مقدار list-style-position درون خاصیت list-style در زبان css

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

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

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

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

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

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

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

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

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

صفت list-style در css نشانه گر آیتم لیست تگ html - سایت آموزی

بررسی خاصیت list-style از نظر نسخه زبان طراحی css

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

بررسی ساختاری خصوصیت list-style در زبان طراحی سی اس اس