آموزش استفاده از لیست ها(List) در CSS

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

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

1. لیست های نامرتب(<ul>): در این نوع لیست، آیتم ها با استفاده از دایره های کوچک علامت گذاری می شوند.

2. لیست های مرتب(<ol>): در این نوع لیست، آیتم ها با استفاده از اعداد یا حروف، علامت گذاری می شوند.

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

1. برای آیتم لیست مرتب، یک علامت متفاوت تعریف کنیم.

2. برای آیتم لیست نامرتب، یک علامت متفاوت تعریف کنیم.

3. برای آیتم لیست، یک تصویر مشخص کنیم.

4. برای لیست ها و آیتم های لیست ها، یک رنگ پس زمینه تعریف کنیم.

استفاده از علامت های مختلف برای آیتم های لیست ها

ویژگی 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;
}

نکته: برخی مقادیر مخصوص لیست های نامرتب هستند و برخی مخصوص لیست های مرتب.

استفاده از یک تصویر بعنوان علامت آیتم لیست

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

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

موقعیت دهی به علامت های آیتم های لیست

ویژگی list-style-position، موقعیت علامت آیتم های لیست را مشخص می کند(نقاط دایره ای). دستور list-style-position: outside; یعنی دایره(bullet) در بیرون از آیتم لیست قرار داشته باشد. شروع هر خط از آیتم لیست به صورت عمودی تراز(align) می شود. این پیش فرض است:

• قهوه، یک نوشیدنی که خواب را از سر انسان می پراند.
• چای
• نوشابه

دستور list-style-position: inside به این معنی است که دایره ها باید در درون آیتم لیست قرار گیرند:

• قهوه، یک نوشیدنی که خواب را از سر انسان می پراند.
• چای
• نوشابه

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

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

حذف تنظیمات پیش فرض برای لیست ها

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

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

استفاده از ویژگی خلاصه شده ی list-style

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

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

 وقتی که از ویژگی خلاصه ی شده ی مذکور استفاده می کنیم، ترتیب مقادیر این ویژگی به صورت زیر است(که باید قرار دهیم):

1.  list-style-type : اگر یک list-style-image مشخص شده باشد، و تصویر مود نظر به هر علتی نتواند نمایش یابد، مقدار این ویژگی، نمایش داده می شود.

2. list-style-position : مشخص می کند که علامت های آیتم های لیست باید در درون یا در بیرون از محتوا قرار گیرند.

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

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

استایل دهی به لیست ها با استفاده از رنگ

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

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

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

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

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

 مثال های بیشتر

سفارشی سازی لیست با قرمز کردن کادر سمت چپ

این مثال نشان می دهد که چگونه یک لیست ایجاد کنیم که سمت چپ کادرش قرمز باشد.

یک لیست که کاملاً دور آن کادر قرار دارد

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

استفاده از علامت های متفاوت برای آیتم های لیست

این مثال نشان می دهد که تمام علامت های آیتم های لیست متفاوت هستند.