استایل دهی به لیست در CSS بسیار ساده است و صفات مختلفی برای فرمت دهی به لیست ها وجود دارد، در این مقاله قصد داریم شما را با صفات فرمت دهی به لیست در CSS آشنا کنیم، همراه داتیس نتورک باشید.
استایل دهی به لیست در CSS
در کل در HTML دو نوع لیست اصلی وجود دارد.
لیست های اصلی:
- لیست های غیر ترتیبی (ul) – آیتم های لیست در این نوع لیست ها با بولت ها نشانه گذاری میشوند.
- لیست های ترتیبی (<ol>) – آیتم های لیست ها با اعداد و حروف نشانه گذاری میشوند.
صفات و ویژگی های سی اس اس برای لیست ها به ما اجازه و دسترسی هایی می دهد که:
- از نشان گذار های مختلفی برای آیتم های لیست ترتیبی خود استفاده کنیم.
- از نشان گذار های مختلفی برای آیتم های لیست غیر ترتیبی خود استفاده کنیم.
- از تصاویر به عنوان نشان گذار آیتم های لیست استفاده کنیم.
- برای لیست خود و آیتم های آن عکس پس زمینه مشخص کنیم.
استفاده از نشان گذار های مختلف برای آیتم های لیست
با استفاده از صفت 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');
}
استایل دهی به عناصر li و ul
حال زمان این می رسد که یک سری استایل و ظاهر های مهم را به ul و li اختصاص بدیم که یکی از مهم ترین نیاز های منو (Menu) است.
اولین استایل، اختصاص دادن یک رنگ پیش زمینه به منو (Menu) مورد نظر و یک رنگ و فونت مناسب به نوشته ها است که موجب شود از بقیه صفحه متفاوت تر به نظر برسد.
مثال:
ul{
list-style-type: none;
background-color: #141414;
}
li{
color:#00b318;
font-family: iransansweb;
}
