در دو جلسه ی قبل در مورد Margins و Padding در CSS صحبت کردیم و مثال هایی را برای شما مطرح کردیم. اگر هنوز جلسات قبل را مطالعه نکرده اید از طریق لینک های جلسه 8 و جلسه 9 به راحتی می توانید به این جلسات دسترسی داشته باشید. در این جلسه از سری جلسات آموزش CSS قصد داریم به Height و Width در CSS بپردازیم.
بریم ببینیم Height و Width چه هستند و چه کاربردی دارند؟
هر عنصری که در صفحه ی وب وجود دارد می تواند دارای مقادیری برای عرض و ارتفاع باشد. اگر برای این عنصر مورد نظر عرض و ارتفاعی به طور دستی و در CSS تعریف نشود, به اندازه ی محتوایی که درونش قرار دارد حجم خواهد گرفت. اما برای تنظیم این عرض و ارتفاع یا width و height چه باید کرد؟
در جلسات قبل گفتیم که قابلیت ظاهری تگ های HTML با استفاده از CSS در صفحات وب قابل تغییر و کنترل است.
یعنی برای تمامی تگ ها و بلاک ها و پاراگراف ها و… می توان رنگ پس زمینه, رنگ متن, میزان حاشیه ی داخلی و بیرونی و… که در جلسات قبل به آنها پرداختیم اختصاص داد.
قابلیت تغییر ارتفاع نیز یکی از این ویژگی هاست که در این جلسه قصد داریم به توضیح آن بپردازیم. در ابتدا لازم است بدانیم که مقادیر قابل قبول برای Height و Width یکی از مقادیر زیر می باشد؛
|
auto |
مرورگرها به صورت خودکار اندازه را تنظیم میکنند |
| length |
تنظیم اندازه با استفاده از واحدهای پیکسل و دیگر واحدها |
|
% |
تنظیم اندازه به صورت درصدی |
| initial |
تنظیم اندازه با مقادیر پیش فرض |
|
inherit |
تنظیم اندازه به تقلید از مقادیر والد |
در کنار خاصیت height که ارتفاع را مشخص می کند, خاصیت width برای تعیین عرض عنصر مورد نظر استفاده می شود.
مقادیری که می توان برای width در نظر گرفت نیز دقیقا مشابه خاصیت height است. به مثال زیر نگاه کنید؛
<html>
<head>
<title>Page title</title>
<style>
#my-paragraph {
width: 200;
height: 100px;
background-color: pink;
border: 2px solid red;
font-size: 17px;
} </style>
</head>
<body>
<p id=”my-paragraph“>
یک پارارگراف با عرض 200 پیکسل و ارتفاع 100 پیکسل با پس زمینه ی صورتی ایجاد می کند که دارای خط دور با ضخامت 2 پیکسل و رنگ قرمز است.
</p>
</body>
</html>
از این دو خاصیت برای حداقل و حداکثر عرض استفاده می شود. نحوه ی استفاده از آن ها را در ادامه با مثال توضیح می دهیم.
با این خاصیت کمترین و بیشترین عرض را مشخص می کنیم. در این صورت اگر مقدار width از مقدار min-width کمتر باشد مقدار width اعمال نمی شود. همین طور اگر مقداری برای max-width تعیین کنید width مقادیر بالاتر از max-width را نمی پذیرد. به عبارتی مقدار width در محدوده ی min-with و max-width قرار دارد.
#my-paragraph {
min-width: 350px;
width: 370px;
max-width: 400px;
background-color: pink;
border: 2px solid red;
font-size: 17px;
}
دو خاصیت height و width را می توان دو خاصیت اصلی در نظر گرفت که در کنار آنها از خاصیت هایی مانند min-height و max-height نیز میتوان استفاده کرد. اما این خاصیت ها چه هستند و چه کاربردی دارند؟
خاصیت min-height به معنی حداقل ارتفاع مد نظر است. یعنی با تنظیم این ویژگی مرورگر حداقل ارتفاع مد نظر را بدون در نظر گرفتن اندازه ی عنصر برای آن اعمال می کند. در مقابل max-height حداکثر ارتفاع موجود است. یعنی اگر میزان ارتفاع محتوا از بلاک مورد نظر بیشتر باشد, مرورگر ارتفاع را ثابت نگه می دارد. در این صورت ممکن است محتوا در بیرون از بلاک نشان داده شود. پس خاصیت overflow را به کار می بریم.
مثال؛
#my-paragraph {
max-height: 50px;
height: 70px;
width: 120px;
overflow: scroll;
background-color: pink;
border: 2px solid red;
font-size: 17px;
}
خاصیت max-height همیشه در کنار overflow مورد استفاده قرار می گیرد.در واقع overflow رفتار مرورگر را در صورتی که میزان ارتفاع محتوا از بلاک مورد نظر بیشتر باشد, تعیین می کند. مقادیر انتخابی برای overflow می تواند از جدول زیر انتخاب شوند؛
|
auto |
اگر محتوا بیشتر از مقدار ارتفاع تعیین شده باشد، بلاک اسکرول می شود. |
| hidden |
محتوای اضافه مخفی می شود. |
|
scroll |
نوار اسکرول ظاهر می شود. |
| visible |
بدون اینکه بلاک اسکرول شود، محتوا در بیرون از آن نشان داده می شود. |
همچنین دو خاصیت overflow-y و overflow-x برای مشخص کردن overflow در راستای عمودی و افقی تعریف می شوند که می توانید از آن ها استفاده کنید.
به عنوان مثال کد زیر فقط در راستای افقی حالت اسکرول را دارد و در راستای عمودی نوار اسکرول مخفی می باشد؛
.box {
overflow-y: hidden;
overflow-x: scroll;
}
#my-id{
min-height:200px;
height:auto;
background-image:url(‘images/tree-image’);
}
در این مثال حداقل ارتفاع 200 پیکسل است و با توجه به اینکه مقدار ارتفاع را auto قرار دادیم اگر ارتفاع محتوا از 200 پیکسل بیشتر باشد دیگر از محدوده ی مشخص شده بیرون نمی زند و ارتفاع به طور اتوماتیک افزایش پیدا می کند.
div#header {
height: 200px;
width: 100%;
background-color: green;
}
این مثال پس زمینه تگ div با آی دی header را سبز می کند و طول آن 200 پیکسل و عرض آن را صد در صد صفحه نمایش می کند.
p.test {
width: 100px;
overflow: auto;
border: 1px solid black;
height: 100px;
}
در این مثال طول و عرض 100 پیکسل مشخص شده است اگر خاصیت overflow: auto را قرار ندهیم متن از محدوده ی مشخص شده خارج می شود. به همین دلیل از این خاصیت استفاده می کنیم که باعث اسکرول متن می شود.
😊✌از بقیه ی جلسات آموزش CSS جا نمونید.✌😊
