تماس با ما

موبایل: 2565 038 0912

دفتر تهران: 2565 2842 021

دفتر گرگان: 2565 3233 017


خاصیت هایی که تا این قسمت از آموزش مقدماتی css به آنها پرداختیم با دو ویژگی دیگر تکمیل می شوند که height و width نام دارند، همان طور که از عناوین آنها پیدا است، از این خاصیت ها برای تعیین میزان عرض و ارتفاع عناصر در صفحات وب استفاده می شود که می توانند بسته به هدف شما مقادیری اعم از پیکسل، درصد و... داشته باشند، در کنار این دو ویژگی اصلی، ویژگی های فرعی max-height ،max-width ،min-width و min-height نیز وجود دارند که ممکن است در استایل نویسی css و در برخی مواقع کاربردهایی داشته باشند، به هر صورت در ادامه آموزش در حد امکان به بررسی تفصیلی آنها خواهیم پرداخت.
خاصیت height در css
همان طور که پیش تر گفته ایم، قابلیت های ظاهری تگ های html در صفحات وب با استفاده از ویژگی های css قابل کنترل هستند، به طور مثال بلاک های div، پاراگراف ها یا تگ p، تگ span، تگ body و امثال آن می توانند بنا به نیاز شما ویژگی هایی مانند رنگ پس زمینه، رنگ متن، نوع متن، میزان حاشیه، خطوط و... را داشته باشند که تمام آنها با css قابل تنظیم است و پیش از این تا حدود زیادی به آنها اشاره کرده ایم، قابلیت کنترل ارتفاع یکی دیگر از مواردی است که می توان با css به آن دست یافت، خاصیتی که css برای این منظور در نظر گرفته است، ویژگی height است که با مقادیر پیکسلی، درصدی و... مقدار دهی می شود، در مثال زیر به صورت کاربردی با این عنصر آشنا می شویم.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>خاصیت height در css</title>
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.block{
    height:100px;
    border:1px solid #999;
    background-color:#FC0;
    margin:4px;
}
.main{
    height:200px;
    border:1px solid #999;
    background-color:#CCC;
    margin:4px;
    padding:4px;
}
.layer{
    height:50%;
    border:1px solid #999;
    background-color:#6CF;
}
#my-css{
    height:20em;
    border:1px solid #999;
    background-color:#6C6;
    margin:4px;    
}
</style>
</head>
<body>
<div class="block">
متن در کلاس block - مقدار دهی پیکسلی
</div>
<div class="main">
<div class="layer">
متن در کلاس layer - مقدار دهی درصدی
</div>
بلاک والد در کلاس main - مقدار دهی پیکسلی
</div>
<div id="my-css">
متن در آی دی my-css - مقداردهی با em
</div>
<hr />
در استایل نویسی کاربردی معمولا از مقدار دهی پیکسلی و برخی مواقع از مقدار دهی درصدی یا em استفاده می شود (به طور مثال برای طراحی قالب های سازگار با گوشی های تلفن همراه)؛ سایر موارد در امورات عادی کاربرد زیادی ندارند.
</body>
</html>

توضیح:

- کلاس ها و آی دی تعریف شده در کد بالا، فرضی و با عناوین انتخابی است.

- در استفاده از مقداردهی درصدی نیاز به وجود یک بلاک والد یا دربرگیرنده داریم، به این معنی که تنها عناصر زیر مجموعه (بلاک درونی) می توانند مقادیر درصدی داشته باشد که در واقع درصد از میزان ارتفاع بلاک اصلی حساب می شود، به طور مثال اگر بلاک اصلی 200 پیکسل ارتفاع داشته باشد، بلاکی که درون آن قرار گرفته با ارتفاع 25 درصد، معادل 50 پیکسل (25 درصد از 200 پیکسل) در حالت معمولی ارتفاع خواهد داشت.

در css برای مقدار دهی چند شیوه وجود دارد:

- تعیین مقادیر به پیکسل (picture element)، به فرض 6px، 2px و... (پیکسل ها مقادیری ثابت هستند)، از واحد px بیشتر برای نمایش محتوا در صفحه نمایش (مانیتور) استفاده می شود.

- تعیین مقادیر به Points، به فرض 1pt، 3pt و... (هر pt برابر 1/72 اینچ است)، از واحد pt بیشتر برای کارهای چاپی استفاده می شود.

- تعیین مقادیر به Ems، به فرض 1em، 0.5em و... (هر em برابر با 16 پیکسل و 12 pt است)، به دلیل قابلیت غیر ثابت و مقیاس پذیر (scalable)، این واحد در طراحی صفحات وب برای گوشی های تلفن همراه و دستگاه های مانند آن مناسب است.

- تعیین مقادیر به سانتی متر (CentiMeter)، به فرض 5cm ، 10cm و...، استفاده از این شیوه در وب، چندان مرسوم نیست.

- تعیین مقادیر به درصد (Percent)، به فرض %10 ، %50 و...، در این حالت اندازه بلاک با توجه به اندازه صفحه نمایش، مقادیری متغیر خواهد بود؛ این واحد نیز در طراحی صفحات وب برای گوشی های تلفن همراه و دستگاه های مانند آن مناسب است.

- تعیین مقادیر به صورت خودکار (auto) و حالت وراثتی (inherit) از بلاک والد.

خاصیت width در css

در کنار خاصیت height که ارتفاع عناصر را مشخص می کند، خاصیت width برای تنظیم عرض عناصر در صفحات وب تعریف شده است، بدین ترتیب با کمک css قابلیت تعیین ارتفاع و عرض برای تگ های html به راحتی فراهم می شود، این خاصیت نیز مانند height از مقادیر پیکسلی، درصدی و... تبعیت می کند که در مثال زیر با چند نمونه از آن آشنا می شویم.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> خاصیت width در css</title>
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.block{
    width:500px;
    height:100px;
    border:1px solid #999;
    background-color:#FC0;
    margin:4px;
}
.main{
    width:800px;
    height:200px;
    border:1px solid #999;
    background-color:#CCC;
    margin:4px;
    padding:4px;
}
.layer{
    width:50%;
    height:50%;
    border:1px solid #999;
    background-color:#6CF;
}
#my-css{
    width:50em;
    height:20em;
    border:1px solid #999;
    background-color:#6C6;
    margin:4px;    
}
</style>
</head>
<body>
<div class="block">
متن در کلاس block - مقدار دهی پیکسلی
</div>
<div class="main">
<div class="layer">
متن در کلاس layer - مقدار دهی درصدی
</div>
بلاک والد در کلاس main - مقدار دهی پیکسلی
</div>
<div id="my-css">
متن در آی دی my-css - مقداردهی با em
</div>
<hr />
علاوه بر بلاک های div، خاصیت های عرض و ارتفاع در css بر روی سایر تگ ها مانند جداول، پاراگراف ها، تصاویر و... نیز می توانند تاثیر گذار باشند.
</body>
</html>


توضیح:
- قواعد تعریف خاصیت width دقیقا مشابه با خاصیت height است.
- دقت کنید که در یک کلاس یا آی دی، می توان به فرض برای width آن از یک نوع مقدار دهی و برای height از نوعی دیگر استفاده کرد، به فرض برای عرض از مقدار دهی پیکسلی و برای ارتفاع از مقدار دهی درصدی استفاده کرد و از این لحاظ محدودیتی وجود ندارد.
خاصیت min-height و max-height
در کنار دو خاصیت اصلی height و width، از چند خاصیت زیر مجموعه نیز در این رابطه می توانیم استفاده کنیم، از جمله min-height و max-height، اما اول باید بدانیم که این دو ویژگی چه کاربردی دارند؟
به طور خلاصه min-height حداقل ارتفاع یک عنصر را مشخص می کند، به فرض در حالت پیش فرض مرورگرها هر بلاک را به اندازه محتوایی که در آن وجود دارد، ارتفاع می دهند، اما با تنظیم مقادیر min-height مرورگر حداقل مقادیر ارتفاع را (چه محتوا به اندازه کافی باشد و چه نباشد) برای آن بلاک در نظر می گیرد، اما max-height حداکثر ارتفاع یک عنصر را مشخص می کند، یعنی به فرض اگر میزان محتوا از ارتفاع یک بلاک بیشتر باشد، مرورگر ارتفاع را همچنان ثابت نگه می دارد و ممکن است محتوا در خارج از بلاک نشان داده شود یا اینکه آن بلاک اسکرول گردد، البته این ویژگی معمولا در کنار خاصیت overflow استفاده می شود، overflow رفتار مرورگر در حالتی که محتوا از میزان ارتفاع یک بلاک بیشتر است را تعیین می کند که خود چند مقدار می پذیرد:
- auto، اگر محتوا بیشتر باشد، بلاک اسکرول می شود.
- hidden، محتوای اضافه مخفی می شود.
- scroll، نوار اسکرول ظاهر می شود.
- visible، بدون اینکه بلاک اسکرول شود، محتوا در بیرون از آن نشان داده می شود.
مثال:


#my-id{
    max-height:50px;
    overflow:scroll;    
}

یا


#my-id{
    min-height:200px;
    height:auto;    
}


خاصیت max-width و min-width

کارکرد خاصیت max-width و min-width در قریب به اتفاق موارد مشابه min-height و max-height است که در بالا اشاره شد، با این تفاوت که در اینجا خاصیت بر روی عرض عناصر html تاثیر می گذارد و از این گذشته مقادیر overflow برای width کاربردی ندارد.
مثال:

#my-id{
    max-width:50px;
    max-height:50px;
    overflow:scroll;    
}

یا


#my-id{
    min-width:300px;
    width:auto;    
}


سفارش طراحی سایت

سفارش طراحی سایت

google
yahoo
alexa
ebook
Baidu.com
Wikipedia
Blogger.com
Windows Live
Amazon.com
eBay
Bing
Ask
استانداری گلستان
f shdj, sefaresh, sefaresh .net, sefaresh.net, sthva, sthva nhj kj, sthva.kj, stthva.kj, xvhpd, آیفون, استفاده, اندروید, اپل, اپلیکیشن, اینترنت, باتری, بازار, خواهد, دستگاه, دوربین, سامسونگ, سفارش, سفارش دات نت, سفارش دات نت sefaresh.net, سفارش.نت, سیستم, طراح وب, طراحي وب سايت, طراحی, طراحی وب سایت, فناوری, مایکروسافت, موبایل, هوشمند, کاربران, کمپانی, گلکسی, گوشی, گوشی هوشمند, گوگل

نمایش تمامی تگ ها
بسته ویژه مدارس مدارس
بسته ویژه پزشکان پزشکان
بسته ویژه مهندسین مهندسین