استایل لیست (List) در CSS

استایل لیست (List) در CSS ، که در این آموزش انواع لیست ها ، آیتم های لیست و خاصیت لیست که شما یاد خواهید گرفت

خاصیت های لیست در CSS به شما قابلیت های زیر را ارائه می دهد.

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

انواع لیست ها

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

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

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

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

نوع نشانگر آیتم های لیست به وسیله ی خاصیت 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('logo.png');
}

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

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

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

ul li {
   background-image: url(img.png);
   background-repeat: no-repeat;
   background-position: 0px center;
   padding-left:15px;
}

توضیح کد ها

برای <ul>

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

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

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

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

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

ul {
   list-style: square inside url("img.png");
}

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

• list-style-type چنانچه (list-style-image مشخص شده باشد، مقدار این خاصیت در صورت عدم امکان نمایش تصویر (به هر دلیلی)، نشان داده می شود).
• list-style-position (مشخص می کند آیا نشانگرهای آیتم های لیست باید داخل یا خارج گردش محتوا (content flow) نمایش داده شوند)
• list-style-image (یک تصویر را به عنوان نشانگر آیتم لیست انتخاب می کند).

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

در بخش بعدی که بخش آخر از آموزش استایل عناصر در سی اس اس می باشد به بررسی جداول در css میپردازیم . با ما همراه باشید تا این بخش از آموزش را به پایان برسانیم.