فهرست ها (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+.

ابعاد - dimensions در css

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

Width & height

با استفاده از ویژگی های width و height می توانیم عرض و ارتفاع محدوده محتوای مربوط به یک عنصر را تنظیم کنیم. این دو ویژگی را می توانیم با یک مقدار طولی یا درصد مشخص کنیم، که درصد به نسبت ابعاد عنصر والد تعیین می شود.

width | height: auto | <length> | <percentage>

مقدار پیش فرض برای این ویژگی، مقدار auto است. در حالت معمولی یک عنصر از نوع بلوک تا لبه های ظرف نگهدارنده خود کشیده می شود. در مقابل آن ارتفاع عنصر کم می شود تا با محتوا تنظیم شود. با استفاده از ویژگی های width و height می توان این رفتارهای پیش فرض را تغییر داد. در مثال زیر در عناصری که این کلاس به آنها اعمال شده است، عرض به اندازه 100 پیکسل و ارتفاع به اندازه 50 پیکسل تعیین می شود. پس از آنکه این اندازه ها به یک عنصر اعمال شد، آن عنصر این اندازه را پیدا می کند و حتی اگر اندازه صفحه تغییر کند بازهم اندازه عنصر تغییر نخواهد کرد.

این نکته را به خاطر داشته باشید که مقادیر مربوط به height و width شامل padding، border و margin نمی شود. این ویژگی ها عرض و ارتفاع فضای داخلی عنصر را مشخص می کنند.

.mybox{
width : 100px;
height : 50px;
}

ویژگی های min-width و min-height

این ویژگی ها، کمترین و بیشتری ابعاد یک عنصر را مشخص می کنند. با استفاده از این ویژگی ها بازهم طول و ارتفاع عنصر تا جایی گسترش پیدا می کند که با محتوا هماهنگ شود، اما عرض یا ارتفاع عنصر تا مقداری کمتر از کمترین ابعاد تعیین شده تنظیم نمی شود. همانطور که قبلا هم گفته شد این مقدار شامل padding, border & margin نمی شود.

min-width| min-height : <length> | <percentage>

مقادیر معتبر برای این دو ویژگی یک مقدار طولی یا یک مقدار بر اساس درصد است، که در آن درصد به نسبت ابعاد بلوک نگهدارنده محتوا محاسبه می شود. به عنوان مثال، در کلاس زیر مشخص می کنیم که یک عنصر حداقل 50درصد عرض و ارتفاع موجود را اشغال کند:

.half{
min-width : 50%;
min-height : 50%;
}

ویژگی های max-width و max-height

با استفاده از ویژگی های max-width و max-height می توانیم بیشترین ابعاد منطقه محتوای مربوط به یک عنصر را تعیین کنیم. این مقدار را می توان بر اساس یک مقدار طولی یا درصد مشخص کنیم؛ با استفاده از کلیدواژه none می توانیم مقداری که قبلا تعیین شده است را پاک کنیم.

max-width | max-height : none | <length> | <percentage>

با تنظیم کردن مقدار کمترین و بیشترین عرض و طول، شما می توانید یک فاصله را تعیین کنید که عرض یک عنصر چگونه تغییر کند. یک عنصر از نوع بلوک با استفاده از کلاسی که در زیر تعریف کرده ایم سعی می کند اگر امکان داشته باشد عرضی به اندازه 500 پیکسل داشته باشد. زمانی که فضای افقی محدود باشد، این کلاس عنصر را وادار می کند عرضش کمتر از 200 پیکسل نباشد.
در حالت عادی ممکن است عرض صفحه بیشتر از عرض تعریف شده توسط css باشد و در این حالت مرورگر به صورت خودکار یک نوار پیمایش ایجاد می کند. برای جلوگیری از این مساله، از این دو ویژگی استفاده می کنیم. در این صورت دیگر نگران ایجاد یک نوار پیمایش نخواهیم بود و مرورگر به صورت خودکار عرض را تنظیم می کند:

max-width : 500px;
min-width : 200px;

ویژگی max-width نسبت به ویژگی min-width دارای اولویت است. با این وجود این مساله در مورد ارتفاع متفاوت است، به خاطر اینکه ویژگی min-height دارای اولویت بیشتری نسبت به ویژگی max-height است. بنابراین در مثال زیر، عنصری که دارای کلاس تعریف شده زیر است دارای ارتفاع 5em خواهد بود مگر اینکه محتوای داخل عنصر به ارتفاع بیشتری نیاز داشته باشد. در این حالت عنصر به صورت عمودی تا بیشترین مقداری که اجازه داده شده است (20em) گسترش پیدا می کند.

.mybox{
max-height : 20em;
min-height : 5em;
}

این نکته را در نظر داشته باشید که مقادیر ثابت مربوط به طول و عرض را نباید با مقادیر min و max به صورت همزمان استفاده کنیم. چهار ویژگی مربوط به min و max که در بالا به آنها اشاره شد در بیشتر مرورگرهای معتبر مورد پشتیبانی قرار می گیرند؛ این مرورگرها شامل این موارد هستند:
Chrome 1+, Firefox1+, IE7+, Safari1+, Opera8+. از این ویژگیها به همراه قوانین مربوط به media برای طراحی صفحات برای نمایش در صفحه های با اندازه های مختلف استفاده می شود. ویژگی box-sizing ویژگی های مربوط به ابعاد معمولا به محدوده محتوا اشاره می کنند، و با محدوده padding یا border کاری ندارد. بنابراین برای اطلاع از عرض و ارتفاع واقعی که یک عنصر در مدل box model اشغال می کند، میزان padding و border که آن عنصر اشغال می کند نیز باید محاسبه شود.

/* یک عنصر با عرض 100 پیکسل */
.mybox{
padding : 3px;
border : 2px solid black;
width : 90px;
}

در css3 یک ویژگی با نام box-sizing در اختیار طراحان وب قرار گرفته است که به آنها اجازه می دهد این انتخاب را داشته باشند که عرض و طول ها چگونه محاسبه شوند. مقدار پیش فرض برای این ویژگی content-box است و به این نکته اشاره می کند که ویژگی های ابعاد فقط به محدوده محتوا اشاره می کند. مقدار جایگزین دیگر border-box است که padding و border را نیز در این اندازه گیری دخیل می کند.

box-sizing : content-box | border-box;

با تغییردادن مقدار مربوط به box-sizing به border-box می توانید یک طرح بندی شبکه ای (grid layout) را بهتر ایجاد کنید به خاطر اینکه دیگر لازم نیست که خودتان مقدار مربوط به padding و border را محاسبه کنید.

/* یک عنصر با عرض 100 پیکسل */
.mybox{
box-sizing : border-box;
padding : 3px;
border : 2px solid gray;
width : 100px
}

ویژگی border-box خصوصیات خود را از عنصر والدش به ارث نمی برد، اما این ویژگی تمام خصوصیات خود را به تمام عناصری که در وب سایت از انتخاب کننده universal استفاده می کند نسبت می دهد. برای افزایش میزان پشتیبانی مرورگرهای وب از این ویژگی باید از پیشوندهای –webkit و –moz استفاده کنید:

/* استفاده از border-boxبرای تمام عنصر ها */
*{
/* Chrome 1-8, Safari 3-5 */
-webkit-box-sizing: border-box;
/* Firefox 1-28 */
-moz-box-sizing: border-box;
/* Chrome9+, Firefox29+, IE8+, Safari5.1+, Opera9.5+ */
box-sizing: border-box;
}

پشتیبانی از ویژگی box-sizing در وضعیت خوبی قرار دارد و تقریبا تمام مرورگرهای وب معتبراز آن پشتیبانی می کنند. به همین خاطر خیلی از وب سایت های جدید از این ویژگی استفاده می کنند تا محاسبات مربوط به شبکه ها در وب سایتشان آسان تر شود.