لیستها
لیست مرتب نشده
لیست مرتب شده
محتویات
- ۱ لیست مرتب نشده
- ۲ لیست مرتب شده
- ۳ ویژگیهای List در HTML و CSS
- ۴ نشانگرهای متفاوت آیتمهای لیست
- ۵ استفاده از تصویر به عنوان نشانگر آیتمهای لیست
- ۶ موقعیت نشانه آیتمهای لیست
- ۷ حذف تنظیمات پیش فرض
- ۸ لیست - ویژگی مختصر
- ۹ استایل دهی لیست با رنگها
- ۱۰ مثالهای بیشتر
- ۱۱ خود را با تمرینها امتحان کنید!
- ۱۲ تمامی ویژگی های List در CSS
- ۱۳ منابع آموزشی
ویژگیهای List در HTML و CSS
در HTML، دو نوع اصلی لیست وجود دارد:[۱]
- لیستهای نامرتب (<ul>) - آیتمهای لیست با bulletها نشانهگذاری شدهاند
- لیستهای مرتب (<ol>) - آیتمهای لیست با اعداد یا حروف نشانهگذاری شدهاند
ویژگیهای لیست در CSS به شما اجازه میدهد که:
- نشانههای متفاوت برای آیتمهای لیستهای مرتب تنظیم کنید
- نشانههای متفاوت برای آیتمهای لیستهای نامرتب تنظیم کنید
- عکسی را به عنوان نشانه آیتمهای لیست تنظیم کنید
- رنگ پس زمینه به لیستها و آیتمهای لیست اضافه کنید
نشانگرهای متفاوت آیتمهای لیست
ویژگی list-style-type
نوع نشانه آیتمهای لیست را مشخص میکند.
مثال زیر برخی از نشانههای آیتم در دسترس را نشان میدهد:
نکته: برخی از مقادیر برای لیستهای نامرتب، و برخی برای لیستهای مرتب هستند.
استفاده از تصویر به عنوان نشانگر آیتمهای لیست
ویژگی list-style-image
یک تصویر را به عنوان آیتمهای لیست مشخص میکند:
موقعیت نشانه آیتمهای لیست
ویژگی list-style-position
مشخص کننده موقعیت نشانگرهای آیتمهای لیست (نقاط bullet) است.
"list-style-position: outside;" به معنای این است که نقاط bullet بیرون از آیتمهای لیست خواهند بود. نقطه شروع هر خط در آیتم لیست به صورت عمودی تراز خواهد شد. این امر، به صورت پیشفرض است:
"list-style-position: inside;" به معنای این است که نقاط bullet درون آیتمهای لیست خواهند بود. همانند بخشی از آیتم لیست، به عنوان بخشی از متن خواهد بود و متن را در آغاز push میکند:
حذف تنظیمات پیش فرض
از ویژگی list-style-type:none
میتوان برای حذف نشانه/ bulletها هم استفاده کرد. توجه داشته باشید که لیست دارای میزان margin و padding پیشفرض نیز میباشد. برای حذف این موارد، دستورات margin:0
و padding:0
را به <ul> یا <ol> اضافه کنید:
لیست - ویژگی مختصر
ویژگی list-style
یک ویژگی مختصر است. از این ویژگی برای تنظیم تمامی ویژگیهای لیست در یک اعلان استفاده میشود:
زمان استفاده از ویژگی مختصر، ترتیب مقادیر به صورت زیر است:
list-style-type
(اگر یک list-style-image مشخص شده باشد، درصورتیکه تصویر به هر دلیلی نمایش داده نشود، مقدار این ویژگی نمایش داده خواهد شد)
list-style-position
(مشخص میکند که نشانگرهای آیتمهای لیست میبایست در داخل یا خارج جریان محتوا قرار گیرند)
list-style-image
(یک تصویر را به عنوان نشانگر آیتم لیست مشخص میکند)
اگر یکی از ویژگیهای فوق فراموش شده باشد، مقدار پیشفرض در صورت وجود جایگزین آن خواهد شد.
استایل دهی لیست با رنگها
همچنین میتوانیم لیستها را با رنگها استایل دهی کنیم، تا آنها را کمی جذابتر کنیم.
هرچیزی که به تگ <ol> یا <ul> اضافه شود، بر لیست جاری تأثیر میگذارد، در حالی که ویژگیهایی که به تگ <li> اضافه میشوند برروی آیتمهای مجزای لیست تأثیر میگذارند:
نتیجه:
مثالهای بیشتر
یک لیست شخصیسازی شده با یک کادر قرمز رنگ در سمت چپ
این مثال نحوه ساخت یک لیست با کادر قرمز رنگ در سمت چپ را نمایش میدهد.
لیست با کادر دارای عرض کامل
این مثال نحوه ساخت یک لیست کادر دار بدون bulletها را نمایش میدهد.
تمامی نشانه گرهای مختلف آیتمهای لیست
این مثال تمامی نشانگرهای متفاوت لیست در CSS را نمایش میدهد.
خود را با تمرینها امتحان کنید!
تمامی ویژگی های List در CSS
ویژگی | توضیحات |
---|---|
list-style | تمامی ویژگیها را برای یک لیست در یک اعلان تنظیم میکند |
list-style-image | یک تصویر را به عنوان نشانگر آیتمهای لیست تنظیم میکند |
list-style-position | موقعیت نشانگرهای آیتمهای لیست (نقاط bullet) را مشخص میکند |
list-style-type | نوع نشانگر آیتمهای لیست را مشخص میکند |
منابع آموزشی