جلسه نهم: معرفی خاصیت های پرکاربرد CSS – قسمت دوم

سلام دوستان! به قسمت دوم معرفی خاصیت های کاربردی CSS خوش آمدید. در جلسه قبلی با CSS reset و همچنین خاصیت های color ، background ، margin و padding آشنا شدید.

در این جلسه به ادامه ی خاصیت های پرکاربرد CSS می پردازیم. پس بزن بریم!

خاصیت width :

با استفاده از این خاصیت می توانیم برای المان مورد نظرمان عرض یا همان پهنا تعریف کنیم. مقدار عرض را می توانیم هم به صورت % درصد بدهیم و هم px پیکسل.

خاصیت height :

با استفاده از این خاصیت می توانیم برای المان مورد نظرمان طول یا همان ارتفاع تعریف کنیم. مقدار طول را می توانیم هم به صورت % درصد بدهیم و هم px پیکسل.

فرق بین واحد پیکسل px با واحد درصد % :

اگر همانند تصویر بالا ، برای المان مورد نظرمان از واحد پیکسل استفاده کنیم ، با کم شدن اندازه پنجره مرورگر تغییری در عرض و ارتفاع المان مورد نظرمان ایجاد نمیشود و به همان صورت خواهد ماند.

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

نکته : بیشتر در طراحی رسپانسیو یا همان واکنش گرا از واحد درصد استفاده میشود.

خاصیت display :

یادتان است که در قسمت معرفی تگ ها ، می گفتیم : فلان تگ از نوع block است و فلان تک از نوع inline؟ حالا رسیدیم به توضیح مفهومش. با خاصیت display می توانیم حالت نمایش پیشفرض المان ها را به آن چیزی که خودمان دوست داریم تغییر بدهیم. display چند مقدار می گیرد که به صورت کامل برایتان توضیح می دهم :

1.  inline
2.  block
3.  inline-block
4.  none

1- inline :

المان های inline فقط به اندازه ی خودشان عرض و ارتفاع می گیرند. inline ها گسترش پیدا نمی کنند مگر آن ها را تغییر بدهیم و از نوع block کنیم.

نکته : اگر چند تگ inline داشته باشیم ، به صورت کنار هم نمایش داده میشوند.

2- block :

المان های بلاک کل عرض مرورگر را اشغال می کنند(بهتر است بگوییم کل عرض المان والدشان که بعضی اوقات این المان والد مرورگر است و بعضی اوقات یک تگ div).

نکته : اگر چند تگ block داشته باشیم ، به صورت زیر هم نمایش داده میشوند.

3- inline-block :

inline-block ترکیبی از 2 حالت بالا است. به این صورت که : با این مقدار میشود المانی ساخت که فقط به اندازه ی محتوای خود فضا اشغال کند و همچنین عرض و ارتفاع هم بگیرد.

نکته : هیچ تگی به خودی خود inline-block نیست. یا inline است یا block. پس بهتر است اینگونه بگوییم : اگر چند المان با خاصیت inline-block وجود داشته باشند ، در کنار هم نمایش داده میشوند.

4- none :

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

یک مثال برای درک بهتر inline و block :

یک نیمکت را در نظر بگیرید که یک فرد قلدر تنها بر روی آن نشسته است و دستان خود را باز کرده است. این فرد نفرت انگیز! اجازه نشستن به هیچ کس دیگر را بر روی نیمکت نمیدهد. این فرد دقیقا حکم حالت block را دارد.

برعکس فردی خوش اخلاق را در نظر بگیرید که خیلی شیک و مودب در گوشه ای از نیکمت نشسته است! و اجازه نشستن به سایر افراد را هم میدهد و اینگونه همگی خوش و خرم در کنار همدیگر قرار می گیرند! این فرد دقیقا حکم حالت inline را دارد.

خب فکر میکنم تا همینجا برای این جلسه مان کافی باشد. خوب تمرین کنید. مخلص…

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.