CSSسفارشی سازی لیست ها در
لیست ها دو نوع هستند شامل لیست های شماره دار و لیست های بولت دار، برای لیست های شماره دار از تگ <ol> و برای لیست های بولت دار از تگ <ul> استفاده می شود.
تعیین شکل بولت
بولت می تواند دایره یا مربع باشد و لیست شماره دار نیز می توانند با اعداد معمولی، حروف لاتین و یا اعداد یونانی باشند. توجه کنید این امکان وجود دارد که از تصاویر دلخواه برای آیکون بولت ها استفاده شود.
محل قرارگیری بولت ها
- بولت ها می توانند خارج از حاشیه پاراگراف و یا داخل حاشیه پاراگراف قرار بگیرند. از دستور list-style-position برای تعیین موقعیت بولت ها بکار می روند و می توانند مقادیر outside و یا inside داشته باشند.
- با استفاده از padding و margin نیز می توان یک کادر ایجاد کرده و متن های بولت دار و شمارنده دار را داخل کادرهای ایجاد شده قرار داد.
CSSمثال کامل از سفارشی سازی لیست ها در
<html>
<head>
<style>
ul.a {
list-style-type: circle;
list-style-position: outside;
}
ul.b {
list-style-type: square;
list-style-position: inside;
}
ol.c {
list-style-type: upper-roman;
background: #3399ff;
padding: 200px;
margin-left: 35px;
}
ol.d {
list-style-type: lower-alpha;
}
ul.e{
list-style-image: url(‘myimage.jpg’);
}
</style>
</head>
<body>
<h2>The list-style-type Property</h2>
<p>Example of unordered lists:</p>
<ul class=“a”>
<li>Coffee</li>
<li>Tea</li>
</ul>
<ul class=“b”>
<li>Coffee</li>
<li>Tea</li>
</ul>
<ul class=“e”>
<li>Coffee</li>
<li>Tea</li>
</ul>
<p>Example of ordered lists:</p>
<ol class=“c”>
<li>Coffee</li>
<li>Tea</li>
</ol>
<ol class=“d”>
<li>Coffee</li>
<li>Tea</li>
</ol>
</body>
</html>