جلسه ی یازدهم: Box Model

جلسه ی یازدهم: Box Model
5 (100%) 1 vote
جلسه ی یازدهم: Box Model
5 (100%) 1 vote

مفاهیم باکس مدلتا اینجا در مورد زبان CSS استایل های Color ، Background و font را برای نوشتن آموختید. همانطور که دیدید به وسیله ی این استایل ها می توانیم یک متن با یک پس زمینه و یک فونت خاص داشته باشیم.

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

box model css

Box Model چیست؟

 

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

مفهوم Box Model در CSS عموما تغییراتی می باشد که در حاشیه قسمت مورد نظر ما وجود دارند. Box Model از بخش هایی به نام content ،padding ، border و margin تشکیل می شود که هر کدام کارایی متفاوتی دارند اما از آن ها برای یک هدف مشخص به کار می رود.

 

Box Model در کجا قرار دارد؟

 

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

سپس کافیست scroll پنجره ای که در کنار یا پایین صفحه ی ما باز شده را به آخر ببریم تا Box Model را مشاهده کنیم

 

مکان box model

 

بخش Content

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

 

استایل padding

 

به فضای خالی بین Content و Border استایل padding می گویند که این فاصله  قابل تنظیم می باشد. این فاصله به ترتیب و به صورت ساعتگرد از سمت چپ می باشد یعنی چپ، بالا، راست و پایین قابل تنظیم است. معمولا از طریق px و درصد این اندازه را تغییر می دهیم.

 

در صورتی که بخواهیم از چهار جهت یک اندازه ی مستقل داشته باشیم کافیست به صورت ساعتگرد به هرکدام یک عدد بدهیم. برای فهم بیشتر به نمونه کد زیر توجه کنید:


{ padding: 20px 40px 50px 60px }

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


{ padding: 20px 40px }

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


{ padding: 20px }

نکته: در صورتی که بخواهیم فقط به یک جهت خاص padding بدهیم کافیست یه padding-(x) بنویسیم و جای X یکی از جهت های اصلی را می نویسیم. (left، right، top، bottom) به نمونه کد زیر توجه کنید:


{ padding-bottom: 60px }

یک مثال کلی:

کد Html:

<!DOCTYPE html>
<html lang="en" dir="rtl">
<head>
<meta charset="utf-8">
<title>آموزش padding</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>این متن از سمت چپ و راست ۸۰px و از سمت بالا و پایین دارای ۵۰px فاصله می باشد</p>
</body>
</html>

کد CSS:

p { padding: 50px 80px ;
font-size: 40px;
background-color:#26c6da }

خروجی کد بالا:

 

استایل padding

استایل border

 

Border در معنای کلمه به معنای مرز یا حد می باشد. از استایل border برای ایجاد یک خط دور شکل استفاده می کنیم. (مانند یک مرز) این خط می تواند از هر جهت مستقل باشد یعنی می توان فقط یک خط زیر یا بالای شکل ایجاد نمود.

استایل border ویژگی مختلفی دارد که عبارتند از:

  1. border-style
  2. border-width
  3. border-color
  4. border-radius
  5. border-image

 

ویژگی border-style

از ویژگی  border- style برای تعیین نوع خط مورد نظر ما استفاده می شود یعنی ما می توانیم بگوییم که خط ما یکی باشد که در این صورت از کلمه ی (solid) استفاده میکنیم و اگر بخواهیم از دو خط موازی استفاده کنیم از کلمه (double) استفاده می نماییم. برای فهم بیشتر به نمونه کد زیر توجه کنید:


{ border-style:solid; }

نکته: ویژگی border- style فقط دارای این دو حالت نمی باشد و از حالات زیر نیز در آن استفاده می شود و اگر می خواهید به خروجی این حالات پی ببرید خودتان امتحان کنید. 😉

  1. inset
  2. dashed
  3. double
  4. groove
  5. hidden
  6. dotted
  7. none
  8. outset
  9. ridge
  10. solid
  11. inherit

 

ویژگی border-width

 

از ویژگی  border-width برای تنظیم ضخامت خط دور Content استفاده می شود. مقدار border-width را با واحد پیکسل تنظیم می شود، البته با یکی از سه مقدار از پیش تعریف شده thin و medium یا thick نیز می تواند تنظیم شود. به نمونه کد زیر توجه کنید:


{ border-width: 10px; }

نکته: اگر خاصیت border-style تنظیم نشده باشد خاصیت border-width کار نخواهد کرد.

 

ویژگی border-color

از طریق این ویژگی می توانیم رنگ خط یا لبه ی مورد نظر خود را به رنگ دلخواه خود تغییر دهیم. به نمونه کد زیر توجه کنید:


{ border-color: #d50000; }

&nbsp;

کار حرفه ای ها

 

در صورتی که بخواهیم از خاصیت های بالا استفاده کنیم به جای نوشتن تمامی این خاصیت ها کافیست یکبار خاصیت Border را بنویسیم و مقادیر مورد نظر خود را در آن قرار دهیم. به نمونه کد زیر توجه کنید:

کد Html:


<!DOCTYPE html>

<html lang="en" dir="rtl">

<head>

<meta charset="utf-8">

<title>آموزش padding</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<p>این متن دارای یک خط به رنگ قرمز و به صخامت ۱۰px می باشد</p>

</body>

</html>

کد CSS:


p { font-size: 40px;

background-color:#26c6da;

border: 10px solid #d50000;

}

خروجی کد بالا:

استایل padding و border

 

ویژگی border-radius

 

همانطور که دقت نموده اید لبه های خط ما تیز می باشند و اگر بخواهیم آن ها را گرد نماییم باید از ویژگی border-radius برای نرم کردن لبه های Border استفاده کنیم. به نمونه کد زیر توجه کنید:


{ border-radius: 3px; }

اطلاعات بیشتر

در ویژگی border-radius می توانیم میزان سخت یا نرم بودن هر گوشه از Content خود را تعیین کنیم برای مثال گوشه سمت چپ بالا می شود border-top-left-radius که مقدار آن را در مقابلش قرار می دهیم اما بهتر است از وب سایت border-radius برای اینکار استفاده کنیم زیرا یک کد استاندارد به ما می دهد که در تمامی مرورگر ها پشتیبانی می شود. (برای ورود به سایت border-radius کلیک کنید)

 

ویژگی border-image

از طریق ویژگی border-image می توانیم به جای رنگ از عکس برای پس زمینه ی خط مورد نظر خود استفاده کنیم. به نمونه کد زیر توجه کنید:


{ border-image: url('image/img.jpg') 20 20 round ; }

یک مثال کلی:

 

کد Html:


<!DOCTYPE html>

<html lang="en" dir="rtl">

<head>

<meta charset="utf-8">

<title>آموزش padding</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<p>این متن دارای لبه های نرم می باشد</p>

</body>

</html>

 

کد CSS:


p { padding: 50px 80px ;

font-size: 35px;

background-color:#26c6da;

border: 10px solid #d50000;

border-radius: 30px;

}

خروجی کد بالا:

وِیژگی borser-radius

 

استایل margin

 

فضای خالی خارج از محیط Content را margin می گویند. Margin فاصله یContent  از محیط اطراف می باشد. نحوه ی تعیین اندازه ی margin دقیقا  مثل padding می باشد. (یعنی چیز جدیدی وجود نداره فقط کاربردشون فرق میکنه 🙂 )

 

اطلاعات تکمیلی

برای اینکه بخواهیم Content مورد نظر ما در وسط قرار (عمودی یا افقی) بگیرد کافیست مقدار آن را بر روی Auto قرار دهیم برای مثال می خواهیم از سمت چپ و راست در میانه قرار بگیرد از کد زیر استفاده می کنیم:


{ margin: 30px auto }

خروجی کد زیر:

استایل margin

نکته: استایل margin رنگ ندارد ما اینجا برای درک شما از این مطلب آن را رنگ نموده ایم.

مبحث تکمیلی

 

استایل outline

 

ویژگی Outline

 

از ویژگی Outline برای ایجاد یک خط به دور شکل ایجاد می شود عموما خروجی این کد شبیه استایل Border می باشد اما تفاوت هایی در ساختار با هم دارند.

 

ویژگی Border عموما برای box ها و اشکال مربعی شکل استفاده می شود برای دایره یا چند ضلعی ها کاربردی ندارد اما outline اینگونه نیست و برای تمامی اشکال میتواند حاشیه بسازد.

 

ویژگی Border می تواند در جهت خاصی باشد مثلا در بالا یا سمت راست Content مورد نظر ما، اما Outline به طور کلی در همه ی جهات وجود دارد.

 

خاصیت Outline حالات مختلفی دارد که عبارتند از:

 

outline-color: از ویژگی outline-color برای تعیین رنگ outline استفاده می شود.

 

outline-style: از ویژگی outline-style برای تعیین نوع outline استفاده می شود که عبارتند از:

  1. inset
  2. dashed
  3. double
  4. groove
  5. hidden
  6. dotted
  7. none
  8. outset
  9. ridge
  10. solid
  11. inherit

 

outline-width: ویژگی outline-width برای تنظیم ضخامت Outline استفاده می شود.

 

نکته ی مهم: از طریق ویژگی Outline-offset می توانیم بین Outline و Border فاصله بیاندازیم.

 

مثال کلی:

 

کد Html:

 


<!DOCTYPE html>

<html lang="en" dir="rtl">

<head>

<meta charset="utf-8">

<title>آموزش padding</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<p>این نوشته دارای outline و border می باشد که از هم فاصله دارند</p>

</body>

</html>

کد CSS:


p { padding: 30px 20px ;

font-size: 35px;

text-align: center;

background-color:#26c6da;

border: 10px solid #d50000;

border-radius: 30px;

margin: 30px auto;

outline:dashed;

outline-offset: 20px;

outline-width: 10px;

}

خروجی کد بالا:

ویژگی outline

 

نکته: برای اینکه متن ها در وسط کادر قرار بگیر کافیست کد text-aligne:center را در داخل کد مورد نظر خود در CSS قرار دهید.

 

خلاصه متن:

  1. به تمامی چیز هایی که در وب سایت خود بکار می بریم یک box model می گوییم.
  2. Box Model از بخش هایی به نام content ،padding ، border و margin تشکیل می شود.
  3. محتوای مورد نظر بخش Content نام دارد.
  4. از ویژگی border- style برای تعیین شکل خط مورد نظر ما استفاده می شود.
  5. به فاصله ی بین محتوای ما و خط روی شکل padding می گویند. (یعنی فاصله از داخل 🙂 )
  6. از استایل border برای ایجاد یک خط دور شکل استفاده می کنیم.
  7. اگر خاصیت border-style تنظیم نشده باشد خاصیت border-width کار نخواهد کرد.
  8. از ویژگی Outline برای ایجاد یک خط به دور شکل ایجاد می شود عموما خروجی این کد شبیه استایل Border می باشد.
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

پیشنهاد میکنیم

آخرین ارسالی های وبلاگ

لوگو

logo-samandehi

تاییدیه ها