آگهی
article

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

css-ul-li-list

همان طور که در مطالب قبل از بخش آموزش مقدماتی 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 نیز استفاده کنیم.
sectionدسته بندی: آموزش مقدماتی » CSS
related مطالب بیشتر:
» کار با border و outline در CSS
» مقدمه ای بر CSS و استایل دهی صفحات وب
» سلکتور آی دی (ID) و کلاس (Class) در CSS
» کاربرد خاصیت display در CSS
» ویژگی های Font و Text در CSS
commentنظرات (۳۲ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: رعنا
زمان: ۰۸:۳۱:۳۰ - تاریخ: ۱۳۹۶/۰۵/۰۳
سلام با تشکر از سایت مفید و خوبتون
میخواستم ببینم اگه بخوایم آیکون لیست های اولویت بندی را به صورت عکس های کوچک کوچک باشد از چه دستوری استفاده میکنیم؟
پاسخ: 
در نمونه کدهای این آموزش از خاصیت list-style-image استفاده شده که می توانید الگوبرداری کنید.
نویسنده: حسین
زمان: ۱۰:۳۰:۲۴ - تاریخ: ۱۳۹۷/۰۱/۳۱
سلام. چطور می تونم در تگ ol به جای ترتیب 1 و 2 و 3 از ترتیب a,b,c استفاده کنم؟
پاسخ: 
به دو روش می توانید این کار را انجام دهید، استفاده از list-style در CSS با مقادیر decimal یا استفاده از صفت type با مقدار عددی 1 برای تگ ol در HTML، به طور مثال:
<style type="text/css">
.my-list {
list-style:decimal;
}
</style>
<ul class="my-list">
<li>آیتم لیست</li>
<li>آیتم لیست</li>
<li>آیتم لیست</li>
</ul>

<ol type="1">
<li>آیتم لیست</li>
<li>آیتم لیست</li>
<li>آیتم لیست</li>
</ol>
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




5 × 3
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشد که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آخرین دیدگاه ها
form مجید بیگلوئی
در:
با سلام میخوام فایل پیوست بسازم برای اسکریپت وبلاگ از کد زیر استفاده میکنم تا فایل را آپلود و اطلاعات را به دیتابیس ارسال...
۱۰:۰۲:۵۸ ۱۳۹۸/۱۲/۰۶

form پیمان نقی پور
در:
سلام میخواستم بدونم فیلتر نویسی بورس هم با همین زبان جاوا انجام میشه؟ چطور میشه شرطی تعیین کرد تا نتیجه فیلتر در هنگام...
۱۸:۲۱:۳۲ ۱۳۹۸/۱۲/۰۵

form mahdi
در:
سلام استاد ، css رو تسلط کامل دارم تا حدودیش هم به لطف شما و جاوا اسکریپت هم چند روزی میشه شروع کردم به آموزش...
۱۵:۴۸:۳۳ ۱۳۹۸/۱۲/۰۵

form amin
در:
با سلام آدرس مطالب سایت وبگو بعد از ای دی پست عنوان فارسی هست ولی زمانی که به سورس کد پست نگاه میکنیم قسمت فارسی...
۱۴:۵۹:۴۴ ۱۳۹۸/۱۲/۰۵

form mahdi
در:
سلام استاد ، لینک آموزش مقدماتی جاوا اسکریپت توی منوی بالایی خرابه ، به وظیفه شهروندیم عمل کردم :)
۱۵:۰۹:۰۰ ۱۳۹۸/۱۲/۰۴

form aseman
در:
با سلام . میخوام هر وقت توی تکس باکسم عدد 1 وارد شد در خروجی تگ p معادل حروفی یک رو بهم بده. مثلا:...
۱۴:۴۵:۲۹ ۱۳۹۸/۱۲/۰۴

form mahdi
در:
سلام استاد ، گذاشتمش توی این وبلاگ رمزش هم ******* هستش ، واقعیت فهمیدم که میشه درستش کرد ولی چجوریشو نفهمیدم :) خیلی ممنون...
۱۳:۲۰:۱۴ ۱۳۹۸/۱۲/۰۴

form mahdi
در:
سلام استاد، وبلاگ ندارم، اینا رو برای یادگیری و یه هدف دیگه دارم سوال میکنم، مطالب مرتبط رو پیدا کردم راهشو، فقط قسمت ارسال نظر...
۲۰:۱۵:۰۲ ۱۳۹۸/۱۲/۰۳

form نیما
در:
سلام. من میخوام با استفاده از یک input مقدار عددی رو از کاربر دریافت کنم و بعد از ضرب در عددی خاص که خودم تعیین...
۱۸:۰۷:۰۴ ۱۳۹۸/۱۲/۰۳

form وحید
در:
سلام وقت بخیر حدود شش ماه هست با فیلتر شکن کار میکنم به اسم Lightvpn. یک روز هست این خطا رو میده و...
۱۸:۰۰:۰۶ ۱۳۹۸/۱۲/۰۳

form mahdi
در:
سلام ، استاد شرمنده یه سوال دیگه هم داشتم مثل قبلی ، مطالب مرتبط که انتهای هر پست میاد رو چطوری با جاوا اسکریپت توی...
۲۳:۴۶:۲۳ ۱۳۹۸/۱۲/۰۲

form mahdi
در:
سلام استاد عزیز ، توی لوکس بلاگ میشه چیزی مثل پست های شاخص که توی وردپرس هست با جاوا اسکریپت درست کنیم که مثلا داخل...
۲۳:۱۴:۴۰ ۱۳۹۸/۱۲/۰۲

form mahdi
در:
سلام استاد ، بخش نظرات قالب لوکس بلاگ یعنی طرح کل صفحش رو چطوری دسترسی داشته باشیم که خودمون بتونیم طراحیش کنیم ؟ منظورم اینه...
۱۸:۱۱:۳۳ ۱۳۹۸/۱۲/۰۱

form علیرضا سهیلی
در:
سلام من وقتی میخوام شارژ بزنم این کد واسم میاد معنیش یعنی چی
۱۴:۳۳:۱۴ ۱۳۹۸/۱۲/۰۱

form mahdi
در:
سلام استاد ، فهمیدم چطوریه نیازی به پاسخ نیست، چقدرم ساده بود :) مرسی
۰۹:۴۸:۴۹ ۱۳۹۸/۱۱/۳۰
آگهی