امروز : سه شنبه ، ۲ آبان ۱۳۹۶
خانه / آموزش کامل CSS / آموزش کامل CSS – قسمت هفتم: قاب و جعبه
آموزش سی اس اس

آموزش کامل CSS – قسمت هفتم: قاب و جعبه

آخرین ویرایش در تاریخ ۱ آذر ۱۳۹۵

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

مدل لایه های قاب

نحوه استفاده از قاب ها

برای نمایش قاب ها در CSS از خاصیت border استفاده می کنیم. ویژگی های قاب ها به صورت های زیر می باشد:

  • border-style : نوع قاب
  • border-size : اندازه یا ضخامت قاب
  • border-color : رنگ قاب
  • border-top-style : نوع ضلع بالایی قاب
  • border-bottom-style : نوع ضلع پایینی قاب
  • border-right-style : نوع ضلع راست قاب
  • border-left-style : نوع ضلع چپ قاب

p{

border-top-style: dashed;

border-bottom-style: solid;

border-right-style: dotted;

border-left-style: dotted;

}

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

border: 5px solid red;

درباره ما admin

محمد صفری : مدیر پردیس وردپرس ، مهندس نرم افزار و طراح سایت

این موارد رو هم بررسی کنید

آموزش سی اس اس

آموزش کامل CSS – قسمت ۱۲: موقعیت المان ها ۲

همان طوری در جلسه قبل آموزش گفتیم position چهار حالت دارد که با دو حالت …

پاسخ دهید