لیست ها در css

لیست ها در css به دو دسته زیر تقسیم می شوند:

Unordered Lists

• Coffee
• Tea
• Coca Cola

• Coffee
• Tea
• Coca Cola

Ordered Lists

1. Coffee
2. Tea
3. Coca Cola

1. Coffee
2. Tea
3. Coca Cola

لیست های HTML و خصوصیات آن ها در CSS

• unordered lists یا <ul>: لیست هایی که با بالت ها، نشانه گذاری می شوند.
• ordered lists یا <ol>: لیست هایی که با اعداد یا حروف، نشانه گذاری می شوند.

با استفاده از css موارد زیر را می توانیم تغییر دهیم:

• می توانیم نشانگرهای متفاوتی برای ordered list ها قرار دهیم: مثل استفاده از اعداد انگلیسی یا یونانی
• می توانیم نشانگرهای متفاوتی برای unordered list ها قرار دهیم: مثل استفاده از مربع یا دایره
• می توانیم یک تصویر را به عنوان نشانگر لیست ها در css انتخاب کنیم.
• می توانیم رنگی را برای پس زمینه لیست و آیتم هایش در نظر بگیریم.

انواع نشانگر لیست ها در css

خصوصیت list-style-type نوع نشانگر را مشخص می کند. به مثال زیر دقت کنید:

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;
}

که نتیجه را در ادامه، مشاهده می کنید:

• Coffee
• Tea
• Coca Cola

• Coffee
• Tea
• Coca Cola

1. Coffee
2. Tea
3. Coca Cola

1. Coffee
2. Tea
3. Coca Cola

همان طور که مشاهده می کنید، بعضی از مقادیری که داده شده مربوط به ordered list و بعضی مربوط به unordered list ها است.

قرار دادن تصویر به عنوان نشانگر

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

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

نتیجه را در تصویر زیر می بینید:

موقعیت نشانگر لیست ها در css

با استفاده از خصوصیت list-style-position مکان نشانگرها مثل بالت ها را تعیین می کنیم.

ul.a {
  list-style-position: outside;
}
ul.b {
  list-style-position: inside;
}

list-style-position: outside

بدین معنی است که نشانگرها بیرون از محدوده متن قرار می گیرند. در این جا شروع متن ها از لحاظ عمودی در یک راستا قرار می گیرند که این حالت، حالت پیش فرض است.

list-style-position: inside

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

حذف تنظیمات پیش فرض

با استفاده از خصوصیت list-style-type:none می توان تمامی تنظیمات پیش فرض نشانگرها (بالت ها) را حذف کرد.
توجه داشته باشید که لیست ها به صورت پیش فرض margin و padding دارند؛ برای حذف آن ها در کد مربوط به ol و ul مقدار آن ها را برابر صفر قرار دهید:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

خلاصه نویسی خصوصیت ها

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

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

ترتیب خصوصیت ها در این موقع، به صورت زیر است:

1. list-style-type: در صورتی که خصوصیت list-style-image نیز تعیین شده باشد، اگر تصویر مورد نظر به دلایلی نمایش داده نشود، این نوع نشانگر نمایش داده می شود.
2. list-style-position: بیانگر این است که نشانگرها (بالت ها) درون یا بیرون محتوا قرار می گیرند.
3. list-style-image: تصویری را به عنوان نشانگر انتخاب می کند.

نکته: در صورتی که هرکدام از موارد بالا نوشته نشود، اگر مقدار پیش فرضی داشته باشد، همان مقدار، برایش اعمال می شود.

رنگ دادن به لیست ها در css

با استفاده از رنگ ها می توان جذابیت لیست ها را افزایش داد.
هر ویژگی که به تگ های <ol> یا <ul> می دهیم، بر روی کل لیست تأثیر می گذارد اما ویژگی هایی که به <li> اعمال می شود، تنها بر روی همان آیتم از لیست تأثیر می گذارد.
به مثال زیر دقت کنید:

ol {
  background: red;
  padding: 20px;
}
ul {
  background: yellow;
  padding: 20px;
}
ol li {
  background:pink;
  padding: 5px;
  margin-left: 35px;
}
ul li {
  background: purple;
  margin: 5px;
}

که نتیجه را به صورت تصویر زیر مشاهده می کنید:

برگرفته از وب سایت w3schools