cssblog.ir logo
P

list-style

شماره زدن یا علامت گذاری در کنار آیتم های لیست

با مشخصه list-style می توان نحوه نمایش لیست ها و علامت کنار آنها را کنترل نمود و حتی در صورت نیاز از تصویر بعنوان علامت کنار لیست استفاده نمود

این مشخصه یک مشخصه shorthand می باشد که با استفاده از آن می‌توان در یک عبارت ۳ زیرمشخصه دیگر list-style-type و list-style-positionو list-style-imageرا تعیین نمود.

نمونه استفاده از این مشخصه:

ul {
    list-style: disc outside none;
}

مثال فوق معادل همین استایل است:

ul {
	list-style-type: disc;
	list-style-position: outside;
	list-style-image: none;
}


مشخصه list-style-type

همانطور که احتمالا در نرم‌افزارهایی مانند وُرد مشاهده نموده‌اید موارد لیست‌ها می توانند در کنار خود علامت خاصی را داشته باشند که معمولا برای لیست‌های بدون ترتیب این علامت یک دایره تو پُر و برای لیست های با ترتیب شماره هر مورد می باشد.

مقادیر قابل استفاده برای این مشخصه:

disc circle square decimal decimal-leading-zero
lower-roman upper-roman lower-greek lower-latin upper-latin
armenian georgian lower-alpha upper-alpha none

در مثال زیر می‌توانید تاثیر مقادیر مختلف این مشخصه را مشاهده کنید: 

نکته قابل توجه این است که از این مشخصه می توان برای تمام لیست ها و همچنین عناصری که مقدار display: list-itemدارند، استفاده نمود.

مشخصه list-style-position

این مشخصه موقعیت علامت لیست‌ها را تعیین می‌کند که این موقعیت می تواند داخل (inside) یا بیرون (outside) باشد. دقت داشته باشید که این بیرون یا داخل به نسبت به liها خواهد بود. برای درک بهتر این مثال را در نظر بگیرید:

مشخصه list-style-image

با استفاده از این مشخصه بسیار کابردی می توان بجای علامت های پیشفرض از یک تصویر استفاده نمود. برای انجام چنین کاری از تابع urlاستفاده می کنیم.  

دقت داشته باشید که این مشخصه امکان تغییر سایز تصویر را نمی‌دهد و سایز خود تصویر اصلی باید مناسب با سایز متن باشد. 

خصلت های جالب لیست ها

در اینجا بهتر است که با دو خصلتstart وreversed آشنا شویم، چراکه می‌توانیم از آنها در کنار مشخصه list-styleاستفاده کنیم.

خصلت start

با استفاده از این مشخصه می‌توان تعیین نمود که شمارندهol از چه عددی آغاز شود.

خصلت reversed

این خصلت باعث می‌شود تا شمارنده موارد لیست بصورت نزولی نمایش داده شوند. 

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

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

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند