استایل بندی لیست‌ها و آشنایی با مفاهیم آن در CSS

[ آخرین بازنگری ۲۱ آبان ۱۳۹۵ ] [ نسخه چاپی ]

لیست‌ها یکی از بخش‌های مهم در css هستند و علاوه بر اینکه برای نمایش فهرست وار مطالب مورد استفاده قرار می‌گیرند، در ساخت منوهای ساده و آبشاری نیز بسیار کاربرد دارند.

مشخصه‌ی لیست در css به شما اجازه میدهد تا:

  • نشانگر خاصی را برای موارد لیست‌های مرتب انتخاب کنید (لیست‌هایی با تگ ol)
  • نشانگر خاصی را برای موارد لیست‌های نامرتب انتخاب کنید (لیست‌هایی با تگ ul)
  • تعیین یک تصویر به عنوان نشانگر موارد لیست‌ها (تگ‌های li)
  • و …

 

لیست ها در css

 

ساختار لیست‌ در css و html

اگر با html آشنایی داشته باشید میدانید که دو نوع لیست وجود دارد:

  • لیست‌ بدون ترتیب که موارد موجود در این لیست‌ها با بولت ( • ) نشان داده می‌شوند و درون تگ ul قرار می‌گیرند.
  • لیست  مرتب که موارد موجود در این لیست‌ها با شماره و یا حروف نشان داده می‌شوند و درون تگ ol قرار می‌گیرند.

حال با استفاده از CSS میتوانید در تمام این موارد تغییر ایجاد کنید و نحوه‌ی نمایش آنها را تغییر دهید و یا به جای بولت یا اعداد از تصاویری که خودتان تعیین می‌کنید استفاده نمایید.

تغییر در نوع بولت یا اعداد لیست در css

برای تعیین علائم آیتم‌های موجود در لیست از نظر حالت و شکل، باید از مشخصه list-style-type استفاده کنید:

مثال:

ul{list-style-type : circle;}
ul.mylist{list-style-type : square;}
ol{list-style-type : upper-roman;} ol.mylist{list-style-type : lower-alpha ;}

همانطور که ملاحظه می‌کنید، برای کنترل نمایش لیست‌ها در css از انتخابگری با نام معادل تگ html آن استفاده شده است. اگر بخواهید تمام لیست‌ها تحت تاثیر قرار نگیرند و یک لیست بخصوص را به شیوه‌ی خاصی نمایش دهید می‌بایست یک کلاس css به آن اختصاص دهید.

در مثال بالا برای لیست‌های بدون ترتیب، یک کلاس با نام mylist درنظر گرفته شده که در این کلاس تعیین شده است که آیتم‌های این لیست با علامت مربع نمایش داده شوند.

<ul class="mylist">
<li> ... </li>
</ul>

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

برای قرار دادن تصویر دلخواه به عنوان بولت آیتم‌های موجود در لیست (مثلا علامت تیک)، باید از مشخصه‌ی list-style-image استفاده شود. به مثال زیر توجه کنید:


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

در صورتی که تصویری با نام tikmark.gif در پوشه‌ی فایل‌های css موجود باشد، در کنار آیتم‌های لیست‌ html که با تگ ul مشخص شده‌اند، تصویر تیک قرار خواهد گرفت.

البته ممکن است لازم باشد در مرورگرهای مختلف لیست را بررسی کنید تا از یکسان بودن نمایش در انواع مرورگرها اطمینان حاصل شود. چرا که مرورگرهایی مانند اینترنت اکسپلورر و اوپرا در این زمینه کمی متفاوت  عمل می‌کنند.

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

در مثال فوق، با استفاده از list-style-type: none; بولت‌های لیست حذف شده‌اند و میزان حاشیه‌ی داخلی padding و حاشیه‌ی خارجی margin برابر ۰px تعیین شده‌اند تا لیست در تمام مرورگرها یکسان نمایش داده شود.

در بخش دوم، برای تگ‌های li تصویر زمینه تعیین و با مقدار no-repeat از تکرار آن جلوگیری شده است. همچنین بجای بولت‌های مخفی شده، از تصویر کمک گرفته شده است.

با استفاده از background-position نیز محل دقیق نمایش تصویر به عنوان بولت آیتم‌های لیست مشخص شده است.

خلاصه سازی تمام مشخصه‌های لیست در CSS

حال که انواع مشخصه‌ها را برای نمایش لیست‌ها یاد گرفتید لازم است بدانید که برای کاهش حجم فایل استایل، بهتر است تمام مشخصه‌ها را به صورت خلاصه شده در مشخصه‌ی list-style قرار دهید. نحوه‌ی استفاده از این مشخصه به این صورت است:


list-style: list-style-type list-style-position list-style-image;

مثال:

ul{
list-style-type: square;
list-style-image: url(tikmark.gif);
}
تبدیل می‌شود به:


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

که squar مقدار مشخصه‌ی list-style-type است و پس از آن مقدار مشخصه‌ی list-style-image فراخوانی شده است.

به خاطر داشته باشید که هنگامی که از مشخصه‌ی list-style استفاده می‌کنید (به جای اینکه تک تک ذکر کنید)، باید ترتیب موارد را به صورت زیر رعایت کنید:

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

البته الزامی نیست که تمام موارد ذکر شده را مورد استفاده قرار دهید و همانند مثال فوق می‌توانید یک یا چند تا از مشخصه‌ها را بر اساس نیاز خود حذف نمایید.

احتمالا این مطالب برای شما جالب هستند

آموزش css – درس ششم – ویرایش متن
استایل‌بندی لینک و پیوندها در صفحات وب با css
آموزش css – درس هفدهم – شناور سازی (Float)
طراحی و استایل بندی جدول با کمک CSS
آموزش جامع ایجاد منوی آبشاری با استفاده از CSS در طراحی سایت
آموزش css – درس چهاردهم – گروه بندی انتخابگرها

گفتگو پیرامون استایل بندی لیست‌ها و آشنایی با مفاهیم آن در CSS

(منتشر شده: 0 | در انتظار تایید: 0)

مرام‌نامه‌ی ارسال دیدگاه را رعایت کرده‌ام! (»نمایش مرام‌نامه)