آموزش CSS ساخت لیست با تگ ul li قسمت هشتم

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

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

<ul>
<li>لیست اصلی بدون زیر مجموعه</li>
<li>
لیست اصلی با زیر مجموعه
<ul><li>لیست فرعی و زیر مجموعه اول
<ul><li>لیست فرعی و زیر مجموعه دوم</li></ul></li></ul>
</li>
</ul>

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> تنظیم تگ ul با استایل css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
ul{
    list-style:none;
    list-style-image:url(list-item-image.jpg);
    list-style-position:outside;
}
</style>
</head>
<body>
<ul>
<li>لیست اصلی بدون زیر مجموعه</li>
<li>
لیست اصلی با زیر مجموعه
<ul><li>لیست فرعی و زیر مجموعه اول
<ul><li>لیست فرعی و زیر مجموعه دوم</li></ul></li></ul>
</li>
</ul>
</body>
</html>

توضیح:
- خاصیت 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 معمولا نادیده گرفته می شوند؛

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> تنظیم تگ ul با استایل css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
ul{
    list-style:none;
    list-style-image:url(list-item-ul.png);
    list-style-position:inside;
}
.li-1{
    list-style:none;
    list-style-image:url(list-item-ul.png);
    list-style-position:inside;    
}
.li-2{
    list-style:none;
    list-style-image:url(list-item-li.png);
    list-style-position:inside;    
}
</style>
</head>
<body>
<ul>
<li class="li-1">لیست اصلی بدون زیر مجموعه</li>
<li class="li-1">
لیست اصلی با زیر مجموعه
<ul><li class="li-2">لیست فرعی و زیر مجموعه اول
<ul><li class="li-2">لیست فرعی و زیر مجموعه دوم</li></ul></li></ul>
</li>
</ul>
<hr />
به نحوه چینش تگ ul و li به صورت تو در تو و به کاربرد کلاس css در آنها توجه نمائید.
</body>
</html>

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

نمونه ای از آخرین کارهای ما

آموزش CSS ساخت لیست با تگ ul li قسمت هشتمReviewed by Goolexacom on Mar 28Rating: 4.5آموزش CSS ساخت لیست با تگ ul li

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

اگر ربات نیستی جواب بده *

پشتیبانی سایت سئو سایت

خدمات سایت

سئو

خدمات سایت

پشتیبانی سایت سئو سایت خدمات سایت