لیست در CSS

در این جلسه به آموزش لیست در CSS خواهیم پرداخت, لطفا قبل از مشاهده این جلسه ابتدا جلسه ی قبل را از این لینک مشاهده کنید.

خاصیت های لیست در CSS به شما قابلیت های زیر را ارائه می دهد به شما امکان می دهد نشانگرهای مختلف برای آیتم های فهرست ویژه ی لیست های رده بندی یا دارای ترتیب (ordered) انتخاب کنید. به شما اجازه می دهد نشانگرهای مختلف برای آیتم های فهرست ویژه ی لیست های که با عدد یا حروف رده بندی یا نشانه گذاری نشده اند (unordered) انتخاب کنید. همچنین به شما این امکان را می دهد تصویر به عنوان نشانگر آیتم لیست انتخاب کنید .

انواع لیست ها

در HTML ،دو نوع متفاوت لیست وجود دارد

• ( ul (<lists unordered – تمامی اقلام یا آیتم های لیست با علامت Bullets نشانه گذاری شده اند .
• (ol (<lists ordered – آیتم های لیست با عدد یا حروف علامت گذاری شده اند

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

نشانگرهای مختلف آیتم های لیست (marker item list)

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

مثال

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

برخی از مقادیر مثال بالا برای لیست های دارای ترتیب حروفی و عددی و برخی دیگر مختص فهرست های فاقد ترتیب عددی / حروفی است .

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

برای این منظور (انتخاب تصویر به عنوان نشانگر آیتم در لیست)، کافی است از خاصیت image-style-list بهره بگیرید

مثال

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

مثالی که در بالا مشاهده می کنید در کلیه ی مرورگرها به طور مشابه نمایش داده نمی شوند . IE و Opera هر دو marker-image( تصویر نشانگر) را کمی بالاتر نسبت به مرورگرهای Firefox،Chrome و Safari نمایش می دهد .

اگر می خواهید marker-image در تمامی مرورگرها در مکانی یکسان جاگذاری و نمایش داده شود، می توانید از مثال زیر کمک بگیرید که در آن marker-image در چندین مرورگر مختلف به طور مشابه و در موقعیتی یکسان قرار گرفته است .

مثال

ul {
 list-style-type: none;
 padding: 0px;
 margin: 0px;
}
ul li {
 background-image: url(sqpurple.gif);
 background-repeat: no-repeat;
 background-position: 0px center;
 padding-left:15px;
}

توضیح مثال

برای <ul> به منظور حذف نشانگر آیتم لیست، type-style-list را روی none تنظیم کنید . هر دو خصوصیت padding( ویژگی padding میزان فاصله و حاشیه ی محتوای درون یک بالک را مشخص می کند) و margin( فاصله دو بالک یا دو لایه را در صفحات وب تعیین می کند) را به 0px تنظیم کنید (بنا به دلایل سازگاری یا compatibility جهت پشتیبانی از چندین مرورگر / سازگاری یک صفحه وب و کدهای آن با مرورگرهای گوناگون).

برای تمامی <li> در <ul>

URL تصویر مربوطه را انتخاب کرده و آن را تنها یکبار نمایش می دهد (بدون هیچ تکراری). تصویر مورد نظر را هرجا که مایلید قرار دهید (0px left و center value vertical.) نوشته را در لیست با left-padding جای گذاری کنید

آموزش خاصیت Shorthand – List

list-style property  در واقع یک خاصیت مختصر نویسی است . از خصوصیت مزبور جهت تعریف تمامی خاصیت های لیست تنها در یک تعریف (declaration) استفاده می شود .

مثال

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

لیست در CSS

در حین استفاده از خاصیت یا ویژگی مختصر نویسی، توجه داشته باشید که ترتیب مقادیر property ها به ترتیب زیر هستند:

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

position-style-list مشخص می کند آیا نشانگرهای آیتم های لیست باید داخل یا خارج گردش محتوا flow content نمایش داده شوند.

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

در صورت عدم وجود یا در دسترس نبودن یکی از مقادیر property های فوق، مقدار پیش فرض برای خصوصیتی که در دسترس نیست درج می شود .

کلیه ی خاصیت های مربوط به لیست در جدول ذیل تشریح شده اند

۱. list-style

این ویژگی یک خصوصیت مختصر نویسی است که مقادیر سه خاصیت مختلف مربوط به  لیست را در یک تعریف (declaration) قرار می دهد . در واقع تمامی خصوصیت های کی لیست را در تنها یک اعلان ست می کند .

۲. list-style-image

یک تصویر را به عنوان نشانگر یا مارکر آیتم لیست انتخاب می کند . با استفاده از این ویژگی برای عکس نشانگر تعریف می کند و به صورت یک آیکون کوچک نمایش داده می شود و شامل دو حالت است که یکی none می باشد که در این حالت هیچ عکسی در لیست دیده نمی شود،و حالت url که با استفاده از این حالت آدرس تصویر مورد نظر را وارد می کنند

۳. list-style-position

در این ویژگی موقعیت قرارگیری نشانه و متن آیتم های لیست را بر حسب یکی از حالت های زیرتعیین می کند.که این ویژگی هم شامل دو حالت می باشد که یکی inside می باشد که در این حالت نشانه لیست و متن آیتم های آن کمی تو رفته تر نمایش داده می شوند و حالت outside نشانه لیست و متن آیتم های به صورت عادی نمایش داده می شوند. (تعیین می کند که نشانگرهای آیتم های لیست داخل یا خارج flow content ظاهر شوند یا خیر) .

۴. list-style-type

نوع نشانگر آیتم لیست را تعیین می کند (با استفاده از این ویژگی می توان marker لیست خود را به شکل دلخواه عوض کنید) .

اتمام مبحث لیست در CSS

ممنون که در این جلسه هم با ما همراه بودید. در این جلسه به یادگیری لیست در CSS پرداخته شد. در جلسه ی آینده نیز به نکات کلیدی و پرکاربردی خواهیم پرداخت. پس حتما با ما همراه باشید و جلسات آینده را از دست ندهید! برای تمرین هر جلسه میتوانید به وبسایت جهانی W3C مراجعه نمایید. تمرین مستمر همواره تاثیر بسیار خوب و مهمی در یادگیری و تقویت مهارت های شما دارد پس حتما آن را جدی بگیرید