در این جلسه با ادامه موضوع استایل دهی به لیستها با استفاده از CSS در خدمتتون هستیم.
ویژگی list-style-position:
این ویژگی موقعیت نشانه یا اعداد لیست رو مشخص میکنه و میتونه 2 مقدار زیر رو قبول کنه:
|
1 2 3 |
ul { list-style-position: inside; } |
|
1 2 3 4 5 6 |
<ul> <li>This text uses the value inside which is especially visible when the text for a list item spans more than one line. This text uses the value inside which is especially visible when the text for a list item spans more than one line</li> <li>This text uses the value inside which is especially visible when the text for a list item spans more than one line. This text uses the value inside which is especially visible when the text for a list item spans more than one line</li> <li>This text uses the value inside which is especially visible when the text for a list item spans more than one line. This text uses the value inside which is especially visible when the text for a list item spans more than one line</li> <li>This text uses the value inside which is especially visible when the text for a list item spans more than one line. This text uses the value inside which is especially visible when the text for a list item spans more than one line</li> </ul> |
خروجی دو حالت بالا بصورت زیر هست:
همونطور که میبینید حالت 2، همون حالت outside یا پیش فرض هست. در حالت 1، نشانه یا Bullet ها وارد متن شدن و اگر خط اول رو با بقیه خطوط مقایسه کنید، میبینید که یک Indent یا تورفتگی وجود داره.
ویژگی list-style-image:
شما میتونین بجای قرار دادن دایره یا مربع برای bullet لیستهای ul، از آیکونها و تصاویری که مدنظرتون هست نیز استفاده کنید. برای اینکار بصورت زیر عمل میکنیم:
|
1 2 3 |
ul { list-style-image: url('ng.png'); } |
با اینکار، لیستهای ما بصورت زیر در خواهند آمد و تصویر مورد نظر، بجای bullet نمایش داده میشه:
ویژگی padding:
شما میتونین با استفاده از padding، فاصله bullet ها از متن رو تنظیم کنید و همچنین فاصله عمودی بین آیتمهای لیست رو مشخص کنید. برای زیاد کردن فاصله بین متن و Bullet میتونین بصورت زیر عمل کنید:
|
1 2 3 4 |
<ul> <li style="padding-left: 20px">With padding</li> <li>Without padding</li> </ul> |
خروجی بصورت زیر هست:
میبینید که آیتم اول، 20 پیکسل بیشتر از مورد دوم، از bullet فاصله گرفته است. حالت بالا، حالت outside هست. اگر حالت رو برابر با inside قرار بدین، خروجی بصورت زیر میشه:
همچنین میتونین با روش زیر، فاصله بین آیتمها رو زیاد کنید:
|
1 2 3 4 |
ul > li { list-style-image: url('ng.png'); padding-bottom: 20px; } |
خروجی بصورت زیر میشه:
به همین راحتی.
در جلسات بعد با ادامه آموزش در خدمتتون هستیم.
امیدوارم از این مطلب خوشتون اومده باشه.
موفق باشید
یا علی
