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 مطالب بیشتر:
» مقدمه ای بر CSS و استایل دهی صفحات وب
» کاربرد خاصیت height و width در CSS
» ویژگی های Font و Text در CSS
» کاربرد ویژگی position و float در CSS
» کار با ویژگی margin و padding در 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>
.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>
.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 لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ کوتاه و مختصر داده خواهد شد!
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.





5 × 8
 refresh
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form Iman Mafakheri
در:
سلام من یه قالب خارجی اوردم راست چینش کردم حتی فونتشم تغییر دادم اما متاسفانه وقتی متن فارسی مینویسم حروف رو جدا جدا مینویسه نمیدونم...
۱۳۹۹/۰۶/۳۰

form میثم صدیق
در:
سلام برای اضافه کردن یک المان با (append) من یک کلید گذاشتم اضافه میشه ولی با هر بار کلیک کردن اضافه میشود اگر بخواییم یک...
۱۳۹۹/۰۶/۲۹

form amin
در:
سلام و خسته نباشید می خواستم Slash ( / ) رو به صورت اتوماتیک از تمامی URL ها حذف کنم البته با کمک htaccess...
۱۳۹۹/۰۶/۲۵

form محمد
در:
سلام وقت بخیر من یه همچین کدی دارم میشه لطفا راهنمایی کنید مشکلش چیه؟ سپاسگزارم
۱۳۹۹/۰۶/۲۴

form سروش
در:
سلام . من اطلاعات را از دیتابیس دریافت میکنم و در جدول میبینم . میخوام مثلا 6 مورد آخر را در یک ردیف ببینم و...
۱۳۹۹/۰۶/۲۳

form Behdad kanani
در:
سلام اصلا نمی شه اینکارو انجام داد
۱۳۹۹/۰۶/۲۲

form جعفری
در:
سلام قبل از تبدیل تاریخ نوشتید مثلا خب این مقدار تاریخ برای من در دیتابیس در جدولی بنام startedtm بصورت یونیکس...
۱۳۹۹/۰۶/۲۰

form احمد
در:
با عرض سلام و خسته نباشید ببخشید برای فایل دانلودی باید از چه دستوری استفاده کنم فایل با پسوند pdf رو میخوام بزارم اگر امکانش...
۱۳۹۹/۰۶/۲۰

form شیما
در:
سلام آیا وقتی در قسمت وبلاگ دوستان وبلاگی رو ثبت میکنیم صاحب وبلاگ با استفاده از برنامه های خاصی میتونه متوجه بشه ؟
۱۳۹۹/۰۶/۱۹

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

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

form محسن
در:
سلام و عرض ادب مجدد کد زیر هم کار نمیکنه مشکل چی میتونه باشه ؟!
۱۳۹۹/۰۶/۱۶

form ساناز محمدي
در:
سلام بنده یه ساب دامین دارم با دامنه شخصی حالا داخل این ساب دامین طرف آدرس سایت خودش رو داخل ساب دامین بنده میذاره مثلآ...
۱۳۹۹/۰۶/۱۶

form محسن
در:
سلام و عرض ادب لطفا راهنمایی کنید مشکل کد زیر چیه
۱۳۹۹/۰۶/۱۶

form احمد
در:
با عرض سلام ببخشید من با دستور append میخوام یه سطری رو به سبدم اضافه کنم ولی چطوری باید داخل append تگ ها رو بنویسم...
۱۳۹۹/۰۶/۱۵
form احمد
در:
با عرض سلام مجدد و خسته نباشید ببخشید طبق فرمایش شما من قبل از دستور else دستور if را نوشته بودم تا جایی که اطلاع...
۱۳۹۹/۰۶/۱۴
form احمد
در:
با سلام ببخشید طریقه استفاده از دستور else در ایجکس به چه صورت هست ایا باید دوباره فانکشن دان رو در هنگام شرط گذاشتن بزارم....
۱۳۹۹/۰۶/۱۳
form مجتهد
در:
سلام ابتدائا از سایت مفیدتون تشکر می کنم. من خیلی از آموزه هام رو از سایت شما یاد گرفتم. یه سوال دارم...
۱۳۹۹/۰۶/۱۳
form محمد حسین
در:
سلام لینک های من وقتی کلیک شوند اررور 404 تولید میکنند. علت چیست؟
۱۳۹۹/۰۶/۱۱
form حسین
در:
سلام بر شما و با تشکر از سایت خوبتون. من ابتدا با تابع mail پیش رفتم و یک if ایجاد کردم که اگر ایمیل...
۱۳۹۹/۰۶/۱۰
form mehdi
در:
خطای -22 مربوط به چیه؟
۱۳۹۹/۰۶/۱۰
form فرشته
در:
سلام چه جوری میتونم متن رو ستونی بنویسم؟
۱۳۹۹/۰۶/۰۶
form افسانه
در:
سلام من در قسمت نظرات گزینه ویرایش وجود نداره و نوشته خصوصی حالا چطور جواب بدهم ؟؟ ممنون میشم زود جواب بدید یا جواب رو...
۱۳۹۹/۰۶/۰۳
form احمد
در:
با عرض سلام و خسته نباشید ببخشید یه مشکل دارم اینکه یه تگ دارم بهش کلاس دادم و میخوام از طریق ایجکس وقتی روش کلیک...
۱۳۹۹/۰۶/۰۳
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.