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 مطالب بیشتر:
» خاصیت Background و ویژگی های آن در CSS
» سلکتور آی دی (ID) و کلاس (Class) در CSS
» کار با ویژگی margin و padding در CSS
» مقدمه ای بر CSS و استایل دهی صفحات وب
» نحوه تنظیم استایل لینک (Link) در CSS
commentنظرات (۳۲ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: احمد
زمان: ۱۴:۱۹:۴۲ - تاریخ: ۱۳۹۱/۰۵/۰۸
با سلام
ممنون از این که درباره پیام قبلی ما را راهنمایی کردید.
من فقط استاندارد اندازه قالب می خواستم بدونم مثلا 760 پهنا یا 960 و یک راهنمای جزیی ازقالب اولیه وب می خواستم
ممنونم از کمک شما.....
پاسخ: 
سلام
خواهش می کنیم، در واقع استاندارد خاصی برای عرض قالب های وب وجود ندارد، چون گستره استفاده از دستگاهها با پهنای متفاوت زیاد است، اما معمولا برای قالب های با عرض ثابت، پهنای 960 یا 980 پیکسل استفاده می شود، امروزه اکثر مانیتورهای CRT از استاندارد 1024 پیکسل استفاده می کنند و در مانیتورهای عریض این اندازه بیشتر است، پس اگر پیکسل قالب خود را همان 960 در نظر بگیرید، با طراحی خوب و استاندارد، مرورگر سایت را به خوبی نشان می دهد و به فرض اسکرول افقی نخواهید داشت، یک شیوه دیگر طراحی قالب به صورت تعریف مقادیر درصدی به جای پیکسل است، به این صورت با کاهش یا افزایش پهنای پنجره مرورگر، قالب نیز خود را با آن هماهنگ می کند، البته این روش به دلیل برهم زدن یکنواختی کار، چندان باب طبع طراحان وب نیست، ولی گاهی رهگشا است.
برای طراحی قالب تسلط بر CSS ضروری است و این تسلط خیلی از مواقع با آزمون و خطا بدست می آید و ناشی از تجربه است، استفاده از برنامه هایی مثل Adobe Dreamweaver نیز کار کدنویسی قالب ها را آسان می کند، همچنین برای تست قالب های طراحی شده خود در تمام ورژن های اکسپلورر، برنامه ای تحت عنوان IETester در آدرس زیر وجود دارد:
http://my-debugbar.com/wiki/IETester/HomePage
نویسنده: مریم
زمان: ۱۴:۲۷:۰۷ - تاریخ: ۱۳۹۱/۰۶/۰۸
سلام
ممنون از وب سایت خوبتون
من دارم کد منو می نویسم text-decoration برای از بین رفتن زیر خط که تو ul, li
در قسمت css می نویسم اعمال نمیشه مشکل چیه؟
پاسخ: 
سلام
بر اساس الگوی زیر اگر خاصیت ها را تعریف کنید مشکل حل می شود:
<style type="text/css">
.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>
نویسنده: مریم
زمان: ۲۰:۰۴:۲۹ - تاریخ: ۱۳۹۱/۰۶/۱۰
واقعا ممنونم
فقط چرا از کلاس استفاده کردید با div نمی شد؟
پاسخ: 
سلام
می توانید لیست ها را درون یک بلاک div هم قرار دهید، ولی نهایتا باید برای آن بلاک از کلاس css استفاده کنید تا حالت های a و a:hover را بتوانید برای لینک ها تنظیم نمائید، تعریف این حالت ها به صورت استایل خطی ممکن نیست.
نویسنده: ناشناس
زمان: ۱۶:۴۸:۵۹ - تاریخ: ۱۳۹۱/۰۶/۱۱
کد منو های که در پایین هر صفحه می باشد را هم ممکن بگید
نویسنده: مهیار
زمان: ۰۰:۲۳:۴۸ - تاریخ: ۱۳۹۱/۰۸/۰۵
سلام.
من می خواستم عناصری که به صورت لیست می نویسیم در یک خط قرار بگیرند. مثل منوها و navigation bar.
چی کار باید کنم؟ لطفا کمکم کنید. ممنون
پاسخ: 
سلام
از خاصیت display:inline-block یا float با مقادیر left یا right برای عناصر استفاده کنید.
نویسنده: مهسا
زمان: ۱۲:۲۹:۲۵ - تاریخ: ۱۳۹۱/۰۸/۲۳
با سلام
آیا li خاصیتی دارد که بتوان اشکال آن را بدون استفاده از عکس رنگی کرد؟ (circle, sequre,...)
پاسخ: 
سلام
بله، خاصیت color این کار را انجام می دهد، به طور مثال:
<ul>
<li type="circle" style="color:#390">
<div style="color:#C00">5</div>
</li>
</ul>
نویسنده: سوده فروهک
زمان: ۱۱:۴۶:۵۳ - تاریخ: ۱۳۹۲/۰۵/۲۰
سلام. من با div طراحی سایت انجام میدم. چطور می تونم وقتی 3 تا ستون دارم ستون دوم رو وسط قرار بدم؟ با float نشد... مثل زیر:
1| 2| 3
پاسخ: 
سلام
برای کنار هم قرار دادن بلاک های div می توانید در کنار float از خاصیت display با مقادیر inline-block استفاده کنید، مثال:
<style type="text/css">
.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>
نویسنده: پگاه
زمان: ۱۲:۰۹:۰۸ - تاریخ: ۱۳۹۲/۰۷/۱۶
با سلام
در سایت w3schools گفته برای اینکه در مرورگرهای مختلف مشکل پیش نیاد به جای list-style از background-image استفاده کنید برای پوزیشنش هم که از background-position استفاده می کنیم پس عملا این سه خصوصیت لیست ها استفاده ای ندارن درسته؟
پاسخ: 
سلام
به لحاظ اینکه مرورگرهای مختلف، لیست ها را با استاندارهای متفاوتی پردازش کرده و نمایش می دهند، برای یکسان سازی حالت ظاهری، توصیه شده از خاصیت های مربوط به background استفاده شود، لذا در عمل خاصیت های مربوط به لیست، در موارد حرفه ای کاربرد زیادی ندارند.
نویسنده: ابوالفضل محمدی
زمان: ۱۲:۳۷:۵۳ - تاریخ: ۱۳۹۲/۰۹/۰۲
با سلام. من این کدها رو داخل ویرایش قالب میذارم ولی منوها بالای صفحه میاد. لطفا توضیح دهید...
پاسخ: 
سلام
باید با اصول کدهای HTML و نحوه ویرایش قالب آشنا باشید، اگر کدها را در جای مناسب قرار دهید، به درستی نمایش داده می شوند!
نویسنده: پگاه
زمان: ۱۴:۵۸:۱۶ - تاریخ: ۱۳۹۲/۱۲/۱۳
با سلام
اینطور که من تست کردم اگر برای <ul> خصوصیت list-style-type را مثلا decimal دهیم اعداد کنار آیتم ها میاد یعنی <ul> که باید لیست بدون شماره بسازه decimal رو قبول می کنه و لیست شماره دار می سازه و همین طور در مورد <ol> که مثلا disc رو قبول می کنه و لیست بدون شماره می سازه
پس اینجوری یعنی میشه کار <ul> و <ol> رو عوض کرد درسته؟
پاسخ: 
سلام
ظاهرا که همین طور است! البته روش استاندارد را رعایت کنید در مجموع بهتر است.
نویسنده: farshad
زمان: ۱۹:۰۹:۴۷ - تاریخ: ۱۳۹۴/۰۳/۰۱
زیر منوها به سمت چپ باز میشه . مشکلش چیه؟
پاسخ: 
مشکل کدام زیر منو؟!
نویسنده: داوود
زمان: ۱۲:۱۶:۳۲ - تاریخ: ۱۳۹۴/۰۴/۰۸
سلام آقای مهندس، ظهرتون بخیر و خوشی انشاالله.
استاد یه سوال از حضورتون داشتم؛ من یه منو طراحی کردم، میخواستم ببینم از نظر اصولی و استاندارد از نظر شما ایرادی نداره؟؟
ببنید و بعدش یه سوال دارم که در پایین کد ازتون میپرسم.
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl" lang="fa-IR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
padding:30px;
background:#CACACA;
}
ul#nav{
background-color:#FFFF00;
width:160px;
}
ul#nav li{
list-style:none;
background-color:#BEBEBE;
border:2px solid black;
border-bottom-color:#000000;
border-top-color:#CCCCCC;
border-left-color:#CCCCCC;

}
ul#nav li a{
display:block;
line-height:45px;
padding-right:10px;


text-decoration:none;
}

ul#nav li a:hover{
background-color:#FFFFFF;
}
</style>
</head>
<body>
<ul id="nav">
<li><a class="button" href="#">صفحه اول</a></li>
<li><a class="button" href="#">فروشگاه</a></li>
<li><a class="button" href="#">همکاری با ما</a></li>
<li><a class="button" href="#">نمونه پروژه ها</a></li>
</ul>
</body>
همین کد در لینک روبرو:
http://jsfiddle.net/k7ah4z4t
حالا ببینید استاد عزیز؛ قسمتی که من رو یه خورده اذیت کرد و باعث شد وقتم رو زیاد بگیره این بود که وقتی میرفتم روی منو و وقتی که میخواستم hover رو اعمال کنم؛ فقط طول متن رو میگرفت و کل div مربوط به همون خونه رو نمیگرفت که از نظر ظاهری زشت میشد. اومدم و شانسی (البته یه خورده شانسی) این خاصیت رو اعمال کردم:
ul#nav li a{
display:block;
}
و درست شد. میشه یه توضیحی بدین که چرا درست شد و چرا مثلا اگه inline-block میذاشتم جواب نمیداد؟؟ آیا باز باید با padding ور میرفتم که در این حالت درسته بشه یا نه همون کاری که کردم و block تعریف کردم درسته؟؟
ممنونم از راهنمایی هاتون. ضمنا به سوال دیروزم پاسخ ندادین، یعنی اینکه دیگه منتظر نباشیم یا اینکه چون سرتون شلوغه ممکنه جواب نداده باشین استاد؟؟
مرسی و واقعا متشکرم.
پاسخ: 
سلام
توضیح برخی رفتارهای مرورگر در CSS خیلی ساده نیست و به نوعی نیاز به مرور فلسفه ایجاد و تکامل خاصیت ها دارد! اما به طور خلاصه این حالت به چند مورد برمی گردد:
- تگ a به صورت پیش فرض inline است و خاصیت هایی مانند height، width ندارد و padding آن صفر است! (عناصر inline با هدف درج در یک خط در کنار سایر محتوا مانند متن و... باید استفاده شوند و لذا وجود ارتفاع و عرض متفاوت، در اولویت نیست!)
- زمانی که display آن را به block تبدیل می کنید، width و height قابل اعمال است، همچنین مرورگر یک مقدار padding پیش فرض در نظر می گیرد (دقت کنید که در این حالت تا زمانی ارتفاع بلاک گسترش داده می شود که li مقدار auto برای عرض و ارتفاع داشته باشد، اگر مقدار پیکسلی برای تگ li تنظیم کنید، رفتار مرورگر برای تگ a متفاوت خواهد بود و باید برای آن نیز یک مقدار پیکسلی تعریف کنید، این موارد یک نوع استاندارد پیش فرض بین مرورگرها است و بعضا قاعده خاصی نیز ندارد، گاهی بهترین روش آزمایش و خطای خاصیت ها برای رسیدن به یک حالت مطلوب است که به مرور جزء رویه کار طراحی می شود).
- خاصیت line-height نیز می تواند باعث افزایش یا کاهش ارتفاع بلاک شود.
- در خاصیت inline-block تفاوتهایی با block وجود دارد که شاید به نوعی فلسفه inline با block ترکیب شده!، در اینجا هم باید یا padding و یا مقدار height، width تعیین کنید.
- منو از نظر اصول HTML و SEO مشکل عمده ای ندارد، البته سعی کنید اطلاعات SEO خود را گسترش دهید، به فرض وجود تگ title برای a می تواند اثر مثبت داشته باشد، همچنین برای پروژه های جدید بهتر است از HTML5 استفاده شود.
نویسنده: داوود
زمان: ۰۸:۵۷:۳۴ - تاریخ: ۱۳۹۴/۰۴/۰۹
با سلام و عرض ادب؛
صبحتون بخیر و خوشی انشاالله.
ممنونم که جوابمو دادین. آقای مهندس راستش رو بخواین همینجوری و بصورت تئوری یه خورده ای html5 رو مطالعه کردم ولی هنوز بصورت کاربردی باهاش کار نکردم. انشااله سعی می کنم با اون هم کار کنم.
آقای مهندس یه سوال دیگه داشتم ازتون. البته ممکنه مربوط به درس display باشه ولی چون توش منو بود من همینجا ازتون میپرسم. اگه زحمت نیست و اشکال نداره یا بفرمایین سوال رو منتقل کنم یا خودتون بیزحمت، کار انتقالش رو انجام بدین.
استاد تو این لینک من کد مربوط به منوی افقی رو براتون قرار دادم:
http://jsfiddle.net/9ohLc9bq/2
من عمدا و برای اینکه خاصیت ارث بری رو تست کنم اومدم و طبق کدی که براتون گذاشتم به body خاصیت display:inline-block رو اعمال کردم. (هر چند این کار هیچ لزومی نداشت و بدون این هم منو طبق توقعی که ازش داشتم کار می کرد.)
بعدش بازم با اینکه هیچ لزومی نداشت اومدم و به سلکتور (یا کلاس):
.button:hover
با اینکه باز هم نیازی نبود این خاصیت رو اعمال کردم:
display:inherit
ولی اجرای منو بد شد و وقتی که روی هر گزینه ش می رفتیم کاملا بهم ریخته میشد یعنی انگار display رو میومد و block میکرد در صورتی که اگه همون inline-block رو از body به ارث می گرفت، عملکردش درست بود. سوال من حالا اینجاست که:
کلاس
.button:hover
مگه اگه بهش
display:inherit
رو بدیم نباید بیاد از body ارث بگیره؟؟ الان از کدوم یکی داره ارث میگیره که block رو انتخاب می کنه. اگه از a هستش که خوب به a هم خاصیت
display:inline-block
رو دادم ولی عمل نکرد به خوبی.
ببخشید اگه سوالم زیاد شد. قول میدم امروز و فردا رو دیگه سوالی نپرسم. ببخشید بخدا.
پاورقی:
همون کد فوق با display:inherit :
http://jsfiddle.net/9ohLc9bq/3
پاسخ: 
سلام
تگ a از تگ والد خود یعنی ul یا همان nav# ارث می برد، برای اطمینان
display:inline-block;
را به nav نسبت دهید!
نویسنده: داوود
زمان: ۱۲:۱۷:۳۰ - تاریخ: ۱۳۹۴/۰۴/۱۰
سلام و ممنونم از راه حل خوبتون. خیلی برام جالب بود. مرسی. دیگه امروز سوال نمیپرسم و راحتتون میذارم. ببخشید بازم.
نویسنده: داوود
زمان: ۱۱:۴۱:۱۱ - تاریخ: ۱۳۹۴/۰۴/۲۴
سلام آقای مهندس، وقتتون بخیر.
استاد لطفا این شبه کد رو مشاهده کنید:
#menu{
background-color:#FFFF00;
}
ul{
background-color:blue;
color:white;
}
</style>
</head>
<body>
<ul id="menu" >
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5</a></li>
</ul>
الان دلیل اینکه رنگ پس زمینه ای که به تگ ul دادیم عمل نمیکنه، به این خاطر هستش که ul رو بردیم تو ID به نام menu دیگه درسته؟؟ خوب حالا رنگ یا همون color رو چرا اعمال نمیکنه؟؟
الان وقتی که اینجوری به یه تگ یه ID رو اختصاص میدیم اونوقت خاصیتهای خودش رو طبق از بالا به پایین نوشتن میاد اخذ میکنه یا specificity ؟ من اینجا فکر می کردم که اولویت تگ ul بالاتره و میاد حتی روی رنگ پس زمینه لینکهای فوق نیز تاثیر میذاره، در حالیکه اینطوری نشد.
پاسخ: 
سلام
- خاصیت color اعمال می شود، منتها باید توجه کنیم که تگ a شامل بحث color نمی شود و خودش سلکتر متفاوت دارد (a:link a:hover و...)، برای اطمینان درون تگ ul یک متن ساده بنویسیید و امتحان کنید!
- در این بحث قضیه فرق می کند، اعمال اولویت ها در زمانی است که مقایسه یکسان باشد، یعنی اگر به فرض دو بار برای یک ID استایل متفاوت تعریف کنید، استایل نهایی اعمال می شود، اما اینجا عبارت ul تنها یک مقدار برای حالت پیش فرض است (حالتی که هیچ خاصیتی با Class یا ID تعریف نشده باشد) و ارجحیت آن در مقایسه با وقتی که خاصیتی را در یک ID تعریف می کنید کمتر است، هرچند اگر ul بعد از تعریف استایل برای ID، تعریف شده باشد.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




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

form یه سوال کننده
در:
سلام. ببخشید چطور میشه ایمیل هایی رو میفرستن که ریپلای زدن رو ایمیلی که از طرف ما نبوده بیشتر تو تبلیغات دیدم امیدوارم منظورم و...
۰۳:۲۳:۰۸ ۱۳۹۸/۰۸/۲۴

form پرتو
در:
با عرض سلام و خسته نباشید امیدوارم حالتون خوب باشه من دو سه سال پیش وبلاگم رو حذف کردم ایا امکانش هست برگرده؟ ادرس...
۱۴:۵۵:۵۲ ۱۳۹۸/۰۸/۲۰

form علی
در:
سلام من نمی تونم html tag رو چطور در وبلاگم قرار بدم وبلاگم اینه
tagtak.blog.ir
۱۰:۲۳:۳۴ ۱۳۹۸/۰۸/۲۰

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

form سمیه
در:
سلام ممنون بابت آموزش مفیدتون توی تگ ها هرچیزی که در تگ head قرار بگیره نمایش داده نمیشه، اما ممنون میشم...
۲۰:۴۹:۲۳ ۱۳۹۸/۰۸/۱۷

form استادمجازی
در:
سلام. از ادمین عزیز و همگی دعوت می کنم آموزش های خوبتون را بصورت آموزش ویدیویی یا صوتی و... در سایت ostadmajazi.com استادمجازی ...
۲۲:۱۲:۲۳ ۱۳۹۸/۰۸/۱۳

form mohamad
در:
سلام و خسته نباشید ، توی فرمی که ساختم چند تا drop down دارم که میخوام با php براشون شرط بذارم به طوری...
۱۳:۵۱:۳۴ ۱۳۹۸/۰۸/۱۰

form رضا
در:
خسته نباشید این جلسه آخر html بود؟؟؟؟
۰۱:۱۵:۰۷ ۱۳۹۸/۰۸/۱۰

form امیرمحمد
در:
سلام و خسته نباشید استاد بنده میخوام بین دو کد زیر که مشخص کردم رو به دست بیارم
// ---------------------set سلام...
۱۹:۳۰:۵۳ ۱۳۹۸/۰۸/۰۸

form حجت
در:
خیلی ممنونم از لطف شما. اوکی شد.
۱۰:۲۸:۳۵ ۱۳۹۸/۰۸/۰۶

form میلاد
در:
آشنایی نسبی با css, php و ajax دارم و نمیخام از library های موجود در نت استفاده کنم. خواستم با همین متد که انصافا روان...
۲۳:۲۲:۵۵ ۱۳۹۸/۰۸/۰۵

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

form raha
در:
سلام وقتتون بخیر ببخشید علامت @ در کل به چه معناست ممنون میشم پاسخ دهید
۲۰:۱۲:۵۹ ۱۳۹۸/۰۸/۰۵

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