فضاهای اطراف عنصر 2

 

در آموزش پست قبل از سری آموزش های css شما را  با دو خصوصیت 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 است.

مثال:

1 <img src="images/img1.png" />

 

1 Img {
2 Border-top-left-radius: 50px;
3 Border-bottom-left-radius: 40px;
4 Border-top-right-radius: 30px;
5 Border-bottom-right-radius: 0px;
6 }

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

border radius <a  style=آموزش CSS (فصل پنجم جلسه 2) : فضاهای اطراف عنصر" title="border-radius" width="446" height="279" />

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

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

1 border-radius: top-left top-right bottom-right bottom-left;

مثال :

1 Img {Border-radius: 50px 5px 50px 5px; }

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

border radius 2 <a  style=آموزش CSS (فصل پنجم جلسه 2) : فضاهای اطراف عنصر" title="border-radius-2" width="446" height="279" />

 

خصوصیت padding

خصوصیت padding مقدار فضای خالی بین محتوای یک عنصر و border آن عنصر را تعیین می کند. یکی از دو مقدار عددی یا درصدی را می پذیرد. (قواعد مقدار دهی آن همانند قواعد خصوصیت margin است ).

تفاوت های بین margin و padding

  1. Padding فضای خالی بین محتوا و border یک عنصر می باشد اما margin فضای خالی بین border و عناصر دیگر می باشد.
  2. کلمه کلیدی auto هیچ تاثیری روی خاصیت padding ندارد.
  3. خاصیت margin می تواند مقادیر منفی بگیرد اما خاصیت padding نمی تواند.
  4. در خاصیت padding تداخل و فروپاشی اتفاق نمی افتد، فقط در margin این اتفاق می افتد.

کوتاه نویسی خاصیت padding

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

1 Padding: top right bottom left;

مثال :

1 P {
2 Padding: 3px 5px 2px 7px;
3 }

دستور بالا padding-top را برابر 3پیکسل ، padding-right را برابر 5 پیکسل، padding-bottom را برابر 2 پیکسل و padding-left را برابر 7 پیکسل تعریف می کند.

خصوصیت width

خاصیت width عرض محتوای یک عنصر را تعیین می کند. در نهایت عرض کلی یک عنصر برابر با عرض متحتوا (تعیین شده توسط width ) بعلاوه ی عرض padding و عرض border آن عنصر می باشد. این خصوصیت را می توان با یکی از سه مقدار عددی، درصدی یا auto مقداردهی کرد. و مقدار پیشفرض آن auto  می باشد. مقادیر منفی نیز برای این خصوصیت مجاز نمی باشد.

از خاصیت width می توان برای تخصیص یک مقدار کلی برای برخی عناصر input مثل دکمه های reset و submit استفاده کرد.

مثال :

1 Input.button {
2 Width: 10em;
3 }

دستور فوق عرض تمامی عناصر input با کلاس button را 10em در نظر می گیرد.

خصوصیت height

در کنار خصوصیت width خاصیت height وجود دارد که ارتفاع محتوای یک عنصر را مشخص می کند. البته استفاده از خاصیت height برای عناصر چندان متداول نیست و بیشتر همان مقدار پیشفرض یعنی auto را برای آن در نظر گرفته می شود و صفحات وب معمولا با scrool عمودی طراحی می شوند. این خصیوصیت نیز مانند width یکی از سه مقدار عددی، درصدی و یا auto را به عنوان  مقدار می پذیرد.

همانند خاصیت width از خاصیت height می توان برای مشخص کردن ابعاد یک تصویر استفاده کرد.

مثال :

1 Img.footer {
2 Width: 440px;
3 Height: 130px;
4 }

ابعاد min و max برای width و height

طراحی با عرض متغییر هنگامی استفاده می شود که میخواهید محتویات را برای مطابقت با resolution های مختلف صفحه نمایش طراحی کنید. همچنین هنگامی مفید می باشد که میخواهید عرض عنصر منبسط یا منقبض نشود.

وقتی که شما صفحه ای را اصولا برای نمایش در رزولوشن 800*600 یا 1024*768 طراحی می کنید، اگر کاربری سایت شما را با رزولوشن 1600*1200 مشاهده کند، صفحه را به شکلی نه چندان زیبا خواهد دید، یا هنگام استفاده از کلمه کلیدی auto یا مقادیر درصدی ممکن است مشاهده با رزولوشن های مختلف نتایج متفاوتی داشته باشد. در این مواقع استفاده از مقادیر min و max برای width و height می تواند مانع از تغییر ظاهر صفحه در رزولوشن های مختلف شود.

خصوصیت min

خاصیت min یکی از دو مقدار عددی یا درصدی را می پذیرد. و مقدار پیش فرض آن 0 است، این خصوصیت در ie6 و قبل از آن پشتیبانی نمی شود.

خصیوصیت min-width و mn-height محدودیت کوچکترین اندازه را برای یک عنصر مشخص می کنند، و از منقبض شدن عرض یا ارتفاع یک عنصر هنگام تغییر سایز پنجره مرورگر یا رزولوشن جلوگیری می کند.

مثال :

1 Body {
2 Min-width: 1024px;
3 }

 

min width <a  style=آموزش CSS (فصل پنجم جلسه 2) : فضاهای اطراف عنصر" title="min-width" width="586" height="318" />

در مثال بالا تعریف min-wdith:1024px; برای عنصر body مانع از منقبض شدن محتوای صفحه شده و صفحه scroll افقی پیدا می کند.

خصوصیت max

خصوصیت max  محدودیت بالاتر و حداکثر اندازه را برای یک عنصر مشخص می کند و هنگامی تعریف می شوند که ابعاد یک عنصر ممکن است افزایش یابند که با استفاده از این خصوصیات می توان مانع از منبسط شد و افزایش ابعاد عناصر شد. این خصوصیت یکی از سه مقدار عددی، درصدی یا auto  را می پذیرد.

مثال :

1 Body {
2 Max-width: 1440;
3 Max-height: auto;
4 }

 

 

 

خصوصیت overflow

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

و یکی از 4  مقدار زیر را می پذیرد:

  • Visible : مقدار پیشفرض و باعث نمایش محتوای سرریز شده می شود.
  • Hidden : محتوای سرریز شده پنهان می شود.
  • Scroll : محتوای سرریز شده را پنهان می کند و  قابلیت اسکرول شدن برای دیدن محتوای سرریز شده را فعال می کند
  • Auto :  اگر کم بودن عرض عنصر باعث سر ریز شدن باشد، اسکرول افقی و اگر کم بودن ارتفاع عنصر باعث سرریز شدن باشد اسکرول عمودی را برای عنصر فعال می کند.

مثال :

1 <div>
2 <h3> 7Learn: Javascript and Web Design Tutorials </h3>
3 <h3> 7Learn: Javascript and Web Design Tutorials </h3>
4 <h3> 7Learn: Javascript and Web Design Tutorials </h3>
5 <h3> 7Learn: Javascript and Web Design Tutorials </h3>
6 <h3> 7Learn: Javascript and Web Design Tutorials </h3>
7 </div>

 

1 div {
2 border: 1px solid #000;
3 width: 400px;
4 height: 140px;
5 overflow: auto;
6 }

 

overflow <a  style=آموزش CSS (فصل پنجم جلسه 2) : فضاهای اطراف عنصر" title="overflow" width="452" height="281" />

overflow-x و overflow-y

این خصوصیات مشابه overflow می باشند و اجازه ی کنترل overflow را با scrollbar افقی یا عمودی به طور جداگانه در اختیار می گذارند.

بسیار خب تا به اینجا با همه ی فضاهای اطراف یک عنصر و خاصیت overflow نیز آشنا شدیم در فصل بعدی با خاصیت float یا شناور ساختن عناصر و خاصیت clear، و تراز افقی شما را آشنا خواهیم کرد.

ارسال نظر