لیست‌ها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی 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 نوع نشانگر آیتم‌های لیست را مشخص می‌کند


منابع آموزشی