CSS Lists
📋 مروری بر لیستهای CSS
در HTML، لیستها به سه دسته اصلی تقسیم میشوند:
* لیستهای مرتب (`<ol>`): لیستهای شمارهدار.
* لیستهای نامرتب (`<ul>`): لیستهای بولتدار (نقطهدار).
* لیستهای تعریفی (`<dl>`): شامل جفتهای «واژه و توضیح».
CSS به شما اجازه میدهد ظاهر این لیستها را مثل نوع بولت، شمارهگذاری، فاصلهها و موارد دیگر تغییر دهید.
—
🔹 خواص پایه برای استایل دادن به لیستها
| خاصیت | توضیح | مثال |
| ——————— | ——————————————– | —————————————————- |
| `list-style-type` | نوع بولت یا شمارهگذاری را تغییر میدهد | `circle` (دایره)، `square` (مربع)، `decimal` (اعداد) |
| `list-style-position` | جایگاه بولت را داخل یا بیرون متن مشخص میکند | `inside`، `outside` |
| `list-style-image` | استفاده از تصویر به جای بولت | `url(‘bullet.png’)` |
| `margin` / `padding` | فاصلهگذاری دور لیستها | مثلا `padding-left: 20px;` |
—
🧪نمونه: استایل دادن به یک لیست
html
<ul class=“fancy-list”>
<li>سیب</li>
<li>موز</li>
<li>گیلاس</li>
</ul>
css
.fancy-list {
list-style-type: square; /* بولتهای مربعی */
list-style-position: inside; /* بولتها داخل متن */
padding-left: 20px; /* تورفتگی */
color: darkblue; /* رنگ متن */
font-weight: bold; /* ضخیم بودن فونت */
}
🔹 نمونه لیست مرتب:
css
ol {
list-style-type: upper-roman; /* شمارههای رومی بزرگ: I, II, III, IV … */
margin-left: 30px;
}
—
📝 خلاصه:
* با `list-style-type` میتوانید نوع بولت یا شمارهگذاری را تغییر دهید.
* `list-style-position` جای بولت را داخل یا بیرون متن تنظیم میکند.
* `list-style-image` میتواند بولتها را با تصویر دلخواه جایگزین کند.
* با `margin` و `padding` فاصلهها را کنترل کنید.
—
دیدگاهتان را بنویسید