لیست UL و LI در سی اس اس
در این بخش از آموزش css ، تنظیم لیست ها را آموزش میدهیم.
ویژگی هایی که برای یک لیست در css وجود دارد به ما این امکان را میدهد که List را در 3 حالت زیر نمایش دهیم.
- تنظیم لیست یه صورت مرتب
- تنظیم لیست به صورت نامرتب
- تنظیم تصویر برای نشانگر لیست
در HTML دو نوع ار انواع لیست وجود دارد
- unordered lists آیتم های لیست با یک نشانگرد گرد شکل مشکی ، نمایش داده میشوند
- ordered lists آیتم های لیست با اعداد یا حروف ، نشانه گذاری میشوند.
Css این انعطاف پپذیری را به شما میدهد که نشانگر آیتم های لیست خود را به یک تصویر مدل دهید،که برای زیبایی طراحی سایت شما موثر میباشد.
با ویژگی list-style-type شما میتوانید marker لیست خود را به شکل مورد نظر خود تغییر دهید، این ویژگی شامل مقادیر زیر میباشد.
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');
}
این ویژگی ممکن است در تمام مرورگرها پشتیبانی نشود . در مثال زیر راه حل قطعی برای پشتیبانی تمام مرورگرها را میبینید.
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
برای اینکه تمام این ویژگی ها را در یک خط اعمال کنید از مثال زیر میتوانید استفاده کنید ، که به ترتیب 1 list-style-image -3 list-style-position -2 list-style-type مقداردهی میشوند.
ul
{
list-style: square url("sqpurple.gif");
}