لیست‌های CSS
- صفحه قبلی شکل‌های CSS
- صفحه بعدی مبانی مدل پنجره CSS
ویژگی‌های لیست CSS به شما اجازه می‌دهند که آیکون‌های لیست را قرار دهید، تغییر دهید یا از تصاویر به عنوان آیکون‌های لیست استفاده کنید.
لیست‌های CSS
به نوعی، هر محتوایی که غیر از متنی توصیفی است می‌تواند به عنوان لیست در نظر گرفته شود. سرشماری، منظومه شمسی، نسل، منوی بازدید، حتی همه دوستان شما می‌توانند به عنوان یک لیست یا لیستی از لیست‌ها نمایش داده شوند.
به دلیل تنوع زیاد لیست‌ها، این موضوع بسیار مهم است، بنابراین، کمبود سبک‌های لیست در CSS واقعاً یک ناراحتی بزرگ است.
نوع لیست
برای تأثیرگذاری بر سبک لیست، ساده‌ترین و در عین حال جامع‌ترین راه تغییر نوع آیکون‌ها است.
مثلاً در یک لیست نامرتب، آیکون لیست (marker) در کنار هر آیتم لیست قرار دارد. در لیست‌های مرتب، آیکون ممکن است حرف، عدد یا نماد دیگری از سیستم شمارش باشد.
برای تغییر نوع آیکون‌های لیست، می‌توان از ویژگی list-style-type:
ul {list-style-type : square}
این بیان آیکون لیست در لیست‌های نامرتب را به شکل مربع تنظیم می‌کند.
تصویر آیتم لیست
گاهی اوقات، آیکون‌های معمولی کافی نیستند. ممکن است بخواهید از یک تصویر برای هر آیکون استفاده کنید، که می‌توان از list-style-image این ویژگی انجام می‌دهد:
ul li {list-style-image : url(xxx.gif)}
تنها با استفاده از یک ارزش url() می‌توان از تصاویر به عنوان آیکون استفاده کرد.
محل آیکون لیست
CSS2.1 می‌تواند تعیین کند که آیکون‌ها در خارج از محتوای لیست یا در داخل آن قرار دارند. این کار با استفاده از list-style-position کامله.
نوع لیست کوتاه شده
برای سادگی، می‌توان سه ویژگی لیست‌های بالا را به یک ویژگی آسان‌تر ترکیب کرد:list-style، مثل این:
li {list-style : url(example.gif) square inside}
ارزش‌های list-style می‌توانند به هر ترتیبی لیست شوند و این ارزش‌ها می‌توانند نادیده گرفته شوند. تنها کافی است یک ارزش ارائه شود تا بقیه به ارزش‌های پیش‌فرض خود填 شوند.
مثال CSS لیست:
- برچسب‌های مختلف عناصر لیست در لیست‌های نامرتب
- این مثال نشان می‌دهد که نشان‌دهنده‌های لیست مختلف در CSS وجود دارند.
- برچسب‌های مختلف عناصر لیست در لیست‌های مرتب
- این مثال نشان می‌دهد که نشان‌دهنده‌های لیست مختلف در CSS وجود دارند.
- تمام انواع نشان‌دهنده‌های لیست
- این مثال نشان می‌دهد که نشان‌دهنده‌های لیست مختلف در CSS وجود دارند.
- تصویر را به عنوان نشان‌دهنده لیست استفاده می‌کنند
- این مثال نشان می‌دهد که چگونه تصویر را به عنوان نشان‌دهنده لیست استفاده می‌کنند.
- این مثال نشان می‌دهد که چگونه نشان‌دهنده لیست را قرار می‌دهند.
- مکان قرارگیری نشان‌دهنده لیست
- تمام ویژگی‌های لیست را در یک تعریف تعریف می‌کند
- این مثال نشان می‌دهد که چگونه تمام ویژگی‌های مربوط به لیست در یک ویژگی کوتاه‌نویسی قرار می‌گیرند.
ویژگی‌های لیست CSS(list)
| ویژگی | توضیح |
|---|---|
| list-style | ویژگی کوتاه‌نویسی. برای قرار دادن تمام ویژگی‌های مربوط به لیست در یک تعریف استفاده می‌شود. |
| list-style-image | تصویر را به عنوان نشان‌دهنده لیست تنظیم می‌کند. |
| list-style-position | محل نشان‌دهنده لیست در لیست را تنظیم می‌کند. |
| list-style-type | نوع نشان‌دهنده لیست را تنظیم می‌کند. |
| marker-offset |
- صفحه قبلی شکل‌های CSS
- صفحه بعدی مبانی مدل پنجره CSS
