لیست CSS
لیست‌های نامرتب:
- قهوه
- چای
- کوکا-کولا
- قهوه
- چای
- کوکا-کولا
لیست‌های مرتب:
- قهوه
- چای
- کوکا-کولا
- قهوه
- چای
- کوکا-کولا
لیست‌های HTML و ویژگی‌های CSS لیست
در HTML، دو نوع اصلی لیست وجود دارد:
- لیست‌های نامرتب (<ul>) - آیتم‌های لیست با نشانه‌های فهرست نشان داده می‌شوند
- لیست‌های مرتب (<ol>) - آیتم‌های لیست با شماره یا حرف نشان داده می‌شوند
ویژگی‌های لیست CSS به شما امکان می‌دهند که:
- نشانه‌ی آیتم‌های لیست مختلف برای لیست‌های چسبناک تنظیم کنید
- نشانه‌ی آیتم‌های لیست مختلف برای لیست‌های ناچسب تنظیم کنید
- تصویر را به عنوان نشانه‌ی آیتم‌های لیست تنظیم کنید
- اضافه کردن رنگ پس‌زمینه به لیست و آیتم‌های لیست
نشانه‌های مختلف آیتم‌های لیست
list-style-type این ویژگی نوع نشانه‌ی آیتم‌های لیست را مشخص می‌کند.
در مثال زیر چندین نوع نشانه‌ی آیتم‌های لیست قابل استفاده را نشان می‌دهد:
مثال
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;
}
توجه:برخی از مقادیر برای لیست‌های ناچسب (unordered list) استفاده می‌شوند و برخی دیگر برای لیست‌های چسبناک (ordered list) استفاده می‌شوند.
تصویر به عنوان نشانه‌ی آیتم‌های لیست
list-style-image این ویژگی تصویر را به عنوان نشانه‌ی آیتم‌های لیست مشخص می‌کند:
مثال
ul {
list-style-image: url('sqpurple.gif');
}
محل‌دهی نشانه‌ی آیتم‌های لیست
list-style-position این ویژگی موقعیت نشانه‌ی آیتم‌های لیست (لیست استایل) را مشخص می‌کند.
"list-style-position: outside;" دلالت دارد که نقطه‌ی نشانه‌ی فهرست (لیست استایل) در بیرون از آیتم‌های لیست قرار می‌گیرد. شروع هر سطر آیتم‌های لیست به صورت عمودی هم‌تراز خواهد بود. این حالت پیش‌فرض است:
- قهوه - نوشیدنی‌ای که از دانه‌های قهوه پخته شده تهیه شده است
- چای
- کوکا-کولا
"list-style-position: inside;" این نشان‌دهنده این است که علامت آیتم در داخل آیتم لیست قرار دارد. به عنوان بخشی از آیتم لیست، این به بخشی از متن تبدیل می‌شود و در ابتدای متن باز می‌شود:
- قهوه - نوشیدنی‌ای که از دانه‌های قهوه پخته شده تهیه شده است
- چای
- کوکا-کولا
مثال
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
حذف تنظیمات پیش‌فرض
list-style-type:none این ویژگی‌ها همچنین می‌توانند برای حذف علامت‌ها/نشان‌ها استفاده شوند. توجه داشته باشید که لیست‌ها دارای حاشیه‌های پیش‌فرض خارجی و داخلی هستند. برای حذف این محتوا، باید به <ul> یا <ol> اضافه شود margin:0 و padding:0 :
مثال
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
لیست - ویژگی کوتاه
list-style ویژگی‌ها یک ویژگی کوتاه هستند. این ویژگی برای تنظیم همه‌ی ویژگی‌های لیست در یک بیان استفاده می‌شود:
مثال
ul {
list-style: square inside url("sqpurple.gif");
}
در استفاده از ویژگی‌های کوتاه، ترتیب مقادیر به صورت زیر است:
list-style-type(اگر list-style-image مشخص شده باشد و به دلایلی نمی‌توان تصویر را نمایش داد، مقادیر این ویژگی نمایش داده خواهد شد)list-style-position(مشخص کنید که علامت آیتم لیست باید در داخل یا خارج جریان محتوای نمایش داده شود)list-style-image(تصویر را به عنوان علامت آیتم لیست مشخص کنید)
اگر یکی از مقادیر فوق کم باشد، مقادیر پیش‌فرض کم از دست رفته (اگر وجود داشته باشد) اضافه خواهد شد.
تنظیم استایل رنگ لیست
ما همچنین می‌توانیم از تنظیمات رنگ برای تنظیم استایل لیست استفاده کنیم تا آنها به نظر جالب‌تر بیایند.
هر استایل‌ای که به علامت‌های <ol> یا <ul> اضافه شود، بر کل لیست تأثیر می‌گذارد، در حالی که ویژگی‌هایی که به علامت‌های <li> اضافه می‌شوند، بر هر آیتم لیست تأثیر می‌گذارند:
مثال
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
مargins: 5px;
}
نتیجه‌ی:
- قهوه
- چای
- کوکا-کولا
- قهوه
- چای
- کوکا-کولا
مثال‌های بیشتر
- لیست‌های سفارشی با لبه‌ی چپ قرمز
- این مثال نحوه‌ی ایجاد لیستی با لبه‌ی چپ قرمز را نشان می‌دهد.
- لیست‌های لبه‌ی پهن به صورت کامل‌صفحه
- این مثال نشان می‌دهد که چگونه می‌توان یک لیست با بدون نشانه‌های لیست و با حاشیه ایجاد کرد.
- تمام نشانه‌های لیست مختلف
- این مثال نشان می‌دهد که چگونه می‌توان یک لیست با بدون نشانه‌های لیست و با حاشیه ایجاد کرد.
تمام ویژگی‌های لیست CSS
| ویژگی | توضیح |
|---|---|
| list-style | ویژگی کوتاه‌نویسی. در یک بیان، تمام ویژگی‌های لیست را تنظیم می‌کند. |
| list-style-image | استفاده از تصویر به عنوان برچسب لیست. |
| list-style-position | تعیین موقعیت برچسب‌های لیست (نشان‌های لیست). |
| list-style-type | تعیین نوع برچسب‌های لیست. |
