مقدمه
با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم به آموزش تنظیمات عرض و ارتفاع عناصر html در css ، بپردازیم. تنظیم کردن عرض (width) و ارتفاع (height) عناصر html، می تواند بطور مستقیم و بدون استفاده از css در داخل تگ های html اعمال شود. اما css اختیارات و جزئیات بیشتری را برای تنظیم کردن عرض (width) و ارتفاع (height) عناصر html ، در اختیار کاربران قرار می دهد.
در پست های قبلی، آموزش های کاربردی در مورد مباحث کار با فضای بین عناصر html در css و مدیریت فضای خالی داخل عناصر html در css در این سایت ارائه گردیده است.
همچنین پست آموزشی ساختار کد نویسی css را جهت آشنایی بهتر با css، برای کاربرانی که با css آشنایی کم تری دارند، قرار داده ایم. در این پست آموزشی نیز به بررسی چگونگی تنظیمات عرض و ارتفاع عناصر html در css، می پردازیم.
slide_28- تنظیمات عرض و ارتفاع عناصر html در css
تنظیمات عرض و ارتفاع عناصر html در css
نمونه ای از تعیین عرض و ارتفاع عناصر html در css:
مثال : نمونه ای از تعیین عرض و ارتفاع عناصر html
| <!DOCTYPE html> <html> <head> <style> div { width: 100%; border: 1px solid #4CAF50; } </style> </head> <body> <div>This element has a width of 100%.</div> </body> </html> |
ویژگی height و width در css ، برای تنظیم ارتفاع و عرض یک عنصر html بکار می رود. ارتفاع و عرض یک عنصر در css می تواند در حالت خودکار (auto) تنظیم شود. (این ویژگی پیش فرض است، به این معنا که مرورگر عرض و ارتفاع را محاسبه می کند) و همچنین می توانید اندازه ی عرض و ارتفاع را بر حسب واحد های px, cm, etc و یا بر حسب درصد (%) تعیین کنید.
مثال:
مثال : دو مقداردهی عرض و ارتفاع عناصر html
| div { height: 200px; width: 50%; background-color: powderblue; } |
همچنین می توانید مقدار width و height را با یک واحد px تعیین کنید:
مثال : استفاده از یک واحد در مقداردهی
| div { height: 100px; width: 500px; background-color: powderblue; } |
تنظمیات max-width
در css با استفاده از ویژگی max-width ، می توانید حداکثر اندازه عرض یک عنصر را تعیین کنید. مقدار این ویژگی نیز بر حسب واحد های px, cm, etc و یا بر حسب درصد (%) تعیین می گردد.
ویژگی max-width زمانی کارایی دارد که عرض پنجره مرورگر کوچکتر از عرض یک عنصر مانند <div> باشد. در این حالت مرورگر یک اسکرول افقی را به صفحه اضافه می کند. max-width وضعیت پنجره های کوچک مرورگر را بهبود می بخشد.
در مثال زیر یک تگ <div> با ارتفاع ۱۰۰ پیکسل و با max-width با مقدار ۵۰۰ پیکسل ، تعریف شده است.
مثال : ویژگی max-width
| div { max-width: 500px; height: 100px; background-color: powderblue; } |
تمام خصوصیات تنظیم ابعاد و اندازه ی عناصر در CSS
| خصوصیت | توضیحات |
|---|
| height | تنظیم ارتفاع یک عنصر HTML |
| max-height | تنظیم حداکثر ارتفاع یک عنصر HTML |
| max-width | تنظیم حداکثر عرض یک عنصر HTML |
| min-height | تنظیم حداقل ارتفاع یک عنصر HTML |
| min-width | تنظیم حداقل عرض یک عنصر HTML |
| width | تنظیم عرض یک عنصر HTML |
کلام آخر
عناصر HTML معمولا ویژگی های width و height (عرض و ارتفاع) را برای تنظیم ابعاد خود دارند، اما این ویژگی ها بسیار محدود است، با فراگیری نحوه ی تنظیمات عرض و ارتفاع عناصر html در css می توانید با دست بازتری ابعاد عناصر html را تنظیم کنید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
mohsen11astane
مرسی
MATIN GVR
برای من کار نمیکنه فقط جاشو جابجا میکنه چیکار کنم
نمیگم
بپر بالا بیا پایین