فرمت دهی لیست ها در 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:0 و margin:0 را به <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;
}
خودتان امتحان کنید
منتشر شده در ۷ شهریور ۱۳۹۶ حمید رضا ملکی ۸۸۳ بازدید
دیدگاه ها

هنوز دیدگاهی ثبت نشده