ویژگی CSS list-style
- صف قبل line-height
- صفحه بعدی list-style-image
تعریف و استفاده
ویژگی کوتاه list-style تمام ویژگی‌های لیست را در یک بیان تنظیم می‌کند.
توضیحات
این ویژگی یک ویژگی کوتاه است که شامل تمام ویژگی‌های دیگر سبک لیست است. به دلیل اینکه به تمام عناصر display list-item اعمال می‌شود، در HTML و XHTML معمولی تنها می‌توان از آن برای عناصر li استفاده کرد، اما در واقع می‌تواند به هر عنصری اعمال شود و توسط عناصر list-item به ارث برسد.
ممکن است به ترتیب زیر ویژگی‌ها را تنظیم کنید:
ممکن است یکی از مقادیر را تنظیم نکنید، مانند "list-style:circle inside;" نیز مجاز است. ویژگی‌هایی که تنظیم نشده‌اند از مقدار پیش‌فرض خود استفاده می‌کنند.
لطفاً ببینید:
آموزش CSS:لیست CSS
دستورالعمل HTML DOM:ویژگی listStyle
مثال
تصویر را به عنوان نشانه‌ی آیتم‌های لیست در لیست تنظیم کنید:
ul
{
list-style:square inside url('/i/arrow.gif');
}
آموزش نحوی CSS:
list-style: list-style-type list-style-position list-style-image|initial|inherit;
مقدار ویژگی
| مقدار | توضیحات |
|---|---|
| list-style-type | نوع نشانه‌های لیست را تنظیم کنید. مشاهده کنید:list-style-type مقدارهای ممکن. |
| list-style-position | مکان قرارگیری نشانه‌های لیست را تنظیم کنید. مشاهده کنید:list-style-position مقدارهای ممکن. |
| list-style-image | از تصاویر برای جایگزینی نشانه‌های لیست استفاده کنید. مشاهده کنید:list-style-image مقدارهای ممکن. |
| inherit | این تعریف مشخص می‌کند که باید مقدار ویژگی list-style از عنصر والد به ارث برسد. |
جزئیات فنی
| مقدار پیش‌فرض: | disc outside none |
|---|---|
| انتقال: | بله |
| نسخه: | CSS1 |
| آموزش نحوی JavaScript: | object.style.listStyle="decimal inside" |
مثال‌های بیشتر
- تعریف تمام ویژگی‌های لیست در یک بیان
- این مثال نمایش می‌دهد که چگونه تمام ویژگی‌های مربوط به لیست را در یک ویژگی کوتاه (shorthand) تنظیم می‌کنیم.
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی هستند که این ویژگی را به طور کامل پشتیبانی می‌کنند.
| کروم | IE / Edge | فایرفاکس | سافاری | اوپرا |
|---|---|---|---|---|
| 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
- صف قبل line-height
- صفحه بعدی list-style-image
