گروه مقاله : CSS
تاريخ انتشار : 1394/02/02 - 10:45
كد :216
.
با استفاده از این خاصیت شما می توانید :
-
برای تنظیم مقادیر مختلف لیست های مرتب
-
برای تنظیم مقادیر مختلف لیست های نامرتب
-
برای تنظیم یک عکس به عنوان نشانگر کنار هر آیتم از لیست
در HTML دو نوع لیست وجود دارد:
-
لیست های نا مرتب <ul> که در کنار هر کدام از آیتم های این لیست یک bullet (دایره تو پر) قرار می گیرد.
-
لیست های مرتب <ol> که در کنار هر کدام از آیتم های این لیست عدد یا حروف الفبا قرار می گیرد.
با استفاده از CSS شما می توانید ظاهری دلخواه به لیست های خود بدهید و یا از عکس به عنوان نشانگر کنار آیتم های لیست استفاده کنید.
نشانگر های مختلف برای List :
به مثال زیر توجه نمایید.
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
همان گونه که در مثال بالا مشاهده می کنید، با استفاده از list -style-type شما می توانید اشکال مختلفی را به عنوان نشانگر آیتم های لیست خود در نظر بگیرید.
استفاده از عکس به عنوان نشانگر آیتم های لیست:
مثال :
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
مثال بالا در تمامی مرورگرها به یک اندازه نمایش داده نمی شود، اینترنت اکسپلورر و اپرا این تصویر را کمی بالاتر از سایر مرورگر ها نمایش می دهند.
برای حل این مشکل crossbrowser یک راه حل به شما پیشنهاد می دهد:
Crossbrowser Solution :
در مثال زیر نشانگر در تمام مرورگر ها یکسان نمایش داده می شود:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li {
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px center;
padding-left: 15px;
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
توضیح مثال بالا:
در مورد <ul>
-
مقدار list-style-type برابر باnone در نظر گرفته شده
-
هم margin و هم padding هر دو صفر در نظر گرفته شده اند .(به دلیل سازگاری و یکسان بودن در تمامی مرورگر ها یا همان crossbrowser بودن)
در مورد تمام li هایی که داخل ul هستند:
-
یک عکس به عنوان پس ضمینه بدون تکرار(no-repeat) برای آن در نظر گرفته شده است.
-
محل قرار گیری عکس را به دلخواه خود تعیین شده.
-
شروع محل قرار گیری متن برای اینکه روی تصویر پس ضمینه قرار نگیرد توسط padding تنظیم شده است.
خلاصه نویسی با استفاده از list-style، به مثال زیر توجه نمایید :
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: square inside url("sqpurple.gif");
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
زمانی که شما از خلاصه نویسی استفاده می کنید:
-
پارامتر اول list-style-type می باشد، چناچه شما تصویر نشانگری را برای لیست خود در نظر گرفته باشید، اگر به هر دلیلی این تصویر نمایش داده نشود بجای آن list-style-type نمایش داده می شود اما اگر تصویر نمایش داده شود list-style-type نمایش داده نمی شود.
-
پارامتر دوم list-style-position می باشد که مشخص می کند نشانگر لیست در خارج و یا داخل متن قرار گیرد.
-
پارامتر سوم list-style-image می باشد که در واقع تصویر نشانگر لیست را مشخص می کند.
نکته : اگر هر کدام از پارامتر های بالا درج نشود مقدار پیش فرض برای آن در نظر گرفته می شود.