لیست های غیر منظم:

  • قهوه
  • چای
  • کوکاکولا
  • قهوه
  • چای
  • کوکاکولا

لیست های سفارش داده شده:

  1. قهوه
  2. چای
  3. کوکاکولا
  1. قهوه
  2. چای
  3. کوکاکولا

لیست های HTML و ویژگی های لیست CSS

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

  • لیست های غیر مرتب شده (<ul>) – موارد لیست با گلوله مشخص می شوند
  • لیست های مرتب شده (<ol>) – موارد لیست با اعداد یا حروف مشخص شده اند

ویژگی های لیست CSS به شما اجازه می دهد:

  • نشانگرهای مختلف مورد لیست را برای لیست های مرتب شده تنظیم کنید
  • نشانگرهای مختلف مورد لیست را برای لیست های غیر مرتب تنظیم کنید
  • یک تصویر را به عنوان نشانگر مورد لیست تنظیم کنید
  • رنگ پس زمینه را به لیست ها و موارد لیست اضافه کنید

نشانگرهای مختلف لیست موارد

list-style-typeاموال نوع لیست item marker مشخص می کند.

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

مثال

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

توجه: برخی از مقادیر مربوط به لیست های غیر مرتب و برخی دیگر برای لیست های مرتب شده است.


تصویری به عنوان نشانگر مورد لیست

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

مثال

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

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

list-style-positionاموال موقعیت نشانگر لیست کالا (نقاط گلوله) مشخص می کند.

“list-style-position: derveyî؛” به این معنی است که نقاط گلوله خارج از لیست لیست خواهد بود. شروع هر خط از یک لیست به صورت عمودی تراز می شود. این پیش فرض است:

  • قهوه – نوشیدنی دم کرده تهیه شده از دانه های بو داده قهوه …
  • چای
  • کوکاکولا

“list-style-position: inside؛” به این معنی است که نقاط گلوله در داخل مورد لیست قرار خواهد گرفت. همانطور که بخشی از لیست لیست است ، بخشی از متن خواهد بود و متن را در آغاز فشار می دهد:

  • قهوه – نوشیدنی دم کرده تهیه شده از دانه های بو داده قهوه …
  • چای
  • کوکاکولا

مثال

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

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

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

از این list-style-type:noneویژگی می توان برای پاک کردن نشانگرها / گلوله ها نیز استفاده کرد. توجه داشته باشید که این لیست حاشیه و padding پیش فرض نیز دارد. برای حذف این ، به <ul> یا <ol> اضافه کنید margin:0و padding:0:

مثال

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

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

  • list-style-type (اگر یک لیست به سبک تصویر مشخص شده باشد ، اگر به دلایلی تصویر قابل نمایش نباشد ، مقدار این ویژگی نمایش داده می شود)
  • list-style-position (مشخص می کند که آیا نشانگرهای مورد لیست باید در داخل یا خارج جریان محتوا ظاهر شوند)
  • list-style-image (تصویری را به عنوان نشانگر مورد لیست مشخص می کند)

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


لیست یک ظاهر طراحی شده با رنگ

ما همچنین می توانیم لیست ها را با رنگ سبک کنیم تا کمی جالب تر به نظر برسند.

هر چیزی که به برچسب <ol> یا <ul> اضافه شود ، روی کل لیست تأثیر می گذارد ، در حالی که خصوصیات اضافه شده به برچسب <li> روی موارد جداگانه لیست تأثیر می گذارد:

مثال

ol {
  background: #ff9999;
  padding: 20px;
}

ul {
  background: #3399ff;
  padding: 20px;
}

ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}

ul li {
  background: #cce5ff;
  margin: 5px;
}

نتیجه:

منبع