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

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

آموزش CSS (فصل پنجم - جلسه 2) : فضاهای اطراف عنصر

23338 ۱۷ آذر ۹۱
1 2

در جلسه قبل شما را  با دو خصوصیت margin و border  آشنا کردیم، گفتیم که برای ایجاد فاصله بین یک عنصر و عناصر اطراف آن باید از خصوصیت margin استفاده کرد و برای ایجاد خط حاشیه دور عنصر نیز از خاصیت border استفاده می کنیم، گفتیم که با استفاده از border-width عرض خط حاشیه، border-color رنگ خط حاشیه و با استفاده از border-style طرح خط حاشیه را می توانیم تعیین کنیم.

در این جلسه با یکی از دیگر خصوصیات border که در css3 معرفی شده است آشنا می شویم و آن هم border-radius است و برای خمیده کردن حاشیه ها استفاده می شود. و نیز با خصوصیات padding و height و width شما را آشنا خواهیم کرد.

خصوصیت border-radius

قبل از آمدن css3  برای گرد کردن حاشیه های یک عنصر مجبور بودیم که خودمان عناصری مانند تصاویر را گوشه گرد کنیم یا که برای باقی عناصر از تصاویر اضافی برای انجام اینکار استفاده کنیم، اما با آمدن css3 و معرفی خصوصیت جدید border-radius این کار بسیار ساده شده می توان با یک خط کد گوشه های عناصر را به شکلی زیبا گرد کرد. این خصوصیت را میتوان برای هر چهار گوشه با یک مقدار متفاوت تعریف کرد، و برای مقدار دهی از مقدار عددی که معمولا بر حسب pxاست استفاده می کنیم، و بیشترین مقداری که میگیرد 50px است.

مثال:

 

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

کوتاه نویسی خاصیت border-radius

می توان این خاصیت را در یک خط نیز کوتاه نویسی کرد  و قاعد کلی آن به شکل زیر است.

مثال :

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

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

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

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

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

  • ‏‏

    سلام
    ممنون داداش
    بی صبرانه منتظر ادامه مطلب هستم

  • ‏‏
    میدیا رستمی(۲۳ دی ۱۳۹۱)

    واقعا عالی بود خیلی آموزش خوب وکاملیه من استفاده کردم عالی عالی

  • ‏‏

  • ‏‏

    سلام دوست عزیز.ممنون از آموزش خوبی که دادی.
    راستش من در رابطه با margin , padding خوب توجیه نشدم. کد نویسی که میکنم قالب بهم میریزه.
    اگه امکانش هست تو یه مطلب خاص مفصل توضیح بدین.مرسی

    • ‏‏
      سجاد دریس(۷ تیر ۱۳۹۲)

      سلام.
      نیاز به مطلب خاص نداره.
      border رو درنظر بگیرین، فاصله ی بین borderیک المنت با سایر المنت ها رو margin میگن، یا اگه المنتی border نداشت، فاصله بین دو المنت.
      padding هم فاصله border) border فرضی) یک المنت تا متن (سایر عناصر) درون اون.
      فکر نکنم چیز چندان سختی باشه این مطلب.

  • ‏‏

    سلام و خدا قوت
    به غیر از دستورoverflow که باعث میشه متنی که از کادر زده بیرون درست سرجاش قرار بگیره،دیگه راه دیگه ای وجود نداره؟
    مثلا یه دایو داریم که اندازه ی دقیقی داره ولی وقتی نوشته هامون بیشتر میشه ازش میزنه بیرون باید چکارش کنیم؟
    از خصوصیتoverflow هم که استفاده میکنم همون اولش حالت اسکرول به دایو میده و من اینو نمیخوام چون ممکنه متنم بیشتر نشه میخوام اگه بیشتر شد فضا هم همزمان بیشتر بشه نه از همون اول اسکرول داشته باشه.
    چکار باید بکنم؟
    ممنونم از لطفتون.

    • ‏‏
      کیوان علی محمدی(۱۰ مهر ۱۳۹۲)

      سلام شما وقتی یه طول و عرض مشخص به اون تگ دایو بدید اینجوری میشه،شما باید خاصیت overflow رو با مقدار hidden به کار ببرید،یا اینکه میتونید مثلا خاصیت width رو تعریف کنید و خاصیت height رو تعریف نکنید.

  • ‏‏

    دوست عزیز بیشترین مقدار border-radius
    50 نیست .
    من تا 500 هم امتحان کردم ، جواب داد

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram