آموزش CSS – آموزش کار با صفت لیست (List)

از صفت List برای تغییر نشانه های لینک ها در صفحه اصلی سایت  استفاده می شود .

همانطور که دیده اید بعد از ایجاد لینک بوسیله تگهای ul.li پشت لینکها همیشه یک دایره

به طور پیش فرض وجود دارد که شما می توانید آنها را بوسیله صفت List تغییر داده یا به

طور کلی حذف کنید .

در HTML دو نوع لیست وجود دارد :

1. لیست هایی که به وسیله نشانه های مثل دایره ، مربع یا هر شکل دیگری نمایش داده می شود .

2. لیست هایی که به وسیله اعداد یا حروف الفبا نمایش داده می شود .

نکته : برای ایجاد لینکهای منظم از تگ OL و برای ایجاد لینکهای نامنظم از تگ Ul استفاده

می کنیم . با یک مثال ساده بیشتر با این مفهوم آشنا می شوید.

دقت داشته باشید که کدهای اصلی در برنامه HTML نوشته می شود و فقط در این

صفحه شما با صفت ها و خصوصیت های آنها آشنا می شوید .

استفاده از صفت list-style-image برای قرار دادن تصویر در پشت لینکها

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

فقط دقت داشته باشید که اگر از صفت list-style-type استفاده می کنید نمی توانید از list-style-image

هم استفاده کنید .برای استفاده از این صفت باید در فایل Css خود مشخص کنید که از چه تصویری

می خواهید به جای نشانه ها استفاده نمایید . به مثال زیر توجه کنید تا بهتر متوجه شوید .

فقط دقت داشته باشید که مرورگرهای اینترنت اکسپلورر و اپرا کمی بالاتر این عکس را

نمایش میدهد که باید بوسیله صفت های padding:0px; margin:0px; محل قرارگیری

تصویر را تنظیم کنید

استفاده از صفت list-style-type برای تغییر نشانه های منظم لینکها

با استفاده از صفت list-style-type می توانیم نشانه ها را برای لینکها تغییر دهیم اما بعضی

از مرورگرها و شاید اصلی ترین مرورگر مورد استفاده کاربران اینترنت اکسپلورر از بعضی از

ویژگیهای این صفت پشتیبانی نمی کنند که در ادامه به طور کامل توضیح میدهم .

list-style-type : none | لینکها بدون هیچ نشانه ای نمایش داده می شوند

list-style-type : disk | دایره پر شده

list-style-type : circle | دایره تو خالی

list-style-type : square | مربع

list-style-type : decimal | عددی

list-style-type : decimal-leading-zero | اعداد با صفر شروع می شود مثل01.02.03

list-style-type : lower-roman | اعداد یونانی کوچک

list-style-type : upper-roman | اعداد یونانی بزرگ

list-style-type : lower-alpha | حروف الفبای کوچک انگلیسی

list-style-type : upper-alpha | حروف الفبای بزرگ انگلیسی

list-style-type : lower-greek | حروف یونانی کوچک

list-style-type : lower-latin | حروف لاتین کوچک

list-style-type : upper-latin | حروف لاتین بزرگ

list-style-type : hebrew | اعداد عبری

list-style-type : armenian | اعداد ارمنی

list-style-type : georgian | اعداد گرجی

list-style-type : cjk-ideographic | علائم تجاری

list-style-type : hiragana | نشانه های نظیر ki.ka.o.e

list-style-type : katakana | نشانه های نظیر A,I.U.E

list-style-type : hiragana-iroha | نشانه های نظیر to.he.ho.ni

list-style-type : katakana-iroha | نشانه های نظیر I.RO.HA.NI

بعضی از مرورگرها ازویژگیها یا خصوصیات صفت list-style-type پشتیبانی نمی کنند

که در ادامه به طور کامل توضیح می دهم :

اول : اینترنت اکسپلورر 9 و اپرا 11 از صفت های نام برده شده پشتیبانی نمی کنند :

cjk-ideographic, hebrew, hiragana, hiragana-iroha, katakana, and katakana-iroha.

دوم : اینترنت اکسپلورر 8 و ورژن های قدیمی تر از آن فقط از ویژگیهای زیر پشتیبانی می کنند :

decimal-leading-zero, lower-greek, lower-latin, upper-latin, armenian, georgian