در این جلسه با ادامه موضوع استایل دهی به لیستها با استفاده از CSS در خدمتتون هستیم.
ویژگی list-style-position:
این ویژگی موقعیت نشانه یا اعداد لیست رو مشخص میکنه و میتونه 2 مقدار زیر رو قبول کنه:
- inside : زمانی که از این حالت استفاده می‌کنید، نشانه مربوط به لیست، جزئی از لیست محسوب میشه و درون متن قرار میگیره و زمانی که لیست مورد نظر چند خطی میشه، به خوبی خودش رو نشون میده. برای اینکار بصورت زیر عمل میکنیم:
ul { list-style-position: inside; }کدهای HTML زیر رو هم استفاده میکنیم و مقداری متن رو بیشتر قرار میدیم که آیتمها چند خطی بشن. بصورت زیر:
<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>
- outside : این مورد مقدار پیش فرض هست و لیستها در ابتدا به این صورت نمایش داده میشن و نشانه یا Bullet خارج از لیست قرار دارن و مستقل عمل میکنن.
خروجی دو حالت بالا بصورت زیر هست:
همونطور که میبینید حالت 2، همون حالت outside یا پیش فرض هست. در حالت 1، نشانه یا Bulletها وارد متن شدن و اگر خط اول رو با بقیه خطوط مقایسه کنید، میبینید که یک Indent یا تورفتگی وجود داره.
ویژگی list-style-image:
شما میتونین بجای قرار دادن دایره یا مربع برای bullet لیستهای ul، از آیکونها و تصاویری که مدنظرتون هست نیز استفاده کنید. برای اینکار بصورت زیر عمل میکنیم:
ul {
list-style-image: url('ng.png');
}
با اینکار، لیستهای ما بصورت زیر در خواهند آمد و تصویر مورد نظر، بجای bullet نمایش داده میشه:
ویژگی padding:
شما میتونین با استفاده از padding، فاصله bulletها از متن رو تنظیم کنید و همچنین فاصله عمودی بین آیتمهای لیست رو مشخص کنید. برای زیاد کردن فاصله بین متن و Bullet میتونین بصورت زیر عمل کنید:
<ul>
<li style="padding-left: 20px">With padding</li>
<li>Without padding</li>
</ul>
خروجی بصورت زیر هست:
میبینید که آیتم اول، 20 پیکسل بیشتر از مورد دوم، از bullet فاصله گرفته است. حالت بالا، حالت outside هست. اگر حالت رو برابر با inside قرار بدین، خروجی بصورت زیر میشه:
همچنین میتونین با روش زیر، فاصله بین آیتمها رو زیاد کنید:
ul > li {
list-style-image: url('ng.png');
padding-bottom: 20px;
}
خروجی بصورت زیر میشه:
به همین راحتی.
در جلسات بعد با ادامه آموزش در خدمتتون هستیم.
امیدوارم از این مطلب خوشتون اومده باشه.
موفق باشید
یا علی
اولین دیدگاه این پست رو تو بنویس !