آموزش برنامه نویسی وب و مهارتهای مرتبط

شنبه ۲۲ شهریور ۱۴۰۴

Saturday, September 13, 2025 GMT +3:30

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

همان طور که در مطالب قبل از بخش آموزش مقدماتی CSS گفتیم، خاصیت های CSS قابلیت های بسیار خوبی برای سفارشی سازی ظاهر و شکل نمایش تگ های HTML در صفحات وب در اختیارمان قرار می دهند تا حدی که امروزه دیگر کسی به طراحی وب بدون استفاده از CSS فکر نمی کند، در ادامه آموزش ها این بار می خواهیم نحوه تنظیم شکل ظاهری تگ های ul و li که مربوط به ایجاد لیست در صفحات وب هستند را بررسی کنیم، یادآور می شویم که تگ ul و li برای ایجاد منوهای استاندارد و باب طبع موتورهای جستجو در سایت ها و وبلاگ ها و همچنین ایجاد نقشه ی HTML (بدون استفاده از 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 ممکن است باعث نامعتبر شدن کدنویسی از لحاظ سرویس های اعتبار سنجی مانند validator.w3.org شود که از نظر سئو (SEO یا بهینه سازی صفحات وب برای موتورهای جستجو) فاکتوری منفی است.

تنظیم تگ ul با استایل CSS

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | تنظيم تگ ul با استايل CSS</title>
<!-- Webgoo.ir -->
<style>
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 نادیده گرفته شده و با خاصیت های اختصاصی جایگزین می شوند، در مثال زیر تکمیل شده کد بالا به همراه امکان پیش نمایش آنلاین جهت تست و بررسی درج شده است:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | تنظيم تگ ul و li با استايل CSS</title>
<!-- Webgoo.ir -->
<style>
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;
    color: #c00;
}
.li-2{
    list-style:none;
    list-style-image:url(list-item-li.png);
    list-style-position:inside;
    color: #c08;
}
</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 براي اعمال استايل ظاهري به تگ هاي HTML مشخص شده است.
</body>
</html>

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

دسته بندی: آموزش مقدماتی » CSS

برچسب ها: CSS

قبلی »

« بعدی

مطالب بیشتر:
نحوه تنظیم استایل لینک (Link) در CSS
کاربرد ویژگی position و float در CSS
مقدمه ای بر CSS و استایل دهی صفحات وب
خاصیت Background و ویژگی های آن در CSS
ویژگی های Font و Text در CSS

دیدگاه

۳۷ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

سوده فروهک

۱۱:۴۶ ۱۳۹۲/۰۵/۲۰

سلام. من با div طراحی سایت انجام میدم. چطور می تونم وقتی 3 تا ستون دارم ستون دوم رو وسط قرار بدم؟ با float نشد... مثل زیر:

1| 2| 3

برای کنار هم قرار دادن بلاک های div می توانید در کنار float از خاصیت display با مقادیر inline-block استفاده کنید، مثال:

<style>
.right{
	width:100px;
	height:100px;
	float:right;
	display:inline-block;
	background:#666;
}
.center{
	width:100px;
	height:100px;
	float:right;
	display:inline-block;
	background:#999;
}
.left{
	width:100px;
	height:100px;
	float:right;
	display:inline-block;
	background:#CCC;
}
</style>
<div class="right"></div>
<div class="center"></div>
<div class="left"></div>

مهسا

۱۲:۲۹ ۱۳۹۱/۰۸/۲۳

با سلام
آیا li خاصیتی دارد که بتوان اشکال آن را بدون استفاده از عکس رنگی کرد؟ (circle, sequre,...)

بله، خاصیت color این کار را انجام می دهد، به طور مثال:

<ul>
<li type="circle" style="color:#390">
<div style="color:#C00">5</div>
</li>
</ul>

مهیار

۰۰:۲۳ ۱۳۹۱/۰۸/۰۵

سلام.
من می خواستم عناصری که به صورت لیست می نویسیم در یک خط قرار بگیرند. مثل منوها و navigation bar.
چی کار باید کنم؟ لطفا کمکم کنید. ممنون

از خاصیت display:inline-block یا float با مقادیر left یا right برای عناصر استفاده کنید.

ناشناس

۱۶:۴۸ ۱۳۹۱/۰۶/۱۱

کد منو های که در پایین هر صفحه می باشد را هم ممکن بگید

مریم

۲۰:۰۴ ۱۳۹۱/۰۶/۱۰

واقعا ممنونم
فقط چرا از کلاس استفاده کردید با div نمی شد؟

می توانید لیست ها را درون یک بلاک div هم قرار دهید، ولی نهایتا باید برای آن بلاک از کلاس css استفاده کنید تا حالت های a و a:hover را بتوانید برای لینک ها تنظیم نمائید، تعریف این حالت ها به صورت استایل خطی ممکن نیست.

مریم

۱۴:۲۷ ۱۳۹۱/۰۶/۰۸

سلام
ممنون از وب سایت خوبتون
من دارم کد منو می نویسم text-decoration برای از بین رفتن زیر خط که تو ul, li
در قسمت css می نویسم اعمال نمیشه مشکل چیه؟

بر اساس الگوی زیر اگر خاصیت ها را تعریف کنید مشکل حل می شود:

<style>
.menu{
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;
}
.menu a{
	text-decoration:none;
	color:#36C;
}
.menu a:hover{
	color:#F60;
}
</style>

به طور مثال:

<ul class="menu">
<li>
<a href="http://webgoo.ir">وبگو | آموزش برنامه نویسی و مهارتهای وب</a>
</li>
</ul>

احمد

۱۴:۱۹ ۱۳۹۱/۰۵/۰۸

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

خواهش می کنیم، در واقع استاندارد خاصی برای عرض قالب های وب وجود ندارد، چون گستره استفاده از دستگاهها با پهنای متفاوت زیاد است، اما معمولا برای قالب های با عرض ثابت، پهنای 960 یا 980 پیکسل استفاده می شود، امروزه اکثر مانیتورهای CRT از استاندارد 1024 پیکسل استفاده می کنند و در مانیتورهای عریض این اندازه بیشتر است، پس اگر پیکسل قالب خود را همان 960 در نظر بگیرید، با طراحی خوب و استاندارد، مرورگر سایت را به خوبی نشان می دهد و به فرض اسکرول افقی نخواهید داشت، یک شیوه دیگر طراحی قالب به صورت تعریف مقادیر درصدی به جای پیکسل است، به این صورت با کاهش یا افزایش پهنای پنجره مرورگر، قالب نیز خود را با آن هماهنگ می کند، البته این روش به دلیل برهم زدن یکنواختی کار، چندان باب طبع طراحان وب نیست، ولی گاهی رهگشا است.
برای طراحی قالب تسلط بر CSS ضروری است و این تسلط خیلی از مواقع با آزمون و خطا بدست می آید و ناشی از تجربه است، استفاده از برنامه هایی مثل Adobe Dreamweaver نیز کار کدنویسی قالب ها را آسان می کند، همچنین برای تست قالب های طراحی شده خود در تمام ورژن های اکسپلورر، برنامه ای تحت عنوان IETester در آدرس زیر وجود دارد:

http://my-debugbar.com/wiki/IETester/HomePage

نخست

قبلی

بعدی

آخر

صفحه 3 از 3

لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.