آموزش برنامه نویسی ، پایگاه داده sql server
آموزشگاه برنامه نویسی تحلیل داده : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server


آموزشگاه برنامه نویسی مجتمع فنی تهران میرداماد : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server

خواص مقدماتی CSS

اندازه عناصر در CSS :

در CSS مجموعه خواصی برای تعيين اندازه عناصر وجود دارد . در اين قسمت به معرفی خواصی می پردازيم که به ما امکان کنترل اندازه عرض و طولی عناصر در صفحه را می دهند .
خواص ارائه شده در اين قسمت در ليست زير آمده اند . برای دريافت اطلاعات درباره هر کدام روی نام آن کليک کنيد :

height
max-height
min-height
width
max-width
min-width

خواص تعيين اندازه در 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 ) تعيين می کنيم .
- درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل عرض صفحه يا عنصر در برگيرنده ، به عنوان حداقل عرض در نظر گرفته می شود .

مثال : در مثال زير برای جدول و خانه های آن ارتفاع و عرض تعيين شده است :

Example
نکته : در خانه های جدولی که در يک سطر يا ستون هستند ، چنانچه برای خانه ها ارتفاع يا عرض های متفاوت تعيين شود ، همواره ارتفاع يا عرض ستون يا سطر را عنصر با ارتفاع يا عرض بيشتر تعيين می کند و باعث تغيير اندازه ستون های ديگر می شود .
برای نمونه در مثال زير ارتفاع خانه 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 >
کد
Cell 1 cell 2
Cell 3
خروجی


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بود ه است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : جمع سه + پنج چنده ؟