تعیین همزمان جزئیات استایل لیست ها در CSS – ویژگی list-style

در CSS از ویژگی list-style برای تعیین جزئیات استایل لیست ها (شامل تعیین نوع نشانگر، موقعیت نشانگر و تعیین تصویر به عنوان نشانگر) استفاده می‌شود.

این ویژگی، یک ویژگی خلاصه برای سه ویژگی list-style-type, list-style-position و list-style-image است که هرکدام از آن‌ها برای تعیین نوع نشانگر، موقعیت نشانگر و تعیین تصویر یا رنگ شیبدار به عنوان نشانگر لیست به کار می‌روند. در واقع برای تعیین همزمان جزئیات مربوط به استایل لیست ها در CSS می‌توانید از ویژگی list-style کمک بگیرید.

نحوه تعیین ظاهر لیست با کمک ویژگی list-style در CSS

مثال زیر نمونه‌ای از تعیین یک نشانگر همراه با موقعیت نشانگر و تعیین یک تصویر به عنوان نشانگر آیتم‌های لیست در CSS با کمک ویژگی list-style را نمایش می‌دهد:

ul {
  list-style: square inside url('sample.gif');
}

با توجه به مقدار square inside url('sample.gif') برای این ویژگی، از یک تصویر با نام sample.gif به عنوان نشانگر در لیست های نامرتب (المان های <li> که فرزند المان <ul> باشند) استفاده می‌شود. این نشانگر داخل جعبه مربوط به محتوای آیتم‌های لیست قرار می‌گیرد. به علاوه در صورت عدم دسترسی به تصویر، از یک مربع توپر برای نشانگر آیتم های لیست استفاده می‌شود.

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

جزئیات مقدار ویژگی list-style

شما می‌توانید برای ویژگی list-style مقداری شامل موارد زیر درج کنید:

• نشانگر آیتم‌های لیست: مقدار مربوط به این بخش می‌تواند مشابه با ویژگی list-style-type نوع نشانگر آیتم های لیست را با کمک یکی از مقادیر none, disc, circle, square, decimal, lower-alpha, lower-latin, lower-roman, upper-alpha, upper-latin یا upper-roman مشخص کند. مقدار پیشفرض برای نوع نشانگر (در صورت عدم تعیین) برابر با disc خواهد بود. (بیشتر بخوانید: تعیین نشانگر لیست در CSS – ویژگی list-style-type).
• موقعیت نشانگر: مقدار مربوط به این بخش می‌تواند مشابه با ویژگی list-style-position شامل یکی از مقادیر inside (برای قرارگیری نشانگر داخل جعبه محتوای آیتم‌ها) و outside (برای قرارگیری نشانگر خارج از جعبه محتوا) باشد. مقدار پیشفرض برای این بخش (در صورت عدم تعیین) برابر با outside خواهد بود. (بیشتر بخوانید: تعیین موقعیت نشانگر لیست در CSS – ویژگی list-style-position).
• تصویر (به عنوان نشانگر): مقدار مربوط به این بخش می‌تواند مشابه با ویژگی list-style-image شامل یک تصویر یا یک رنگ شیبدار باشد. (بیشتر بخوانید: تعیین تصویر به عنوان نشانگر لیست در CSS – ویژگی list-style-image).

یک نکته تکمیلی

اگر مقدار متناظر با هر دو ویژگی list-style-type و list-style-image در ویژگی list-style مشخص شود نتیجه، رفتاری مشابه با استفاده مجزا از آن‌ها خواهد بود. به این معنی که مقدار list-style-type صرفا به عنوان جایگزین هنگام در دسترس نبودن تصویر انتخابی (با کمک list-style-image) به کار می‌رود.

بازگشت به فهرست مجموعه آموزشی CSS