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

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

درود بر شما از آنجایی که در قسمت اول معرفی پر کاربرد ترین کد های CSS در قسمت اول به شما یک سری از کد های کاربردی CSS را معرفی و آموزش دادیم و این کد ها قابلیت های CSS به نام Background و همچنین انواع خاصیت های Color ، Margin ، Padding را به شما در میهن آکادمی توضیح و آموزش دادیم و در این جلسه به ادامه یک سری از کد های CSS پر کاربرد می پردازیم ، پس بیاید تا بریم …

همانطور که می دانید خاصیت های زیادی کد در CSS وجود دارد که می توانیم برای المان سایت سایت خود در نظر بگیریم و اینجاست که ما می خواهیم به سراغ خاصیت های مهم کد های css برویم

خاصیت به نام width :

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

خاصیت به نام height :

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

<div class="box"></div>
.box{
width : 200px;
width : 200px;
background : blue;
}

تفاوت بین واحد پیکسل (PX) با واحد درصد (%) :

وقتی می‌خوایم توی طراحی وب اندازه‌ی چیزی رو مشخص کنیم، دو تا واحد پرکاربرد داریم: پیکسل (PX) و درصد (%) که در اینجا به شما کامل توضیح می دهیم که چطور می باشد

پیکسل (PX):

پیکسل مثل یه نقطه ثابت روی صفحه نمایش می‌مونه. اندازه‌اش همیشه همون‌قدره و به هیچ چیز دیگه‌ای بستگی نداره. وقتی از پیکسل استفاده می‌کنی، می‌تونی خیلی دقیق اندازه و جای هر چیزی رو مشخص کنی. مثلاً یه آیکون 20 پیکسلی همیشه 20 پیکسل می‌مونه، چه صفحه نمایش بزرگ باشه چه کوچیک.

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

پس پیکسل بیشتر برای چیزای کوچیک و ثابته، مثل اندازه‌ی دقیق یه عکس کوچیک یا یه خط.

درصد (%):
درصد فرق داره. اندازه‌اش ثابت نیست و بستگی داره به اندازه‌ی چیزی که داخلش قرار گرفته. مثلاً اگه یه کادر داشته باشی که اندازه‌اش 100 درصد باشه، یعنی کل فضای موجود رو می‌گیره. اگه یه متن رو 50 درصد اندازه بدی، یعنی نصف فضای کادر رو اشغال می‌کنه.

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

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

خاصیت Display :

اگه در خاطراتان باشد ، در قسمت معرفی تگ ها به شما می گفتیم که فلان تگ را از نوع block می باشد و فلان تگ از نوع تگ Inline که حالا به مفهوم این تگ رسیدم و با خاصیت تگ Display می توانیم نوع نمایش پیشفرض المنت ها را به آن چیزی که خودمان دوست داریم تغییر دهیم و این Display برای خودش یک سری مقدار ها می گیرد که برایتان کامل توضیح می دهیم

• inline
• block
• inline-block
• none

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

block : المان های بلاک در کل عرض مرورگر را اشغال می کنند و بهتر است که به شما بگوییم کل عرض المان ها والدشان که برخی از اوقات این المان را به عنوان والد مرورگر می باشد و بعضی مواقعه یک تگ به صورت div می باشد

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

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

نمونه مثالی برای درک بهتر این موضوع :

شما فرض کن که سوار یک علاکلنگ هستید و یک فرد سنگین پایین نشسته است و خود را تکان نمی دهد و این یک فرد تشنه به خون شماست و می خواهد شما را پایین نیاورد و این همان حالت کد Block می باشد

برعکس این موضوع شما فکر کنید یک فردی سنگین و خیلی شیک و مودب بر روی همان علاکلنگ می باشد که با شما دشمنی ندارد و می خواهد با شما بازی کند و با یک دیگر بازشی می کنید و این همان حالت کد Inline می باشد

خب تا اینجا برای شما در این جلسه توضیحاتی مفید در این باره داده ایم و خوب است که این نکته ها را تمرین کنید و در جلسه بعدی نکاتی بهتر و سخت را با شما در اختیار می گذاریم …