لیست در CSS
HTML به شما ul و ol می‌دهد. CSS تصمیم می‌گیرد آن لیست‌ها چطور دیده شوند — گلولهٔ گرد، مربع، عدد، حرف، یا اصلاً بدون نشانگر وقتی منوی ناوبری می‌سازید.
جعبهٔ ابزار list-style
📊 استایل لیست یک‌نگاهه
| ویژگی | کار روزمره |
|---|---|
list-style-type |
شکل نشانگر یا سبک شماره‌گذاری (disc، square، decimal…) |
list-style-position |
نشانگر داخل یا بیرون جعبهٔ محتوا |
list-style-image |
تصویر به‌جای نشانگر |
list-style |
میان‌بر برای type و position و image |
list-style: none |
حذف نشانگر (رایج برای منوی ناوبری) |
نشانگر مال آیتم لیست است، ولی معمولاً استایل را روی ul یا ol می‌گذارید تا همهٔ liها یک شکل بگیرند.
نوع بولت
لیست‌های بدون ترتیب اغلب با disc شروع می‌شوند. اگر طرح آرام‌تر یا تیزتر می‌خواهد، بروید سراغ circle یا square.
انواع نشانگر بولت
cssul.features {
list-style-type: square;
}
ul.notes {
list-style-type: circle;
}لیست شماره‌دار و حرف‌دار
لیست مرتب از سبک شماره‌گذاری استفاده می‌کند. decimal انتخاب روزمره است؛ lower-alpha یا upper-roman برای طرح کلی و گام‌های رسمی‌تر مناسب‌اند.
انواع لیست مرتب
cssol.steps {
list-style-type: decimal;
}
ol.outline {
list-style-type: lower-alpha;
}جای نشانگر — داخل یا بیرون
list-style-position: outside (پیش‌فرض رایج) نشانگر را در حاشیه نگه می‌دارد. inside آن را داخل جریان متن می‌کشد — در کارت‌های تنگ مفید است.
نشانگر داخل جریان متن
cssul.card-list {
list-style-position: inside;
padding-left: 0;
}حذف نشانگر برای منو
منوی ناوبری معمولاً بولت نمی‌خواهد. list-style: none نشانگرها را برمی‌دارد — بعد فاصله را با padding/margin خودتان تنظیم کنید.
لیست تمیز ناوبری
cssnav ul {
list-style: none;
margin: 0;
padding: 0;
}نشانگر تصویری و میان‌بر
یک تصویر کوچک می‌تواند جای بولت بنشیند. فایل را ریز نگه دارید. میان‌بر list-style می‌تواند type و position و image را در یک خط بگذارد.
نشانگر تصویری + میان‌بر
cssul.custom {
list-style: square outside none;
}
ul.icons {
list-style-image: url("/icons/check.svg");
}عادت آرام لیست
برای هر لیست یک سبک نشانگر واضح انتخاب کنید، تصویر نشانگر را کوچک نگه دارید، و وقتی برای منو none می‌زنید، padding را هم مرتب کنید تا آیتم‌ها قشنگ هم‌تراز شوند.
لیست خوانای مقاله
cssarticle ul {
list-style-type: disc;
list-style-position: outside;
padding-left: 1.25rem;
line-height: 1.6;
}خودتان امتحان کنید
- یک
ulرا رویlist-style-type: squareبگذارید. - یک
olرا باlower-alphaاستایل کنید. - روی لیست کوتاه کارت،
list-style-position: insideبزنید. - بولت‌های
nav ulرا باlist-style: noneو padding صفر بردارید. - یک
list-style-imageخیلی کوچک امتحان کنید — اگر تصویر نیامد به type برگردید.
اشتباهات رایج
- فکر کردن که فقط
colorرویliهمیشه نشانگر سفارشی را عوض می‌کند - زدن
list-style: noneولی گذاشتن padding پیش‌فرض بزرگ که ظاهر را خراب می‌کند - فایل‌های خیلی بزرگ
list-style-imageکه خط را می‌بلعند - شماره‌گذاری
ulبا CSS وقتی ترتیب معنا دارد و بایدolباشد - قاطی کردن این درس با حالت‌های hover/visited لینک (درس قبلی)
خلاصه
list-style-typeبولت یا سبک شماره را انتخاب می‌کندlist-style-positionنشانگر را داخل یا بیرون می‌گذاردlist-style: noneنشانگر را برای منو پاک می‌کندlist-style-imageو میان‌برlist-styleامکانات اضافه می‌دهند- نشانگر را آرام نگه دارید و بعد از حذف بولت، padding را عمدی تنظیم کنید
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود