آموزش کامل CSS – قسمت یازدهم: موقعیت المان ها

توسط با بدون دیدگاه آموزش کامل CSS

در این قسمت از آموزش css با امکان جابجا کردن المان ها در صفحات وب به وسیله css آشنا می شویم. این کار را به کمک دستور position انجام می دهیم.

دستور position

همان طوری که از نام آن پیداست این دستور موقعیت المان ها را مشخص می کند. دستور position چهار حالت مختلف دارد.

اولین حالت، موقعیت static است که در واقع همان حالت پیش فرض این دستور است و تاثیری در موقعیت المان ندارد.

حالت دوم relative است. در این حالت 4 مقدار right , left , top و bottom را می توانیم برای آن مشخص کنیم.

html code:

<div class=”default”>متن المان اول</div>
<div class=”relative”>متن المان دوم</div>

css code:

.default {

position: static;

} .relative {

position: relative;

top: -20px;

left: 20px;

background-color: white;

width: 500px;

}

همان طور که در مثال فوق مشاهده می کنید ما به div اول موقعیت پیش فرض داده ایم.

معنی عدد منفی در موقعیت

در حالت عادی زمانی که شما مثلا ۲۰ پیکسل را بروی فاصله از بالا بنویسید، سی‌اس‌اس‌ از بالاترین نقطه، ۲۰ پیکسل پایین می‌آید تا بین بالاترین سطح و المان شما ۲۰ پیکسل فاصله باشد. اما زمانی که شما به جای ۲۰ عدد ۲۰- را بنویسید، سی اس اس المان شما را در جهت خلاف بالا می‌برد؛ یعنی به جای حرکت به سمت پایین به اندازه‌ی ۲۰ پیکسل به بالا حرکت می‌کند.

حالت های سوم و چهارم را در جلسه بعدی خواهیم گفت.

آموزش کامل CSS – قسمت نهم: فاصله های داخلی

توسط با بدون دیدگاه آموزش کامل CSS

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

خاصیت padding در css

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

این فاصله می تواند از هر 4 جهت راست، چپ، بالا و پایین اعمال شود. در مقابل padding فاصله مورد نظر را برحسب پیکسل می نویسیم. نمونه نوشتن پدینگ به این صورت می باشد ;padding:10px

در نوشتن padding چند حالت پیش می آید:

حالت اول:

در واقع همان حالتی است که در نمونه فوق نوشتیم. در این حالت فاصله به اندازه مساوی از هر 4 جهت اعمال می شود. مثلا فاصله از داخل المان از هر 4 جهت 10 پیکسل است. در مثال زیر ما به المان box که دور تا دور پاراگراف قرار گرفته فاصله 10 پیکسلی داده ایم.

// -- html code: --

<div class="box"> 

<p  class=" element">متن</p>

</div>

// -- css code: --

p.element {

color: red;

}

div.box {

padding: 10px;

background-color: orange;

}

حالت دوم:

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

p.element {

color: red;

}

div.box {

padding-top: 20px;

padding-right: 30px;

padding-bottom: 20px;

padding-left: 10px;

background-color: orange;

}

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

حالت سوم:

شاید نوشتن هر 4 دستور برای برنامه های بزرگتر کاری خسته کننده باشد. بنابراین می توانید به صورت خلاصه تر هر 4 جهت فاصله را در یک خط بنویسید. در این حالت فاصله ها به ترتیب و از سمت چپ به راست بدین صورت می باشند: بالا ، راست ، پایین ، چپ.

p {
    padding: 25px 50px 20px 50px;
}

در این حالت اگر هر کدام از اعداد را ننویسید صفر در نظر گرفته می شود.