فهرست ها (list)

در css از ویژگی های list برای عناصر فهرست استفاده می کنیم که این عناصر عبارتند از: <ul>, <ol>, <li>.

ویژگی list-style-type

فهرست ها با استفاده از یک نشانگر که قبل از هر آیتم عنصر فهرست (<li>) نشان داده می شود بوجود می آیند. با استفاده از ویژگی list-style-type می توانیم نوع این نشانگر را تغییر دهیم.

برای یک فهرست مرتب نشده (unordered list - ul) هر آیتم مربوط به فهرست به روش مشابه نشانه گذاری می شود. گلوله های از پیش تعریف شده که در پایین مشاهده می کنید را می توان در فهرست استفاده کرد، و مقدار disc به عنوان مقدار پیش فرض است (یک دایره توپر).

list-style-type : inherit | disc | circle | square | none

در یک فهرست مرتب شده (ordered list - ol) تمام آیتم های فهرست با یک کاراکتر عددی نمایش داده می شوند که این اعداد نشان دهنده ترتیب آیتم ها است. تمام مرورگرهای اصلی وب از انواع عددی ذکر شده در زیر پشتیبانی می کنند، و مقدار decimal به عنوان مقدار پیش فرض است:

list-style-type : inherit | decimal | none | upper-alpha | lower-alpha | 
upper-roman |lower-roman |  
lower-latin | armenian | georgian |
decimal-leading-zero

در مثال زیر یک سبک جدید فهرست را برای دو عنصر فهرست تعریف می کنیم. این امکان وجود دارد که <ul> را به صورت نشانگرهای مرتب شده و <ol> را به صورت نشانگرهای مرتب نشده نمایش دهیم(یعنی برخلاف ماهیت اصلی شان)، اما این کار، مناسب نیست:

ul { list-style-type : square; } /*  */
ol { list-style-type : upper-roman; } /* I, II, III, … */

رنگ نشانگر مشابه رنگ متن عنصر است. این نکته را به خاطر داشته باشید که هر عنصر را می توانیم مجبور کنیم آیتم های فهرست را نمایش دهد، برای این کار باید ویژگی display را با مقدار list-item مقدار دهی کنیم.

ویژگی list-style-image

به عنوان یک جایگزین برای نشانگرهایی که به صورت از قبل تعریف شده برای آیتم های فهرست وجود دارند، می توانیم با استفاده از ویژگی list-style-image از یک تصویر شخصی – مورد علاقه خودمان – به عنوان نشانگر برای آیتم های یک فهرست استفاده کنیم.

list-style-image : inherit | none | url(<url>)

با استفاده از تابع url در داخل css مسیر تصویر مورد نظرمان را مشخص می کنیم:

list-style-image : url(my-bullet.png);

این ویژگی هر نوع نشانگر که با استفاده از ویژگی list-style-type انتخاب شده است را تحت تاثیر قرار می دهد. بنابراین بهتر است برای مواقعی که تصویر تعیین شده برای نشانگر در دسترس نیست یک list-style-type جایگزین تعریف کنیم تا مشکلی پیش نیاید.

ویژگی list-style-position

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

list-style-position : inherit | outside | inside 

انتخاب مقدار outside باعث می شود هر خطی از متن با شروع خط اول تراز شود، در حالیکه مقدار inside باعث می شود خط های متن زیر نشانگر تراز شوند. همچنین مقدار inside باعث می شود از نظر بصری، نشانگر دارای تورفتگی شود.

ویژگی list-style

ویژگی list-style کوتاه شده تمام موارد بالاست. مقادیر مربوط به این ویژگی را می توانیم با هر نوع ترتیبی ذکر کنیم، به خاطر اینکه این مقادیر هیچ نوع ابهامی نسبت به یکدیگر ندارند. البته می توان هر کدام از مقادیر را نیز نادیده گرفت. در این حالت مقدار پیش فرض این ویژگی مورد استفاده قرار می گیرد.

list-style : <list-style-type> | <list-style-image> | <list-style-position>

در مثال زیر نوع (type) و محل (position) مربوط به نشانگر مشخص می شود که این مقادیر به آیتم های فهرست اعمال می شود:

<ul style=”list-style: inside square;”>
<li>مورد اول</li>
<li>مورد دوم</li>
<li>مورد سوم</li>
</ul>

این نکته را در نظر داشته باشید که با استفاده از این ویژگی ها تنها نمی توان نگهدارنده های فهرست شامل ul و ol را سبک دهی کرد بلکه این ویژگی ها یک آیتم مربوط به فهرست را نیز سبک دهی می کنند.

Counters با استفاده از ویژگی های counter-increment و counter-reset می توان عناصر را به صورت خودکار در css شماره دهی کرد. ویژگی counter-reset نام شمارنده را مشخص می کنند. این ویژگی به صورت انتخابی به همراه مقدار اولیه شمارنده می آید که مقدار پیش فرض zero است.

/*ایجاد یک شمارنده با نام chapter */
body{counter-reset: chapter; }

ویژگی counter-increment نام شمارنده را می گیرد و یک عدد اختیاری به آن اضافه می کند. عددی که مشخص می کند با ظاهر شدن عنصر هر دفعه چه مقداری به آن اضافه می شود به صورت پیش فرض عدد 1 است.

/* این دستور شمارنده را در هر <h1> یکی اضافه می کند */
h1:before { counter-increment: chapter; }

مرحله نهایی برای ایجاد یک شمارنده این است که آن را با استفاده از تابع counter() در css نمایش دهیم. نام شمارنده به عنوان ورودی برای این تابع است. در این مثال شماره فصل قبل از عنصر های <h1> نوشته می شود.

/* افزایش دادن مقدار شمارنده و نمایش دادن آن */
h1:before{
content: “chapter “ counter(chapter) “ – “ ;
content-increment: chapter;
}

حالا تابع counter شماره فصل را قبل از <h1> اضافه می کند:

<h1>First</h1><!-- Chapter1 - First -->
<h1>Second</h1><!—Chapter2 - Second -->
<h1>Third</h1><!—Chapter3 - Third -->

ما می توانیم یک شمارنده دیگر را برای شمردن زیرعنوان های <h2> استفاده کنیم. در اینجا این شمارنده را در هر عنصر <h1> صفر می کنیم.

h2:before {
content: counter(chapter) “.” Counter(section) “ “;
counter-increment: section; 
}
h1{
counter-reset: section;
}

در مثال زیر مشاهده می کنید که شمارنده ها چگونه نمایش داده می شوند:

<h1>Head</h1><!--Chapter1 - Head -->
<h2>Sub</h2><!--1.1 Sub -->
<h2>Sub</h2><!--1.2 Sub -->
<h1>Head</h1><!-- Chapter2 - Head -->
<h2>Sub</h2><!--2.1 Sub -->

شمارنده های تودرتو (Nesting counters)

شمارنده های css را می توان تا هر سطحی که تمایل داشتید به صورت تودرتو بنویسید. با استفاده از تابع counters() می توانیم این شمارنده ها را با یکدیگر ترکیب کرده و نمایش دهیم. اولین ورودی تابع، نام شمارنده است و ورودی دوم یک رشته است که مشخص می کنند جداکننده بین اعداد چه چیزی باشد.

ul{ counter-reset: item; }
li:before{
content: counters(item, “ “ ) “ “;
counter-increment: item; 
}

قوانین نوشته شده در بالا به فهرست نامرتبی که در مثال زیر مشاهده می کنید اعمال شده است (توجه کنید که یک نمونه جدید از شمارنده به صورت خودکار برای هر فهرست تودرتو ساخته شده است):

<ul>
<li>item</li><!—1 item -->
<li>item</li><!—2 item -->
<ul>
<li>item</li><!—2.1 item -->
<li>item</li><!—2.2 item -->
</ul>
</ul>

شمارنده ها در تمام مرورگرهای اصلی پشتیبانی می شوند. تمام نسخه های Chrome, Firefox, Safari &Opera و IE8+.