illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

آموزش CSS (فصل هفتم) : کار با لیست ها

19824 ۲۴ آذر ۹۱

لیست ها در CSS

لیست ها عناصری با کاربرد های بسیار متنوع هستند. از جمله برای بخش navigation سایت و برای ایجاد کنترل های tab استفاده می شوند. Navigation معمولا شامل لیستی از لینک ها است، که دارای ویژگی های بصری می باشد و ثابت و خشک نیست، ما در این فصل به طریقه استایل دادن و معرفی خصوصیت هایی که برای کار با لیست ها در CSS استفاده میشود می پردازیم.

خاصیت list-style-type

با استفاده از این خاصیت می توان برای لیست های مرتب و نامرتب bullet تعریف کرد. و یکی از 14 مقدار زیر را می پذیرد.

مقدار پیشفرض برای لیست های نا مرتب (ul) : مقدار disc

مقدار پیشفرض برای لیست های مرتب (ol) : مقدار decimal

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

Bullet های مخصوص لیست های نامرتب (ul) عبارتنداز : square ،  circle و disc و none و بقیه bullet های مربوط به لیت های مرتب (ol) می باشد.

مثال:

کد HTML :

و کد CSS :

نتیجه در مرورگر:

خاصیت list style image

این خاصیت یک عکس را برای استفاده به عنوان نشانه bullet در کنار عنصر لیست تعریف می کند. این عکس با نشانه ی تعریف شده در خاصیت list-style-type جایگزین می شود.

مثال :

list-style-position

این خاصیت موقعیت و نحوه ی قرار گرفتن bullet در کنار آیتم های لیست را مشخص می کند. و یکی از دو مقدار زیر را می گیرد :

  • Inside : مشخص می کند که bullet لیست باید در داخل آیتم های لیست قرار گیرد.
  • Outside : مشخص که bullet لیست باید در خارج از آیتم های لیست قرار گیرد.

مثال :

می بینید که bullet زیر مجموعه ی گزینه ی HTML که به آن مقدار inside داده ایم در کنار داخل کادر قرار گرفته، اما bullet زیر مجموعه CSS که مقدار outside دارد، خارج از کادر قرار گرفته است.

کوتاه نویسی خاصیت list style

برای کوتاه نویسی خاصیت list-style از قاعده زیر استفاده می شود.

مثال :

بسیار خب، تا اینجا به خصوصیات مربوط به استایل دهی به list ها آشنا شدیم، در جلسه بعد به positioning یا همان موقعیت عناصر در صفحه می پردازیم.

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 8 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏
    کیوان علی محمدی(۲۴ آذر ۱۳۹۱)

    سلام سجاد عزیز،آقا ممنون،خیلی خوب بود.

  • ‏‏
    سوران(۲۴ آذر ۱۳۹۱)

    ممنون یادآوری خوبی بود

  • ‏‏

    سلام خیلی ممنون از سایت خوبتون اگه میشه این چیزی که من می خوام یاد بدید حالا چطور میشه با چه تگی میشه به صورت لیست کرد

  • ‏‏
    technolife(۳ اسفند ۱۳۹۱)

    سلام
    فایل های دانلود مقاله به صورت PDF درست نیستن
    لطفا اون ها رو درست کنید
    باتشکر

  • ‏‏

    الان این list-style-position دقیقا چی کار میکنه؟؟ چه فایده ای داره؟؟

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram