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 اين ويژگي نيز مي‌تواند براي حذف علامت/ليست استفاده شود. توجه داشته باشيد كه ليست همچنين مارژين و padding پيش‌فرض دارد. براي حذف اين محتوا، به <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-position(تعيين كنيد كه علامت ليست بايد در داخل يا خارج جريان محتوا نشان داده شود)list-style-image(تصوير را به عنوان علامت ليست مشخص كنيد)
اگر يك از مقادير ويژگي‌هاي بالا گم شده باشد، مقادير ويژگي‌هاي گم شده به مقادير پيش‌فرض (اگر وجود داشته باشد) اضافه خواهد شد.
تنظيمات رنگ ليست را تنظيم كنيد
ما همچنين مي‌توانيم از تنظيمات رنگ براي تنظيم ويژگي ليست استفاده كنيم تا آنها را جذاب‌تر كنيم.
اين ويژگي‌هايي كه به تگ‌هاي <ol> يا <ul> اضافه مي‌شوند، بر كل ليست تأثير مي‌گذارند، و ويژگي‌هايي كه به تگ <li> اضافه مي‌شوند، بر هر ليست جداگانه تأثير مي‌گذارند:
مثال
ol {
پس‌زمينه: #ff9999;
padding: 20px;
}
ul {
پس‌زمينه: #3399ff;
padding: 20px;
}
ol li {
پس‌زمينه: #ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul li {
پس‌زمينه: #cce5ff;
مargins: 5px;
}
نتايج:
- كافئين
- چاي
- كوکا-کولا
- كافئين
- چاي
- كوکا-کولا
مثال‌هاي بيشتر
- ليست سفارشي با پرانتز چپ قرمز
- اين مثال نمايش مي‌دهد كه چگونه ليستي با پرانتز چپ قرمز را خلق كنيم.
- پور سائز پرانتز ليست
- 本例演示如何创建没有项目符号的带边框列表。
- 列表的所有不同列表项标记
- 本例演示了 CSS 中所有不同的列表项标记。
所有 CSS 列表属性
| 属性 | 描述 |
|---|---|
| list-style | 简写属性。在一条声明中设置列表的所有属性。 |
| list-style-image | 指定图像作为列表项标记。 |
| list-style-position | 规定列表项标记（项目符号）的位置。 |
| list-style-type | 规定列表项标记的类型。 |
