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

  • دوشنبه ۰۷ تیر, ۱۳۹۵
  • ۱۷۱۷ بازدید

CSS که کوتاه شده عبارت Cascading Style Sheets وظیفه تغییر ظاهر وبسایت ما را دارد؛ با بکارگیری دو زبان HTML و در کنار آن CSS می‌توانیم یک برگه وبسایت ایجاد کنیم؛ بنابراین باید بگوییم که زبان HTML به تنهایی می‌واند نوشته ها و محتویات مورد نظر ما را به کاربر نشان دهد اما نه با ظاهری که مورد پسنده همه باشد!

استایل دادن به باکس با CSS

نکته : این آموزش بصورت ویدیو آماده سازی شده که برای راحتی شما در قالب آموزش متنی هم قرار گرفته ولی پیشنهاد میشه که ویدیو آموزشی رو هم دریافت کنید.
در این آموزش قصد داریم  به جعبه ها یا همون باکس هایی که  با CSS طراحی میشه با سطحی ابتدایی بپردازیم.
قصد داریم تاثیر پارامتر هایی مانند Margin، Padding و Border رو روی یک جعبه HTML توضیح بدیم.
وقتی حرف از محتوا در یک وبسایت میزنیم منظورمون همون متن ها، تصاویر و ویدئو ها و شاید هم چند تا فرم باشه؛ در واقع بطور کلی تر هرچیزی که در یک صفحه وب قرار داره همون محتوای ما هست.

 

css_Padding_margin_CupCode
وابسته به اینکه با چه نوع محتویات و المنت های HTML سروکار داریم، میتونیم عرض صفحه و بعضی مواقع هم ارتفاع صفحه رو مشخص کنیم؛ اما اگر هیچ عرض و ارتفاعی مشخص نکنیم، محتوای موجود در یک صفحه 100 درصد اندازه چارچوب ریشه ای خودش رو اشغال میکنه و همچنین مقدار ارتفاع هم به مقدار محتوای ما وابسته میشه.
حالا اگر یک عرض و ارتفاع برای چارچوب محتوای خودمون مشخص کنیم و به این چارچوب Border  یا Margin  یا حتی Padding اضافه کنیم، مکان قرارگیری محتوای ما تاثیر میگیره.
ولی نکته ای که وجود داره این هست که هر محتوایی در زبان HTML در داخل یک جعبه یا همون باکس قرار میگیره بنابراین میخوایم بررسی کنیم که هر کدوم از عناصر بالا چه تاثیری در اندازه باکس ها و محتویات داخلش میذاره.
جعبه رو میشه با المنت div در زبان HTML پیاده سازی کرد، در داخل المنت div یک المنت سربرگ یا همون Header بنام Content داریم و همینطور یک المنت پاراگراف هم برای محتوای دیگه داخل این جعبه  وجود داره.
بنابراین می‌تونیم برای عنوان از تگ H1 استفاده کنیم که خود همین تگ درون یک جعبه جداگانه باشه و پاراگراف زیر این عنوان هم همچنین جعبه مخصوص به خودش رو داشته باشه.
اما حالا میخوایم H1 داخل پاراگراف رو از بین ببرم و میخوایم روی جعبه ای تمرکز کنم که تمام این متن ها رو داخلش داره.
پایه این جعبه عرض و ارتفاعی داره، البته ارتفاع این جعبه همونطور که قبلا هم گفته شد قراره وابسته به مقدار محتویات ما تنظیم بشه؛ بنابراین هرچی محتوای ما بیشتر بشه باید ارتفاع جعبه هم بلند تر بشه.
اما حالا اگر بخوایم padding به جعبمون اضافه کنیم، جعبمون بزرگ تر میشه، به عنوان مثال اگر عرض جعبه رو 100 پیکسل بذارید و بعدش به جعبه 20 پیکسل Padding  بدید در اینصورت اندازه جعبه شما 140 پیکسل میشه چونکه 20 پیکسل از راست و 20 پیکسل هم از چپ  Padding می‌گیره؛ حالا ممکنه فکر کنید که اگر Padding به یک جعبه اضافه کنیم محتویات داخلش فضای کمتری خواهند داشت اما مسئله ی مهمی نیست.

padding_Css_CupCode_ir
بطور پیش فرض محتوای داخل این جعبه سعی میکنن همون عرضی که در ابتدا داشتند رو نگه دارند؛ اما وقتی Padding  و Border و Margin اضافه میکنیم، فضایی که جعبه ما در صفحه اشغال می‌کنه بیشتر میشه.
حالا اگر دوباره برگردیم به حالت اول معلومه که محتوا کاملا با طول و ارتفاع جعبه جفت شدند اما وقتی Padding اضافه کردیم محتوا داخل جعبه از هر طرف جعبه به اندازه 20 پیکسل فاصله گرفته در نتیجه جعبه ما 40 پیکسل عریض تر و 40 پیکسل بلند تر میشه.
حالا با اضافه کردن Border موضوع رو یکم پیچیده تر می‌کنیم؛ به عنوان مثال بگیم مقدار Border رو 2 پیکسل گذاشتیم؛ در این صورت این بار هم جمعا 4 پیکسل به عرض و ارتفاع جعبه ما اضافه میشه چرا که این 2 پیکسل به هر طرف جعبه ما اضافه میشه.
در اینصورت علاوه بر فضایی که محتوای ما در جعبه اشغال کرده جعبه ما 40 پیکسل به خاطر Padding و 4 پیکسل به خاطر Border چه از نظر عرض و چه ارتفاع بزرگتر شده.

border_Css_CupCode_ir
حالا اگر بخوایم جعبه ما با جعبه های دیگه ای که در صفحه هست تداخلی نداشته باشه و از هم فاصله داشته باشند در اینجا Margin به جعبه اضافه می‌کنیم.

margin_Css_CupCode_ir
اگر به جعبه به شکلی لایه ای و از داخل نگاه کنیم، داخل جعبه محتوا رو داریم و بعدش از داخل جعبه Padding اضافه شده و از خارج از جعبه Border اضافه شده و در نهایت جعبه از دیگر اشیا کنارش بوسیله Margin فاصله گرفته.
بنابراین اگر به عنوان مثال جعبه ای با عرض 3000 پیکسل ایجاد کنید و بهش این سه پارامتر  یعنی Border، Margin و Padding رو اضافه کنید اندازه جعبه شما قطعا تغییر میکنه و دیگه 3000 پیکسل نیست و این نکته بسیار پایه ای هست، اما برای اینکه بتونیم متوجه بشیم چطور در CSS محتویات ما کنار هم قرار میگیرن باید این مفاهیم رو خوب متوجه بشیم.
این تمام ماجرا بود! منتظر دیدگاه های شما هستیم؛ با ما به اشتراک بگذارید!

اندازه : 17 مگابایت

استایل دادن به باکس با CSS – آموزش ویدیویی مبتدی
به این نوشته امتیاز بدهید
برای دریافت تازه‌ترین ها به کانال تلگرامی کدفنجونی بپیوندید : cupcode_ir@

دیدگاه خود را در میان بگذارید

@

شما ربات هستید؟ *