فرمت دهی لیست ها در CSS

چاپ

لیست ها در CSS

Wiki

خصوصیات مربوط به لیست ها در CSS به شما اجازه می دهد تا:

برای لیست های مرتب و نامرتب علامتگذاری های مختلفی را تنظیم کنید.
برای علامتگذاری آیتمها، از یک عکس استفاده کنید.

لیست ها در HTML

Wiki

در HTML دو نوع لیست وجود دارد:

لست های نامرتب(unorder list): آیتم های این نوع لیست با هرچیزی غیر از اعداد و حروف علامتگذاری می شوند.
لیست های مرتب(order list): آیتم های لیست با اعداد و حروف، علامتگذاری می شوند.

با CSS بیشتر می توان لیست ها را دستکاری کرد، مثلاً آیتم های لیست را با یک عکس علامتگذاری نمود.

علامتگذاری های مختلف(Bullet)

Wiki

با خصوصیت list-style-type می توان، نوع علامتگذاری را مشخص نمود:

مثال (فرمت دهی لیست ها در CSS)

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

خودتان امتحان کنید »

بعضی از مقادیر برای لیست های نامرتب و بعضی دیگر برای لیست های مرتب استفاده می شود.

علامتگذاری آیتم ها با یک عکس

Wiki

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

مثال (فرمت دهی لیست ها در CSS)

ul
{
list-style-image: url('sqpurple.gif');
}

خودتان امتحان کنید »

مثال بالا، در تمام مرورگرها بطور یکسان نمایش داده نخواهد شد. عکس در IE و Opera یک مقدار بزرگ تر از Firefox و Chrome و Safari نمایش داده می شود.

راه حل؟

Wiki

مثال زیر در تمام مرورگرها به طور یکسان نمایش داده می شود:

مثال (فرمت دهی لیست ها در CSS)

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}

خودتان امتحان کنید »

توضیح مثال بالا:

با تنظیم خصوصیت list-style-type با مقدار "none" علامتگذاری، حذف خواهد شد.
Padding و margin را با مقدار 0px تنظیم می کنیم(برای سازگاری بیشتر یا compatibility)

خصوصیت background-image با آدرس عکس و البته بدون تکرار تنظیم می شود.
جای که می خواهید عکس قرار گیرد در خصوصیت background-position تنظیم شده است.(چپ 0px و پایین 5px)
مکان متن آیتم (</li>متن<li>) در خصوصیت padding-left تنظیم شده است.(برای لیست های فارسی باید خصوصیت padding-right تنظیم شود)

خصوصیت list-style-position

Wiki

اگر آیتم های لیست علامتگذاری شده باشند، این خصوصیت مشخص می کند که علامتگذاری باید داخل(inside) یا خارج(outside) محتوی باشد

مثال (فرمت دهی لیست ها در CSS)

ul
{
list-style-position:inside;
}

خودتان امتحان کنید »

مختصر نویسی - لیست

Wiki

تمام خصوصیات مربوط به لیست را می توان در یک مرحله تنظیم نمود. این کار به اصطلاح، مختصر نویسی نامیده می شود.

خصوصیت list-style برای مختصرنویسی در CSS استفاده می شود:

مثال (فرمت دهی لیست ها در CSS)

ul
{
list-style: square url("sqpurple.gif");
}

خودتان امتحان کنید »

ترتیب مقادیر:

list-style-type
list-style-position
list-style-image

اگر یکی از مقادیر بالا ذکر نشود، مشکلی پیش نخواهد آمد، تنها چیزی که اهمیت دارد ترتیب مقادیر است.

مثال - خودتان امتحان کنید

Wiki

کلیه علامتگذاری های مختلف لیست
این مثال تمام علامتگذاری های مختلف را در CSS نشان خواهد داد.

کلیه ویژگی های مربوط به لیست ها در CSS

Wiki

خصوصیت	توضیحات
list-style	تمام خصوصیات مربوط به لیست را در یک مرحله تنظیم خواهد کرد
list-style-image	آیتم های یک لیست را با یک عکس علامتگذاری می کند
list-style-position	اگر آیتم های لیست علامتگذاری شده باشند، این خصوصیت مشخص می کند که علامتگذاری باید داخل(inside) یا خارج(outside) محتوی باشد
list-style-type	نوع علامتگذاری آیتم های لیست را مشخص می کند.

: نوشته شده توسط امیر پهلوان صادق; بازدید: 35649