سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش لیست 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 را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام و یا در تی جوان اینستاگرام دنبال کنید.
