list-style

ویژگی list-style یک ویژگی خلاصه نویسی برای تنظیم مقادیر ویژگی های list-style-type ،list-style-image و list-style-position بصورت یکجا می باشد.

این ویژگی همچنین می تواند بر روی عناصری که display آنها از نوع list-item است کنترل داشته باشد.

 

مقادیر ویژگی list-style

 

list-style: [ <'list-style-type'> || <'list-style-position'> || <'list-style-image'> ] | inherit

 

 

li {
  list-style: upper-roman inside;
}

 

جدا از تنظیم مقادیر سه گانه گفته شده در بالا این ویژگی می تواند مقدار inherit را نیز بپذیرد که باعث می شود تا رفتار لیست پدر به لیست فرزند به ارث برسد.

اگر هریک از این سه ویژگی در زمان مقداری دهی list-style تعیین نشوند مقدار آنها همان مقدار پیشفرض در نظر گرفته می شود.

اگر فقط یک مقدار none به این ویژگی داده شود نشانه گر حذف خواهد شد.

 

li {
  list-style: none;
}

 

 

مثال

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

ul {
  list-style: square url('images/heart.png') inside;
}

 

دموی زیر را بررسی کنید:

 

See the Pen list-style by Mojtaba Seyedi (@seyedi) on CodePen.