خواص مقدماتی CSS
اندازه عناصر در CSS :
در CSS مجموعه خواصی برای تعيين اندازه عناصر وجود دارد . در اين قسمت به معرفی خواصی
می پردازيم که به ما امکان کنترل اندازه عرض و طولی عناصر در صفحه را می دهند .
خواص ارائه شده در اين قسمت در ليست زير آمده اند . برای دريافت اطلاعات درباره هر
کدام روی نام آن کليک کنيد :
خواص تعيين اندازه در CSS
|
نام خاصيت
|
نوع خاصيت
|
شرح
|
|
height
|
auto
length
درصد %
|
توسط اين خاصيت ، به يکی از روش های زير ارتفاع عنصر را تعيين می کنيم :
- auto : در اين حالت مرورگر به صورت اتوماتيک ارتفاع عنصر را تنظيم می کند .
- length : در اين حالت ميزان ارتفاع عنصر را بر حسب واحدی مثل پيکسل ( px ) يا نقطه
( pt ) تعيين می کنيم .
- درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل ارتفاع صفحه يا عنصر در
برگيرنده ، به عنوان ارتفاع در نظر گرفته می شود .
|
|
max-height
|
none
length
درصد %
|
حداکثر ارتفاع مجاز را برای عنصر به يکی از روش های زير تعيين می کند :
- none : در اين حالت هيچ مقدار و محدوديتی برای ارتفاع عنصر درنظر گرفته نمی شود .
- length : در اين حالت حداکثر ارتفاع را بر حسب واحدی مثل پيکسل ( px ) يا نقطه (
pt ) تعيين می کنيم .
- درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل ارتفاع صفحه يا عنصر در
برگيرنده ، به عنوان حداکثر ارتفاع در نظر گرفته می شود .
|
|
min-height
|
none
length
درصد %
|
حداقل ارتفاع مجاز را برای عنصر به يکی از روش های زير تعيين می کند :
- none : در اين حالت هيچ مقدار و محدوديتی برای ارتفاع عنصر درنظر گرفته نمی شود .
- length : در اين حالت حداقل ارتفاع را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt
) تعيين می کنيم .
- درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل ارتفاع صفحه يا عنصر در
برگيرنده ، به عنوان حداقل ارتفاع در نظر گرفته می شود .
|
|
width
|
auto
length
درصد %
|
توسط اين خاصيت ، به يکی از روش های زير عرض عنصر را تعيين می کنيم :
- auto : در اين حالت مرورگر به صورت اتوماتيک عرض عنصر را تنظيم می کند .
- length : در اين حالت ميزان عرض عنصر را بر حسب واحدی مثل پيکسل ( px ) يا نقطه (
pt ) تعيين می کنيم .
- درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل عرض صفحه يا عنصر در برگيرنده
، به عنوان عرض در نظر گرفته می شود .
|
|
max-width
|
none
length
درصد %
|
حداکثر عرض مجاز را برای عنصر به يکی از روش های زير تعيين می کند :
- none : در اين حالت هيچ مقدار و محدوديتی برای عرض عنصر درنظر گرفته نمی شود .
- length : در اين حالت حداکثر عرض را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt
) تعيين می کنيم .
- درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل عرض صفحه يا عنصر در برگيرنده
، به عنوان حداکثر عرض در نظر گرفته می شود .
|
|
min-width
|
none
length
درصد %
|
حداقل عرض مجاز را برای عنصر به يکی از روش های زير تعيين می کند :
- none : در اين حالت هيچ مقدار و محدوديتی برای عرض عنصر درنظر گرفته نمی شود .
- length : در اين حالت حداقل عرض را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt )
تعيين می کنيم .
- درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل عرض صفحه يا عنصر در برگيرنده
، به عنوان حداقل عرض در نظر گرفته می شود .
|
مثال : در مثال زير برای جدول و خانه های آن ارتفاع و عرض
تعيين شده است :
نکته : در خانه های جدولی که در يک سطر يا ستون هستند ،
چنانچه برای خانه ها ارتفاع يا عرض های متفاوت تعيين شود ، همواره ارتفاع يا عرض ستون
يا سطر را عنصر با ارتفاع يا عرض بيشتر تعيين می کند و باعث تغيير اندازه ستون
های ديگر می شود .
برای نمونه در مثال زير ارتفاع خانه Ce11 1 برابر 40px و خانه Cell 2 برابر 100px تعيين
شده و می بينيم که ارتفاع سطر برابر ارتفاع خانه Cell 2 تنظيم شده و باعث تغيير ارتفاع
خانه Cell 1 شده است .
|
< table style="border: solid 2px blue ;
width : 600px ; height : 250px " >
< tr >
< td style="border: solid 2px green; width: 250px; height: 40px " >
Cell 1
< /td >
< td style="border: dashed 2px blue; width: 350px; height: 100px " >
Cell 2
< /td >
< /tr >
< tr >
< td style="border: solid 2px red; width: 600px; height: 150px ; text-align : center " colspan = "2"
>
Cell 3
< /td >
< /tr >
< /table >
|
|
|