در آموزش CSS جلسه قبل تعدادی از properties ها را مورد بررسی قرار دادیم و اکنون ادامه آن ها را مورد بررسی قرار می دهیم و با جداول ، margin و padding و box model آشنا خواهیم شد .
مبحث ششم : Tables
در این مبحث در مورد جداول صحبت میکنیم. که با خاصیت های این مبحث میتوان نحوه نمایش جدول و محتویات ان را در صفحه مشخص نماییم.
border-collapse : این خاصیت مدل حاشیه را برای تگ table مشخص میکند.
این خاصیت دارای مقادیر زیر است:
separate : در صورت استفاده از این مقدار تنها خانه هایی که در درون جدول وجود دارد می تواند حاشیه داشته باشد اما ستون ها و ردیف ها نمی توانند حاشیه داشته باشند.یعنی تنها یک سلول از چهار طرف فاصله میگیرد که این مقدار مقدار پیش فرض می باشد.
collapsing : در صورت استفاده از این مقدار فاصله بین خانه های جدول و حاشیه های انها قرار نمیگیرد.
border-spacing :
این تنها زمانی کاربرد دارد که از مقدار separate برای جدول استفاده کرده باشیم و این خاصیت میزان فاصله بین خانه های جدول را کنترل میکند.
#result {
border-collapse:separate ;
border-spacing:1em 0.5em ;
}
در مثال بالامیزان 1em فاصله افقی را و میزان 0.5em فاصله عمودی را در بین خانه های جدول تعیین میکند.
نکته: با این خاصیت میتوان مقدار منفی و یا یک یا دو مقدار را بپذیرد که در صورت استفاده از دو مقدار ، به صورت معمول مقدار اول مربوط به فاصله افقی و مقدار دوم مربوط به فاصله عمودی می شود.اما اگر از یک مقدار استفاده نمایید این مقدار هم مربوط به فاصله افقی و هم مربوط به فاصله عمودی ان می شود.
Empty-cells :
با استفاده از این خاصیت می توانید تعیین کنید که آیا رنگ پس زمینه و حاشیه های خانه هایی که محتویات ندارند نمایش داده شوند یا خیر.این خاصیت تنها زمانی استفاده می گردد که خاصیت separate برای جدول استفاده کرده باشیم. اما در مقدار collapsing در نظر گرفته نمی شود.
خاصیت Empty-cells دارای مقادیر زیر می باشد:
show: در صورت استفاده از این مقدار پس زمینه خانه های خالی نمایش داده میشود.
hide : در صورت استفاده از این مقدار پس زمینه خانه های خالی نمایش داده نمی شود.و اگر مقدار تمامی خانه های موجود در یک ردیف جدول برابر با hide باشد و در ضمن این خانه ها نیز خالی باشد ان ردیف نمایش داده نمی شود.
caption-side : این خاصیت مکان عنوان جدول را در جهت عمودی مشخص می کند،اما اگر خواسته باشید مکان افقی را تعیین نمایید می توانید از خاصیت text-align استفاده نمایید.
این خاصیت دارای مقادیر زیر است:
top: این مقدار مکان متن را در بالا قرار می دهد.
bottom: این مقدار مکان متن را در پایین قرار می دهد.
inherit: این مقدار ، مقدار پیش فرض این خاصیت است.
مبحث هفتم box model :
تمامی عناصر HTML به شکل یک باکس مطرح شده و در css زمانی از box model استفاده می شود که سخنی از دیزاین و ساختار مطرح شود.
تمامی عناصر HTMLدر css به صورت یک باکس تصور میشود. که این مبحث در طراحی و طرح بندی صفحات استفاده میشود.
box model یا مدل کاری که در باکس قرار می گیرند به شکل زیر هستند :
Margin
border
padding
content
تصویر زیر box model را به صورت واضح تشریح میکند.
margin : این قسمت از box model فضای اطراف border را پوشش می دهد.در ضمن نمی توان به این قسمت دیزاین از قبل پس زمینه تعیین نماییم.
border : این قسمت از box model فضای اطراف content و padding را پوشش می دهد.در ضمن می توانید رنگ ، سبک، و ضخامت border را تعیین نماییم.
padding : این قسمت از box model فضای اطراف content را پوشش می دهد.در ضمن می توانید رنگ پس زمینه را تعیین نماییید.
content : این قسمت از box model محتوای عنصر را برمی گیرد . یعنی این همان جایی است که متن و عکس ها قرار می گیرد.
نکته: برای تنظیم بهتر عرض و ارتفاع حقیقی یک عنصر درک مفهوم box model بسیار مهم میباشد.
در قسمت بالا ما تنها تعریفی از اجزای box model نمودیم، حال هر کدام از اجزا را به صورت مفصل مورد بحث قرار میدهیم که در این مبحث تنها در مورد margin و padding صحبت میکنیم و دیگر اجزای انرا به دلیل بزرگی در مباحث جداگانه مورد بحث قرار میدهیم.
margin :
با استفاده از این خاصیت می توانیم محتوای سایت را از اصل صفحه فاصله دهیم که به زبان ساده margin فاصله بیرونی است.
<div class="content"> iran </div>
در اینجا عنصر متن iran محتوای صفحه می باشد و اگر بخواهیم ای متن را از body به اندازه 50px حاشیه بدهیم از دستور زیر استفاده می کنیم.
.content {margin:50px ;}
در این صورت محتوا از طرف راست، چپ، بالا، پایین به اندازه 50px فاصله میگیرند.
چگونه از margin استفاده نماییم؟
قاعده دستوری margin به شکل زیر می باشد:
margin : margin-top margin-right margin-botom margin-left ;
یعنی
margin: 10px 15px 20px 40px ;
در مثال بالا ما به اندازه 10px از طرف بالا، به اندازه 20px از سمت راست ، به اندازه 15px از طرف پایین ، به اندازه 40px از چپ فاصله ایجاد کردیم.
انواع نوشتن margin در css :
;margin:10px 5px 15px 20px
سمت بالا 10px، سمت راست 5px ، سمت پایین 15pxT سمت چپ 20px
; margin:10px 5px 20px
سمت بالا 10px،سمت راست و چپ 5px، سمت چپ 20px
; margin:10px 5px
سمت بالا، پایین 10px، سمت چپ و راست 5px
;margin:10px
سمت بالا، پایین،چپ، راست 10px
در بالا شما نوعی خلاصه نویسی را مشاهده میکنید، اما میتوان هر کدام را به شکل مجزا نیز بنویسید.
margin-top: فاصله از بالا
margin-right: فاصله از سمت راست
margin-bottom: فاصله از پایین
margin-left: فاصله از چپ
مثال:
margin-top :20px ; margin-right :30px ; margin-lift :10px ; margin-bottom :15px ;
padding :
این خاصیت در کل برای ایجاد نمودن فاصله داخلی به کار می رود .
<div class="content"> iran </div>
در اینجا ما فاصله را از تگ فرزند تطبیق می کنیم. اگر ساده تر بگویم! متن ما iran را در بین یک باکس در نظر بگیرید فاصله باکس از اصل صفحه را margin و فاصله متن از باکس را padding می گوییم .
.content { margin:50px ; }
padding فاصله محتوای درون تگ را با لبه ی تگ تعیین میکند.به طوری که padding را فاصله داخلی می نامیم.
چگونه از padding استفاده نماییم؟
قاعده دستوری padding به شکل زیر میباشد:
padding: padding-top padding-raight padding-bottom padding-left ;
یعنی
padding:10px 20px 15px 40px ;
در مثال بالا ما به اندازه 10px از طرف بالا، به اندازه 20px از سمت راست، به اندازه 15px از طرف پایین، به اندازه 40px از چپ از لبه تگ تا محتوای داخل تگ فاصله ایجاد کردیم.
انواع نوشتن padding در css :
padding:10px 5px 15px 20px
سمت بالا 10px، سمت راست 5px ، سمت پایین 15px سمت چپ 20px
padding:10px 5px 15px
سمت بالا 10px،سمت راست و چپ 5px، سمت پایین 15px
padding: 10px 5px
سمت بالا، پایین 10px، سمت چپ و راست 5px
padding: 10px
سمت بالا، پایین ،چپ ، راست 10px
در بالا شما نوعی خلاصه نویسی را مشاهده می کنید، اما می توان هر کدام را به شکل مجزا نیز بنویسید .
padding-top : فاصله از بالا
padding-right : فاصله از سمت راست
padding-bottom : فاصله از پایین
padding-left : فاصله از چپ
مثال :
padding-top:20px ; padding-right:30px ; padding-left:10px ; padding-bottom:15px ;
