میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

لیست List در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش لیست List در CSS با من همراه باشید.

در 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;
}

 

بعضی مقادیر در مثال بالا برای لیست های ترتیبی و بعضی برای لیست های غیر ترتیبی هستند.


استفاده از تصویر به عنوان نشان گذار

از صفت list-style-image برای مشخص کردن تصویر نشان گذار در لیست استفاده می شود :

 

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


مکان نشان گذار ها در لیست

از صفت list-style-position برای مشخص کردن اینکه آیا نشانگذار ها باید در داخل لیست قرار بگیرند و یا خارج از آن، استفاده می شود.

 

ul {
    list-style-position: inside;
}


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

صفت list-style-type:none می تواند برای حذف نشان گذار ها و بولت ها استفاده شود. دقت داشته باشد که لیست همچنان دارای مقدار پیشفرض برای margin و padding است. برای حذف آن مقادیر margin:۰ و margin:۰ را به <ul> یا <ol> اضافه کنید :

 

 

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}


صفت list-style (صفت کوتاه شده)

صفت list-style یک صفت کوتاه شده است. با استفاده از آن می توان تمام صفات لیست را در یک اعلان تنظیم کرد :

 

ul {
    list-style: square inside url("sqpurple.gif");
}

وقتی از صفت کوتاه شده استفاده می کنید، ترتیب مقادیر صفات به شکل زیر است :

  • list-style-type
  • list-style-position
  • list-style-image

اگر هرکدام از صفات بالا در اعلان نباشند، مقدار پیشفرض آنها جایگزین خواهد شد.

 


استایل دهی لیست با رنگ ها

برای زیبا کردن لیست ها  میتوان آنها را با رنگ های مختلف استایل دهی کرد.

هر چیزی که به تگ های <ol> یا <ul> اضافه می شود، بر روی تمامی لیست اثر می گذارد. در حالی که صفاتی که به تگ های <li> اعمال می شوند فقط بر خود آن آیتم اثر می گذارند.

 

ol {
    background: #ff9999;
    padding: 20px;
}

ul {
    background: #3399ff;
    padding: 20px;
}

ol li {
    background: #ffe5e5;
    padding: 5px;
    margin-left: 35px;
}

ul li {
    background: #cce5ff;
    margin: 5px;
}

 


امیدواریم آموزش لیست List در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.
csslist csslist css stylew3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش لیست ها در cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfایجاد لیست در cssدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساخت لیست در cssساختار دستورات CSSسی اس اسفارسی w3schoolsکتاب آموزش css فارسیکد لیست در cssلیست List در CSSلیست استایل در cssلیست توابع cssلیست دستورات cssلیست کدهای cssلیست کشویی در cssلیست ها در css
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟