آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 37) : استایل دهی به لیستها - قسمت 2

- visibility ۰ mode_comment

css3 attributes

در این جلسه با ادامه موضوع استایل دهی به لیستها با استفاده از CSS در خدمتتون هستیم.

ویژگی list-style-position:

این ویژگی موقعیت نشانه یا اعداد لیست رو مشخص میکنه و میتونه 2 مقدار زیر رو قبول کنه:

  • inside : زمانی که از این حالت استفاده می کنید، نشانه مربوط به لیست، جزئی از لیست محسوب میشه و درون متن قرار میگیره و زمانی که لیست مورد نظر چند خطی میشه، به خوبی خودش رو نشون میده. برای اینکار بصورت زیر عمل میکنیم: کدهای HTML زیر رو هم استفاده میکنیم و مقداری متن رو بیشتر قرار میدیم که آیتمها چند خطی بشن. بصورت زیر:
  • outside : این مورد مقدار پیش فرض هست و لیستها در ابتدا به این صورت نمایش داده میشن و نشانه یا Bullet خارج از لیست قرار دارن و مستقل عمل میکنن.

خروجی دو حالت بالا بصورت زیر هست:

همونطور که میبینید حالت 2، همون حالت outside یا پیش فرض هست. در حالت 1، نشانه یا Bullet ها وارد متن شدن و اگر خط اول رو با بقیه خطوط مقایسه کنید، میبینید که یک Indent یا تورفتگی وجود داره.

ویژگی list-style-image:

شما میتونین بجای قرار دادن دایره یا مربع برای bullet لیستهای ul، از آیکونها و تصاویری که مدنظرتون هست نیز استفاده کنید. برای اینکار بصورت زیر عمل میکنیم:

با اینکار، لیستهای ما بصورت زیر در خواهند آمد و تصویر مورد نظر، بجای bullet نمایش داده میشه:

ویژگی padding:

شما میتونین با استفاده از padding، فاصله bullet ها از متن رو تنظیم کنید و همچنین فاصله عمودی بین آیتمهای لیست رو مشخص کنید. برای زیاد کردن فاصله بین متن و Bullet میتونین بصورت زیر عمل کنید:

خروجی بصورت زیر هست:

میبینید که آیتم اول، 20 پیکسل بیشتر از مورد دوم، از bullet فاصله گرفته است. حالت بالا، حالت outside هست. اگر حالت رو برابر با inside قرار بدین، خروجی بصورت زیر میشه:

همچنین میتونین با روش زیر، فاصله بین آیتمها رو زیاد کنید:

خروجی بصورت زیر میشه:

به همین راحتی.

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.