آموزش ابعاد در CSS
آموزش ابعاد در CSS
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش ابعاد در CSS خواهیم پرداخت.
در این درس می آموزیم که چگونه می توانیم ابعاد جعبه ها را تغییر دهیم.
ما ویژگی های زیر را داریم که به شما امکان می دهد ابعاد جعبه را کنترل کنید.
- از ویژگی height برای تنظیم ارتفاع یک جعبه استفاده می شود.
- از ویژگی width برای تنظیم عرض جعبه استفاده می شود.
- از ویژگی line-height برای تنظیم ارتفاع یک خط متن استفاده می شود.
- از ویژگی max-height برای تنظیم حداکثر ارتفاع یک جعبه استفاده می شود.
- از ویژگی min-height برای تنظیم حداقل ارتفاع یک جعبه استفاده می شود.
- از ویژگی max-width برای تنظیم حداکثر عرض یک جعبه استفاده می شود.
- از ویژگی min-width برای تنظیم حداقل عرض یک جعبه استفاده می شود.
ویژگی های ارتفاع و عرض
ویژگی های ارتفاع و عرض به شما امکان می دهد ارتفاع و عرض جعبه ها را تنظیم کنید. آنها می توانند مقادیر طول، درصد یا کلمه کلیدی خودکار را بدست آورند.
در اینجا یک مثال آورده شده است –
|
1 2 3 4 5 6 7 8 9 10 |
<html> <head> </head> <body> <p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;"> This paragraph is 400pixels wide and 100 pixels high </p> </body> </html> |
خروجی به شکل زیر می باشد:
|
1 |
This paragraph is 400pixels wide and 100 pixels high |
ویژگی line-height
ویژگی line-height به شما امکان می دهد فضای بین خطوط متن را افزایش دهید. مقدار ویژگی ارتفاع خط می تواند یک عدد، یک طول یا یک درصد باشد.
در اینجا یک مثال آورده شده است –
|
1 2 3 4 5 6 7 8 9 10 11 |
<html> <head> </head> <body> <p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px; line-height:30px;"> This paragraph is 400pixels wide and 100 pixels high and here line height is 30pixels. This paragraph is 400 pixels wide and 100 pixels high and here line height is 30pixels. </p> </body> </html> |
خروجی به شکل زیر می باشد:
|
1 |
This paragraph is 400pixels wide and 100 pixels high and here line height is 30pixels.This paragraph is 400 pixels wide and 100 pixels high and here line height is 30pixels. |
ویژگی max-height
ویژگی max-height به شما امکان می دهد حداکثر ارتفاع یک جعبه را تعیین کنید. مقدار ویژگی حداکثر ارتفاع می تواند یک عدد، یک طول یا یک درصد باشد.
توجه – این ویژگی نه در Netscape 7 و نه در IE 6 کار نمی کند.
در اینجا یک مثال آورده شده است
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html> <head> </head> <body> <p style = "width:400px; max-height:10px; border:1px solid red; padding:5px; margin:10px;"> This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px </p> <br> <br> <br> <img alt = "logo" src = "/css/images/logo.png" width = "195" height = "84" /> </body> </html> |
خروجی به شکل زیر می باشد:
|
1 2 3 4 5 6 |
This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px logo |
ویژگی min-height
ویژگی min-height به شما امکان می دهد حداقل ارتفاع یک جعبه را تعیین کنید. مقدار ویژگی ارتفاع دقیقه می تواند یک عدد، یک طول یا یک درصد باشد.
توجه – این ویژگی نه در Netscape 7 و نه در IE 6 کار نمی کند.
در اینجا یک مثال آورده شده است –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Live Demo <html> <head> </head> <body> <p style = "width:400px; min-height:200px; border:1px solid red; padding:5px; margin:10px;"> This paragraph is 400px wide and min height is 200px This paragraph is 400px wide and min height is 200px This paragraph is 400px wide and min height is 200px This paragraph is 400px wide and min height is 200px </p> <img alt = "logo" src = "/css/images/logo.png" width = "95" height = "84" /> </body> </html> |
خروجی به شکل زیر می باشد:
|
1 2 3 |
This paragraph is 400px wide and min height is 200px This paragraph is 400px wide and min height is 200px This paragraph is 400px wide and min height is 200px This paragraph is 400px wide and min height is 200px logo |
ویژگی max-width
ویژگی max-width به شما امکان می دهد حداکثر عرض یک جعبه را تعیین کنید. مقدار ویژگی حداکثر عرض می تواند یک عدد، یک طول یا یک درصد باشد.
توجه – این ویژگی نه در Netscape 7 و نه در IE 6 کار نمی کند.
در اینجا یک مثال آورده شده است –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html> <head> </head> <body> <p style = "max-width:100px; height:200px; border:1px solid red; padding:5px; margin:10px;"> This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px </p> <img alt = "logo" src = "/images/css.gif" width = "95" height = "84" /> </body> </html> |
خروجی به شکل زیر می باشد:
|
1 2 3 |
This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px logo |
ویژگی min-width
ویژگی min-width به شما امکان می دهد حداقل عرض یک جعبه را تعیین کنید. مقدار ویژگی عرض دقیقه می تواند یک عدد، یک طول یا یک درصد باشد.
توجه – این ویژگی نه در Netscape 7 و نه در IE 6 کار نمی کند.
در اینجا یک مثال آورده شده است –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Live Demo <html> <head> </head> <body> <p style = "min-width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;"> This paragraph is 100px high and min width is 400px This paragraph is 100px high and min width is 400px </p> <img alt = "logo" src = "/css/images/css.gif" width = "95" height = "84" /> </body> </html> |
خروجی به شکل زیر می باشد:
|
1 2 3 |
This paragraph is 100px high and min width is 400px This paragraph is 100px high and min width is 400px logo |
لیست جلسات قبل آموزش CSS
- آموزش CSS
- CSS چیست؟
- آموزش نحو CSS
- آموزش قوانین CSS
- آموزش واحد انداره گیری در CSS
- آموزش رنگ ها در CSS
- آموزش Background در CSS
- آموزش فونت ها در CSS
- آموزش استفاده از تصاویر در CSS
- آموزش استفاده از تصاویر در CSS
- آموزش استفاده از لینک ها در CSS
- آموزش جداول در CSS
- آموزش حاشیه در CSS
- آموزش margin در CSS
- آموزش لیست ها در CSS
- آمورش ویژگی padding در CSS
- آموزش ویژگی مکان نما در CSS
- آموزش outline در CSS
.svg)
دیدگاه شما