سبد (0)

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

لیست ها در CSS

Wiki

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

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

لیست ها در HTML

Wiki

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

  1. لست های نامرتب(unorder list): آیتم های این نوع لیست با هرچیزی غیر از اعداد و حروف علامتگذاری می شوند.
  2. لیست های مرتب(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;
}
خودتان امتحان کنید »

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

  1. ul:
    • با تنظیم خصوصیت list-style-type با مقدار "none" علامتگذاری، حذف خواهد شد.
    • Padding و margin را با مقدار 0px تنظیم می کنیم(برای سازگاری بیشتر یا compatibility)
  2. li:
    • خصوصیت 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");
}
خودتان امتحان کنید »

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

  1. list-style-type
  2. list-style-position
  3. list-style-image

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


مثال

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

Wiki

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


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

Wiki

خصوصیت توضیحات
list-style

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

list-style-image

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

list-style-position

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

list-style-type

نوع علامتگذاری آیتم های لیست را مشخص می کند.

آموزش صوتی CSS

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه