نحوه تنظیم لیست با تگ ul li در css

[saberi]

نحوه تنظیم لیست با تگ ul li در css

همان طور که در مطالب قبلی از بخش آموزش مقدماتی css گفتیم، استایل های css قابلیت های بسیار خوبی در نحوه کنترل تگ ها و عناصر html در صفحات وب در اختیارمان قرار می دهند، تا حدی که امروزه دیگر کسی به طراحی وب بدون استفاده از آنها فکر نمی کند، در ادامه آموزش ها، این بار می خواهیم نحوه کنترل شکل ظاهری تگ های ul و li که مربوط به لیست در صفحات html می شوند را بررسی کنیم، یادآور می شویم که تگ ul و li برای ایجاد منوهای استاندارد و باب طبع موتورهای جستجو در سایت یا وبلاگ و همچنین ایجاد نقشه های سایت (بدون استفاده از xml) کاربرد فراوان دارند.

ساختار تگ ul و li در html

قبل از اینکه به نحوه تنظیم تگ های ul و li با استایل css بپردازیم، بد نیست نگاهی اجمالی داشته باشیم به نحوه استفاده از دو تگ ul و li در صفحات html؛ از این دو تگ برای ایجاد یک لیست با زیر مجموعه به صورت درختی استفاده می شود، مثال زیر نحوه صحیح چیدمان تگ ul و li را به صورت تو در تو نشان می دهد.

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

توضیح:

- متال بالا یک نمودار درختی از لیست های فرضی ترسیم می کند که در آن ابتدا یک لیست اصلی به عنوان بالاترین آیتم، سپس یک لیست اصلی دیگر در زیر آن با دو لیست زیرمجموعه ترسیم می کند.

- به نحوه چینش تو در توی تگ های ul و li در مثال بالا به دقت نگاه کنید، کوچکترین اشتباه در نحوه چینش صحیح تگ های ul و li ممکن است باعث نامعتبر شدن کد شما از لحاظ سرویس های اعتبار سنجی مانند w3c.org شود.

تنظیم تگ ul با css

تگ ul به عنوان لیست اصلی، معمولا در حالت پیش فرض به صورت نقطه دار (نقطه ای در سمت راست یا چپ نمایش داده می شود) نشان داده می شود که این موضوع می تواند زیبایی کار را در طراحی وب تحت تاثیر قرار دهد، اما خوشبختانه مانند بسیاری از تگ های html، تگ ul نیز به خوبی ویژگی های css را می پذیرد، در مثال زیر برخی از این ویژگی ها را بر روی آن اعمال کرده ایم.

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

توضیح:
- خاصیت list-style نوع نمایش عناصر لیست را نشان می دهد، مقادیر زیادی را می توان برای list-style در نظر گرفت که فهرست وار در زیر برخی از مهم ترین و پرکاربردترین آنها را مشاهده می کنید.
inside: برای ایجاد نقطه هایی رو به داخل لیست (در برخی مرورگرها پشتیبانی می شود).
outside: ایجاد نقطه رو به بیرون لیست (در رخی مرورگرها پشتیبانی می شود).
circle: ایجاد نقطه های توخالی و گرد برای آیتم های لیست.
decimal: ایجاد آیتم های لیست به صورت شمارشی و زیر مجموعه، بدون صفر (1، 2، 3 و...).
decimal-leading-zero: ایجاد آیتم های لیست به صورت شمارشی و زیرمجموعه ای به صورت اعداد به همرا صفر (01، 02، 03 و...).
square: ایجاد مربع های کوچک برای آیتم های لیست.
none: نمایش آیتم های لیست بدون هیچ گونه علامتی.
نکته: به جای list-style از list-style-type نیز استفاده می شود.
- خاصیت list-style-image برای تعریف یک تصویر به جای علامت های نقطه، مربع و... در آیتم های لیست کاربرد دارد که مقادیر ان با آدرس url تصویر، تکمیل می شود.
- خاصیت list-style-position نیز موقعیت آیتم ها را مشخص می کند، این خاصیت می تواند دو مقدار outside و inside داشته باشد.

تنظیم تگ li با css

مانند تگ ul، تنظیمات بالا بر روی تگ li نیز قابل اعمال است، توجه کنید که به دلیل اینکه تگ li خود زیر مجموعه ul محسوب می شود، اگر استایلی برای آن تنظیم نشود، برخی از ویژگی های آن از تنظیمات ul پیروی می کند، اما با تنظیم استایل برای li، تنظیمات مشابه بخش ul معمولا نادیده گرفته می شوند؛ در مثال زیر ما کد بالا را کامل کرده ایم و پیش نمایشی از آن را نیز به صورت آنلاین جهت تست و بررسی قرار داده ایم.

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

ملاحظه می کنید که وقتی برای تگ li ویژگی هایی تعریف می کنیم، تگ ul نیز از آن پیروی می کند، چرا که آیتم های لیست نهایتا به صورت li نشان داده می شوند و ul برای تنظیم تو در توی آیتم ها کاربرد دارد، در اینجا ما از دو کلاس li-1 و li-2 برای آیتم های سطح یک و سطح دو استفاده کرده ایم که پی بردن به نحوه تنظیم آنها نیاز به اندکی دقت و توجه به ترتیب چینش آنها دارد.