جلسه هفتمcss - جعبه‌ها و قاب‌ها

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

در شکل زیر می‌توانید این موضوع را به وضوح مشاهده کنید:

اضافه کردن قاب:

• در حالت پیش‌فرض قابی که دور تا دور المان‌های اچ تی ام ال وجود دارد، دیده نمی‌شود. ولی شما هر زمان که بخواهید می‌توانید این قاب را با رنگ و ضخامت دلخواه نمایش دهید. با ما همراه باشید.
• • نام :‌ border-style و border-size
  • این ویژگی چه کاری انجام می‌دهد؟  برای تعیین قاب در اطراف المان‌ها از این دستور استفاده می‌کنیم. 
  • چه چیزهایی را جلوی این دستور بنویسیم؟ اندازه و نوع قاب دور المان‌ها را.
  • نحوه‌ی استفاده: border-style: solid و border-size: 1px را در بخش دستورات می‌نویسیم.
  • همانطور که گفتیم، هر المان اچ‌تی‌ام‌ال در واقع دارای یک قاب منحصر به فرد است که دور تا دور المان را اشغال کرده. برای همین موضوع معمولا این قاب به صورت نامرئی است؛ ولی همیشه وجود دارد. برای نمایش این قاب تنها کافیست که به المان خود در سی‌اس‌اس دستور border بدهید:

HTML

<p>در مثال زیر ما یک مستطیل داریم که چون قاب دور  آن به صورت پیش‌فرض نامرئی است نمی‌توانیم آن را مشاهده کنیم</p>

<div class="shape1"> <p>متنی که دور آن یک قاب ۵ پیکسلی کشیده‌ایم </p> </div>

<p>در مثال زیر ما یک مستطیل داریم که در سی‌اس‌اس قاب اطراف آن را با اندازه ۲ پیکسل مرئی کرده‌ایم </p>

<div class="shape2"> <p>متنی که دارای یک قاب ۲ پیکسلی است</p> </div>

 

CSS

shape1 {
    border-style: solid;
    border-width:  5px;
}

shape2  {
     border-style:  solid;
     border-width:  2px;
}

 

متن بدون قاب

با قاب ۵ پیکسلی

در مثال زیر ما یک مستطیل داریم که در سی‌اس‌اس قاب اطراف آن را با اندازه ۲ پیکسل مرئی کرده‌ایم

با قاب دو پیکسلی

 

تغییر رنگ و حالت قاب: 

نام :‌ border-style و border-color

این ویژگی چه کاری انجام می‌دهد؟  برای تعیین رنگ قاب در اطراف المان‌ها از این دستور استفاده می‌کنیم.

چه چیزهایی را جلوی این دستور بنویسیم؟ اندازه رنگ و نوع قاب دور المان را

نحوه استفاده: border-style: solid و border-size: 1px و border-color: red

دستور  border-style می‌تواند حالت‌های مختلفی داشته باشد. این دستور همانطور که گفتیم در واقع نوع بردار را مشخص می‌کند. نوع بردار می‌تواند به صورت خطی‌(solid)، به صورت خط چین (dashed) و یا به صورت نقطه‌چین (dotted) باشد. 

HTML

<div class="border"> المانی با ابعاد مشخص و قاب مرئی!</div>

CSS

border {
    border-style: solid;
    border-color:  #98bf21

    width:  200px;

   height: 300px;
}

المانی با ابعاد مشخص و قاب مرئی

 

همچنین سی‌اس‌اس به شما این امکان را می‌دهد که برای هر سمت قاب، یک استایل تعیین کنید. برای این کار از دستور زیر استفاده می‌کنیم:

HTML

<p> متنی که هر طرف آن قاب جداگانه دارد</p>

CSS

p {
    border-top-style: dotted;
    border-right-style:  solid;
     border-bottom-style:  dotted;
     border-left-style:  solid;
}

 

متنی که هر طرف آن قاب جداگانه دارد

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

نکته: شاید برای شما نوشتن این دستورات به صورت جداگانه کار وقت‌گیری باشد! برای همین در سی‌اس‌اس می‌توانید تمامی دستورات را در یک دستور خلاصه کنید. در واقع تنها کافیست شما یک بار کلمه border را بنویسید و سپس تمامی دستورات را به ترتیب وارد کنید: دستور اول: ضخامت بردار، دستور دوم نوع قاب، دستور سوم رنگ قاب! در زیر مثال کامل این روش آمده است. 

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

HTML

<div> قاب دور این المان به صورت خلاصه نوشته شده است</div>

CSS

div {
    border: 5px solid red;
}

 

 

قاب دور این المان به صورت خلاصه نوشته شده است