لیست‌ها

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	مقدمه
۳	شیوهٔ نوشتار
۴	انتخابگرها
۵	اضافه‌کردن CSS
۶	نظرات
۷	رنگ‌ها RGB HEX HSL
۸	پس‌زمینه‌ها رنگ پس‌زمینه‌ها تصویر پس‌زمینه تکرار پس‌زمینه پیوست در پس‌زمینه کوته‌شدهٔ پس‌زمینه
۹	کادرها عرض کادر رنگ کادر اطراف کادر کوته‌شدهٔ کادر کادر گرد شده
۱۰	حاشیه‌ها شکسته‌شدن حاشیه
۱۱	Padding
۱۲	ارتفاع/عرض
۱۳	Box Model
۱۴	Outline عرض Outline رنگ Outline کوته‌شدهٔ Outline Outline Offset
۱۵	متن رنگ متن آراستگی متن تبدیل‌کردن متن فاصله‌گذاری متن سایهٔ متن
۱۶	قلم‌ها خانواده قلم استایل قلم اندازهٔ قلم کوته‌شدهٔ قلم
۱۷	آیکن‌ها
۱۸	لینک‌ها
۱۹	لیست‌ها
۲۰	جداول
۲۱	ویژگی Display
۲۲	ویژگی Max-Width
۲۳	ویژگی Position
۲۴	ویژگی Overflow
۲۵	ویژگی Float ویژگی Clear مثال‌های Float
۲۶	مقدار Inline-block
۲۷	ترازکردن
۲۸	ترکیب کننده‌ها
۲۹	شبه کلاس
۳۰	شبه عنصر
۳۱	ویژگی Opacity
۳۲	نوار Navigation ناوبری ناوبری عمودی ناوبری افقی
۳۳	منو آبشاری
۳۴	گالری تصویر
۳۵	Image Sprites
۳۶	انتخاب‌گرهای خاصیت
۳۷	فرم‌ها
۳۸	شمارنده‌ها
۳۹	چیدمان وب‌سایت
۴۰	واحدها
۴۱	اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

ویژگی‌های List در HTML و CSS

در HTML، دو نوع اصلی لیست وجود دارد:

• لیست‌های نامرتب (<ul>) - آیتم‌های لیست با bulletها نشانه‌گذاری شده‌اند

• لیست‌های مرتب (<ol>) - آیتم‌های لیست با اعداد یا حروف نشانه‌گذاری شده‌اند

ویژگی‌های لیست در CSS به شما اجازه می‌دهد که:

• نشانه‌های متفاوت برای آیتم‌های لیست‌های مرتب تنظیم کنید

• نشانه‌های متفاوت برای آیتم‌های لیست‌های نامرتب تنظیم کنید

• عکسی را به عنوان نشانه آیتم‌های لیست تنظیم کنید

• رنگ پس زمینه به لیست‌ها و آیتم‌های لیست اضافه کنید

نشانگر‌های متفاوت آیتم‌های لیست

ویژگی list-style-typeنوع نشانه آیتم‌های لیست را مشخص می‌کند.

مثال زیر برخی از نشانه‌های آیتم در دسترس را نشان می‌دهد:

مثال

 1 ul.a {
 2   list-style-type: circle;
 3 }
 4 
 5 ul.b {
 6   list-style-type: square;
 7 }
 8 
 9 ol.c {
10   list-style-type: upper-roman;
11 }
12 
13 ol.d {
14   list-style-type: lower-alpha;
15 }

مشاهدهٔ نتیجه

نکته: برخی از مقادیر برای لیست‌های نامرتب، و برخی برای لیست‌های مرتب هستند.

استفاده از تصویر به عنوان نشانگر آیتم‌های لیست

ویژگی list-style-image یک تصویر را به عنوان آیتم‌های لیست مشخص می‌کند:

مثال

ul {
  list-style-image: url('sqpurple.gif');
}

مشاهدهٔ نتیجه

موقعیت نشانه آیتم‌های لیست

ویژگی list-style-position مشخص کننده موقعیت نشانگرهای آیتم‌های لیست (نقاط bullet) است.

"list-style-position: outside;" به معنای این است که نقاط bullet بیرون از آیتم‌های لیست خواهند بود. نقطه شروع هر خط در آیتم لیست به صورت عمودی تراز خواهد شد. این امر، به صورت پیش‌فرض است:

"list-style-position: inside;" به معنای این است که نقاط bullet درون آیتم‌های لیست خواهند بود. همانند بخشی از آیتم لیست، به عنوان بخشی از متن خواهد بود و متن را در آغاز push می‌کند:

مثال

1 ul.a {
2   list-style-position: outside;
3 }
4 
5 ul.b {
6   list-style-position: inside;
7 }

مشاهدهٔ نتیجه

حذف تنظیمات پیش فرض

از ویژگی list-style-type:none می‌توان برای حذف نشانه/ bulletها هم استفاده کرد. توجه داشته باشید که لیست دارای میزان margin و padding پیش‌فرض نیز می‌باشد. برای حذف این موارد، دستورات margin:0 و padding:0 را به <ul> یا <ol> اضافه کنید:

مثال

1 ul {
2   list-style-type: none;
3   margin: 0;
4   padding: 0;
5 }

مشاهدهٔ نتیجه

لیست - ویژگی مختصر

ویژگی 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> اضافه می‌شوند برروی آیتم‌های مجزای لیست تأثیر می‌گذارند:

مثال

 1 ol {
 2   background: #ff9999;
 3   padding: 20px;
 4 }
 5 
 6 ul {
 7   background: #3399ff;
 8   padding: 20px;
 9 }
10 
11 ol li {
12   background: #ffe5e5;
13   padding: 5px;
14   margin-left: 35px;
15 }
16 
17 ul li {
18   background: #cce5ff;
19   margin: 5px;
20 }

نتیجه:

مشاهدهٔ نتیجه

مثال‌های بیشتر

یک لیست شخصی‌سازی شده با یک کادر قرمز رنگ در سمت چپ

این مثال نحوه ساخت یک لیست با کادر قرمز رنگ در سمت چپ را نمایش می‌دهد.

لیست با کادر دارای عرض کامل

این مثال نحوه ساخت یک لیست کادر دار بدون bulletها را نمایش می‌دهد.

تمامی نشانه گرهای مختلف آیتم‌های لیست

این مثال تمامی نشانگرهای متفاوت لیست در CSS را نمایش می‌دهد.

تمامی ویژگی های List در CSS

ویژگی	توضیحات
list-style	تمامی ویژگی‌ها را برای یک لیست در یک اعلان تنظیم می‌کند
list-style-image	یک تصویر را به عنوان نشانگر آیتم‌های لیست تنظیم می‌کند
list-style-position	موقعیت نشانگرهای آیتم‌های لیست (نقاط bullet) را مشخص می‌کند
list-style-type	نوع نشانگر آیتم‌های لیست را مشخص می‌کند

صفحهٔ بعد»

«صفحهٔ قبل