در جلسه قبل طراحی سایت شما را با دو خصوصیت margin و border آشنا کردیم،
گفتیم که برای ایجاد فاصله بین یک عنصر وعناصر اطراف آن باید از خصوصیت margin استفاده کرد و برای ایجاد خط حاشیه دور عنصر نیز از خاصیت border
استفاده می کنیم، گفتیم که با استفاده از width-border عرض خط حاشیه، color-border رنگ خط حاشیه و با
استفاده از style-border طرح خط حاشیه را می توانیم تعیین کنیم.
در این جلسه با یکی از دیگر خصوصیات border که در css3 معرفی شده است آشنا می شویم و آن ھم radius-border
است و برای خمیده کردن حاشیه ھا استفاده می شود. و نیز با خصوصیات padding و height و width شما را آشنا
خواھیم کرد.
خصوصیت radius-border
طراحی سایت قبل از آمدن css3 برای گرد کردن حاشیه ھای یک عنصر مجبور بودیم که خودمان عناصری مانند تصاویر را گوشه گر
کنیم یا که برای باقی عناصر از تصاویر اضافی برای انجام اینکار استفاده کنیم، اما با آمدن css3 و معرفی خصوصیت
جدید radius-border این کار بسیار ساده شده می توان با یک خط کد گوشه ھای عناصر را به شکلی زیبا گرد کرد. این
خصوصیت را میتوان برای ھر چھار گوشه با یک مقدار متفاوت تعریف کرد، و برای مقدار دھی از مقدار عددی که معمولا
بر حسب pxاست استفاده می کنیم، و بیشترین مقداری که میگیرد ۵۰px است.
مثال:
<img src="images/img1. png" />
Img {
Border-top-left-radius: 50px;
Border-bottom-left-radius: 40px;
Border-top-right-radius: 30px;
Border-bottom-right-radius: 0px;
}کوتاه نویسی خاصیت radius-border
می توان این خاصیت را در یک خط نیز کوتاه نویسی کرد و قاعد کلی آن به شکل زیر است.
border-radius: top-left top-right bottom-right bottom-left;
خصوصیت padding
خصوصیت padding مقدار فضای خالی بین محتوای یک عنصر و border آن عنصر را تعیین می کند. یکی از دو مقدار
عددی یا درصدی را می پذیرد. (قواعد مقدار دھی آن ھمانند قواعد خصوصیت margin است ).
تفاوت های بین margin و padding
۱ . Padding فضای خالی بین محتوا و border یک عنصر می باشد اما margin فضای خالی بین border و عناصر
دیگر می باشد.
۲ . کلمه کلیدی auto ھیچ تاثیری روی خاصیت padding ندارد.
۳ . خاصیت margin می تواند مقادیر منفی بگیرد اما خاصیت padding نمی تواند.
۴ . در خاصیت padding تداخل و فروپاشی اتفاق نمی افتد، فقط در margin این اتفاق می افتد.
کوتاه نویسی خاصیت padding
ھمانطور که گفتیم قوعد مقداردھی به خصوصیت padding ھمانند خصوصیت marginاست است: و قاعده کلی کوتاه
نویسی آن ھا نیز شبیه به ھم است:
Padding: top right bottom left;
مثال :
P {
Padding: 3px 5px 2px 7px;
}دستور بالا top-padding را برابر ۳پیکسل ، right-padding را برابر ۵ پیکسل، bottom-padding را برابر ۲ پیکسل و
left-padding را برابر ۷ پیکسل تعریف می کند.
طراحی سایت اسپیناس همیشه سعی در استفاده از به روز ترین تکتینک ها و ابزارها در طراحی سایت دارد در اسپیناس از تکنولوژی ها روز دنیا مانند CSS3 , HTML5 , Jquery , JAVASCRIPT در طراحی وب سایت استفاده می شود و همچنین زبانهایی مانند PHP , ASP در شرکت اسپیناس مشتری مداری حرف اول را می زند
