سه شنبه ۲۸ دی ۱۴۰۰

Tuesday, January 18, 2022 GMT +3:30

نحوه تنظیم لیست با تگ 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 نیز استفاده کنیم.
دسته بندی: آموزش مقدماتی » CSS
related مطالب بیشتر:
نحوه تنظیم استایل لینک (Link) در CSS
ویژگی های Font و Text در CSS
کاربرد ویژگی position و float در CSS
کاربرد خاصیت display در CSS
خاصیت Background و ویژگی های آن در CSS
دیدگاه
more ۳۶ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
نویسنده: رعنا
۰۸:۳۱ ۱۳۹۶/۰۵/۰۳
سلام با تشکر از سایت مفید و خوبتون
میخواستم ببینم اگه بخوایم آیکون لیست های اولویت بندی را به صورت عکس های کوچک کوچک باشد از چه دستوری استفاده میکنیم؟
پاسخ: 
در نمونه کدهای این آموزش از خاصیت list-style-image استفاده شده که می توانید الگوبرداری کنید.
نویسنده: حسین
۱۰:۳۰ ۱۳۹۷/۰۱/۳۱
سلام. چطور می تونم در تگ ol به جای ترتیب 1 و 2 و 3 از ترتیب a,b,c استفاده کنم؟
پاسخ: 
به دو روش می توانید این کار را انجام دهید، استفاده از list-style در CSS با مقادیر decimal یا استفاده از صفت type با مقدار عددی 1 برای تگ ol در HTML، به طور مثال:
<style>
.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>
نویسنده: آیدا
۲۲:۴۷ ۱۳۹۹/۰۴/۱۴
سلام
من در حال طراحی با html هستم اما طبق فیلم آموزشی پیش میرم از یه جایی به بعد هم تغییرات اعمال نمیشه چطور میتونید راهنمایی کنید ؟
پاسخ: 
اگر با مراجعه به سایت مرجع فیلم های آموزشی اشکالات همچنان پابرجا است می توانید برنامه Team Viewer را نصب و از طریق ایمیل ما (موجود در بخش تماس) اطلاع دهید تا هماهنگی در خصوص بررسی آنلاین از طریق این برنامه انجام شود.
نویسنده: کافه کتاب
۱۴:۵۱ ۱۳۹۹/۰۴/۲۰
سپاس خیلی وقت بود دنبالش بودم مرسی از سایت عالیتون
نویسنده: Mori
۱۰:۲۰ ۱۳۹۹/۰۸/۱۰
سلام. میخواستم بدونم که چگونه در html میشه چند لیست عمودی رو کنار هم قرار داد. یعنی در واقع لیست ها زیر هم نباشند. (مکان قرارگیری لیست ها)
پاسخ: 
با اختصاص استایل به تگ ul به صورت display با مقادیر inline-block می توانیم لیست ها را در کنار هم در یک خط نمایش دهیم، مثال:
<style>
.ul-1, .ul-2, .ul-3 {
display: inline-block;
width: 200px;
border: 1px solid #E5E5E5;
}
</style>
<ul class="ul-1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="ul-2">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="ul-3">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
نویسنده: fateme
۱۵:۲۸ ۱۴۰۰/۱۰/۱۱
سلام ممنون از سایت خوبتون
من سوالم اینه که چجوری داخل منو که با li هست لینک بزاریم تگه لطف کنید بگید ممنون میشم
پاسخ: 
لطفا عبارت "منو ul li" را در قسمت جستجوی سایت وارد کنید، مطلب اختصاصی در خصوص ساخت منو با تگ ul li و CSS به همراه تگ href و ایجاد لینک در سایت منتشر شده است.
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده می شود.
- کدها و اسکریپت های طولانی را در یک صفحه وب آنلاین قرار دهید تا امکان بررسی دقیق و خطایابی میسر باشد.
- ممکن است پاسخ سوالتان نیاز به کدنویسی داشته باشد، در این موارد مدت زمان بیشتری برای پاسخگویی مورد نیاز است.
- تمام دیدگاه ها خوانده شده و زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا تا هنگام انتشار دیدگاه شکیبا باشید.



 refresh
10 × 10
6 × 2
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
Bahar
در:
سلام ،کدام لیست ترتیب قرارگیری انها اهمیت نداره؟ ازبین اینها؟
۱۴۰۰/۱۰/۲۷

حدیثه یدی
در:
سلام خسته نباشید ، خیلی وبلاگ خوبی دارید، مطالبتون واقعا مفید بود .. من یک سوالی داشتم می‌خوام برای وبلاگم فونت های مختلف پیدا کنم...
۱۴۰۰/۱۰/۲۶

Fatemeh
در:
سلام چه طوری داخل این کادرهای که ایجاد میشه با این کد متن txt1, txt2 ,... نوشته شود؟
۱۴۰۰/۱۰/۲۵

Fatemeh
در:
سلام وقت بخیر چطوری میتونم موارد زیر رو انجام بدم؟! میشه کمک کنید ممنون! پوسته تارنمای فروشگاه آنالین لوازم خانگی را به صورت زیر...
۱۴۰۰/۱۰/۲۵

سپیده
در:
سلام مجدد لینک صفحه خدمت شما ممنون میشم راهنمایی کنید کدی که توی پیام قبلی ارسال کردین رو کجا باید بگذارم؟
۱۴۰۰/۱۰/۲۳

سپیده
در:
سلام و درود سایتم وردپرس هست و با المنتور طراحی کردم توی صفحه ویرایش حساب کاربران، میخوام فیلد تغییر آدرس ایمیل رو حذف کنم....
۱۴۰۰/۱۰/۲۲

حسین
در:
سلام ببخشید یک سوال داشتم چجوری میشه با زدن یک دکمه کمی بالاتر یا پایین تر برود یا با زدن نوشته ای...
۱۴۰۰/۱۰/۲۲

سپهر
در:
سلام استاد ضمن تشکر از آموزش خوب شما عرض شود بنده دارم یک ربات چت ساده می‌سازم که در بانک اطلاعات خود دو ستون...
۱۴۰۰/۱۰/۲۱

Fatemeh
در:
سلام روز بخیر این کد مشکلش چیه؟!
۱۴۰۰/۱۰/۱۹

پـــرتو
در:
سلام خسته نباشید ببخشید مزاحم میشم من قالبی ک بهتون دادم یادتون میاد؟کدش رو دارین؟میشه براش لطفا اگه میشه عنوان بزارین؟چون عنوان نداره ممنون...
۱۴۰۰/۱۰/۱۷

مهلا
در:
من یه تکه کدی نوشتم با زبان php که 9 عکس دادم با سه سطر و ستون می‌خوام در خروجی این عکسها بطور تصادفی...
۱۴۰۰/۱۰/۱۵

امیرحسین
در:
سلام وقت بخیر بنده یه سوال خیلی مهمی داشتم که اگر کمک کنید و راهکاری به من بدید سوالم اینه که من دارم یه ربات...
۱۴۰۰/۱۰/۱۴

وحید
در:
سلام خسته نباشید و ممنون از شما من میخواستم بدونم چطوری میشود فیلم های طولانی در وبلاگ بگذاریم ممنون
۱۴۰۰/۱۰/۱۴

Fatemeh
در:
وقت بخیر متاسفانه من هر کدی مینویسم یه اشکالی داره این کد مشکلش چیه؟🤦🏻‍♀️
۱۴۰۰/۱۰/۱۲

نازنین
در:
اسکریپتی بنویسید که نام و نام خانوادگی و سال تولد شخص را دریافت کرده، علاوه بر نمایش نام و‌ نام خانوادگی در مرورگر، سن فرد...
۱۴۰۰/۱۰/۱۲

عباس صلاحی
در:
با سلام خدمت شما و تشکر از سایت خوبتون بنده یک table درام که سه ستون در کنار هم داره می خوام که وقتی...
۱۴۰۰/۱۰/۱۲

Fatemeh
در:
سلام وقت بخیر خسته نباشید این تیکه کد با دستور if چه مشکلی داره!؟
۱۴۰۰/۱۰/۱۲

بابایی
در:
سلام وقت بخیر این آدرس یکی از مقالاتی هست که داخل سایت گذاشتم میخوام یه تغییری بدم که این اعداد وسط لینک آدرس نباشه...
۱۴۰۰/۱۰/۱۲

elahe
در:
سلام وقتتون بخیر من در جدول پایگاه داده کتابخانه 4 تا ستون دارم که میخوام هر فیلد رو در یک لیبل بریزم در واقعه یک...
۱۴۰۰/۱۰/۱۲

m.b
در:
سلام مجدد تشکر بابت راهنمایی من یک مشکل دیگه برام بوجود آمد و اون اینکه بعد از ارسال اطلاعت به صفحه questions.php بر...
۱۴۰۰/۱۰/۱۱

m.b
در:
سلام من یک فرم طراحی کردم جهت ارسال سوال با صفحه questions.php با متد post به صفحه dbquestions.php ارسال میشود. این نمونه کد های...
۱۴۰۰/۱۰/۱۱

m.b
در:
با سلام ضمن تشکر از وب سایت خوبتان من مطابق کدهای شما عمل کردم و تمامی کدها رو کپی کردم و...
۱۴۰۰/۱۰/۱۱

fateme
در:
سلام ممنون از سایت خوبتون من سوالم اینه که چجوری داخل منو که با li هست لینک بزاریم تگه لطف کنید بگید ممنون میشم
۱۴۰۰/۱۰/۱۱

مهلا
در:
میخام با php دو تا عدد بنویسم که اگه عدد اول بزرگتر بود 5 بار چاپ کنه که عدد اول بزرگتراست. ممنون میشم جواب بدید...
۱۴۰۰/۱۰/۱۱

Fatemeh
در:
ممنون از پاسخگویی مشکل این یکی کد چیه ؟
۱۴۰۰/۱۰/۱۱

Fatemeh
در:
سلام وقت بخیر مشکل این کد چیه اجرا نمیشه؟
۱۴۰۰/۱۰/۱۱

Fatemeh
در:
سلام وقت بخیر چطوری میتونم یه کد با prompt.window بنویسم که هنگام باز شدن صفحه وب یک عدد از کاربر بگیره و رقم...
۱۴۰۰/۱۰/۱۰

zahra
در:
سلام وقتتون بخیر باشه من میخام از 1 تا 30 روز و برام چاپ کنه یعنی اگر ماه 31 روز بود 1 تا 31 را...
۱۴۰۰/۱۰/۰۸

پوریا
در:
سلام url سایت که گفتم بعد از نصب پلاگین دچار مشکل شد:
۱۴۰۰/۱۰/۰۵

پوریا
در:
سلام وقتتون بخیر اساتید محترم من پلاگین مرغ مگسخوار hummingbird رو روی سایتم نصب کردم (قالب استودیار) و دیدم که پولی شده و هیچیش...
۱۴۰۰/۱۰/۰۴

کیوان عباسپور
در:
سلام ممنون از سایت خوبتان متاسفانه ایمیل های ارسالی اسپم شناسایی میشن واسه رفع این مشکل چیکار کنم منظورم اینه که ایمیل ها...
۱۴۰۰/۱۰/۰۱
  در انتظار بررسی: ۴
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.