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

- visibility ١٠ mode_comment

در جلسه قبل شما را  با دو خصوصیت 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

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

مثال :

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

comment دیدگاه کاربران
کیوان علی محمدی

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

سجاد دریس

سلام کیوان جان، لطف داری

mesmaeil

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

میدیا رستمی

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

html

yasila

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

سجاد دریس

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

mhty

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

کیوان علی محمدی

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

aligh

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

نیاز به لاگین

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