در دنیای طراحی وب، استفاده از لیست‌ها برای نمایش گروهی از آیتم‌ها به صورت مرتب یا نامرتب بسیار رایج است. CSS امکان این را به شما می‌دهد که ظاهر این لیست‌ها را با ویژگی‌های مختلفی همچون list-style-type، list-style-position، و list-style-image سفارشی کنید.
ابتدا بیایید نگاهی به ویژگی list-style-type بیندازیم. این ویژگی به شما اجازه می‌دهد نوع نشانه‌گذاری برای هر آیتم لیست را تعیین کنید. به عبارتی، می‌توانید انتخاب کنید که موارد لیست به شکل دایره، مربع، عدد یا حتی الفبا نمایش داده شوند.
یکی دیگر از ویژگی‌های مهم، list-style-position است که مشخص می‌کند نشانه‌گذاری در کجا نسبت به متن قرار گیرد. شما می‌توانید بین مقادیر inside و outside انتخاب نمایید تا ببینید که آیا نشانه‌ها در داخل یا خارج از متن قرار بگیرند.
همچنین، می‌توانید یک تصویر سفارشی برای نشانه‌های لیست خود قرار دهید که با استفاده از ویژگی list-style-image انجام می‌شود. این امکان به شما امکان ایجاد ظاهر منحصر به فردی برای سایتتان فراهم می‌کند.
تمام این ویژگی‌ها را می‌توان با استفاده از ویژگی shorthand با نام list-style ترکیب کرد. این ویژگی به شما اجازه می‌دهد تا همه تنظیمات لازم برای لیست خود را در یک خط کد مشخص کنید.
بیایید نگاهی به این ویژگی‌ها در کد HTML و CSS بیندازیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS List Style Example</title>
<style>
ul {
list-style-type: square;
list-style-position: inside;
list-style-image: url('marker.png');
}
</style>
</head>
<body>
<ul>
<li>آیتم اول</li>
<li>آیتم دوم</li>
<li>آیتم سوم</li>
</ul>
</body>
</html>