parsgreen.com
article

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

css-ul-li-list

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

تنظیم تگ ul با css


تگ ul به عنوان لیست اصلی، معمولا در حالت پیش فرض به صورت نقطه دار (نقطه ای در سمت راست یا چپ نمایش داده می شود) نشان داده می شود که این موضوع می تواند زیبایی کار را در طراحی وب تحت تاثیر قرار دهد، اما خوشبختانه مانند بسیاری از تگ های html، تگ ul نیز به خوبی ویژگی های css را می پذیرد، در مثال زیر برخی از این ویژگی ها را بر روی آن اعمال کرده ایم.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | تنظیم تگ ul با استایل css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | تنظیم تگ ul با استایل css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
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;    
}
.li-2{
    list-style:none;
    list-style-image:url(list-item-li.png);
    list-style-position:inside;    
}
</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 در آنها توجه نمائید.
</body>
</html>
پیش نمایش
ملاحظه می کنید که وقتی برای تگ li ویژگی هایی تعریف می کنیم، تگ ul نیز از آن پیروی می کند، چرا که آیتم های لیست نهایتا به صورت li نشان داده می شوند و ul برای تنظیم تو در توی آیتم ها کاربرد دارد، در اینجا ما از دو کلاس li-1 و li-2 برای آیتم های سطح یک و سطح دو استفاده کرده ایم که پی بردن به نحوه تنظیم آنها نیاز به اندکی دقت و توجه به ترتیب چینش آنها دارد.
sectionدسته بندی: آموزش مقدماتی » CSS
related مطالب بیشتر:
» آشنایی با کلاس (class) و آی دی (id) در css
» کار با ویژگی position و float در CSS
» نحوه تنظیم لینک (link) در استایل css
» کار با ویژگی های font و text در css
» کار با ویژگی margin و padding در css
commentنظرات (۲۹ یادداشت برای این مطلب ارسال شده است)
نویسنده: احمد
زمان: ۱۴:۱۹:۴۲ - تاریخ: ۱۳۹۱/۰۵/۰۸
با سلام
ممنون از این که درباره پیام قبلی ما را راهنمایی کردید.
من فقط استاندارد اندازه قالب می خواستم بدونم مثلا 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، تعریف شده باشد.
paged صفحه 1 از 2




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

9 × 5
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...