آموزش CSSآموزش طراحی سایت

جلسه ۲۱ – طول و عرض در CSS

طول و عرض چیست و چیکار میکنه؟

منظور از طول در CSS چیست؟ منظور از عرض در CSS چیست؟ آیا تفاوتی بین طول و عرض HTML و طول و عرض CSS وجود دارد؟ در این مقاله می‌خواهیم در رابطه با height در CSS و Width در CSS صحبت کنیم.

طول و عرض در CSS

در CSS، هر عنصری ابعاد و اندازه های مختص به خودش رو داره.

همچنین راه های متفاوتی برای مشخص کردن این ابعاد وجود داره. برای مثال، ما می‌تونیم با استفاده از padding، ابعاد یک عنصر تا مرز های خودش رو مشخص کنیم.

اما در این مقاله، با راه مستقیم تری برای تنظیم ابعاد عناصر آشنا می‌شیم.

در اینجا ما به دو بحث می‌پردازیم:

  • خاصیت width و height چی هستن و چه کاربری دارن؟
  • مقادیر مورد قبول این خاصیت ها، بر حسب چه واحد هایی نوشته می‌شن؟

نحوه استفاده از Height و Width در CSS

استفاده کردن از خاصیت های width و height، می‌تونه به ما کنترل بیشتری برای تعریف کردن ابعاد برای عناصر عطا کنه.

به مثال زیر توجه کنید:

کد HTML:

<div>
   Mizfa content
</div>

کد CSS:

div{
   background-color: yellow;
   width:100px;
   height:100px;
}

نتیجه:

نمونه استفاده از طول و عرض در CSS
نمونه استفاده از طول و عرض در CSS

همونطور که می‌بینیم، عرض و طول div مورد نظر ما به ۱۰۰ پیکسل ختم شده. height و width نقش های بسیار حیاتی ای رو در وب سایت ما ایجاد می‌کنن. به خصوص زمانی که می‌خوایم از تصاویر استفاده کنیم.

نکته: طول و عرض برای متن ها تعریف نشده. ابعاد اون ها توسط خصوصیاتی نظیر font-size تعیین میشه.

مقادیر مورد قبول در height و width

حالا که با خاصیت width و خاصیت height آشنا شدیم، وقت آن است که با مقادیر مورد قبول این دو ویژگی آشنا شویم.

مقدار auto

مقدار auto، مقدار پیشفرض دو خاصیت width و height‌ هست.

در صورت اختصاص دادن این مقدار به این دو خاصیت، عرض و طول عنصر ما، متناسب با بزرگی محتوای داخلش تنظیم می‌شه.

در صورت عدم وجود محتوا در داخل عنصر، طول و عرض اون، صفر طلقی می‌شه.

مقدار های عددی

این مقدار ها، بر حسب عدد و واحد مختص به خودشون، تنظیم می‌شن.

واحد ها در CSS به دو گروه تقسیم می‌شن. یا وابسته هستن و یا مطلق.
واحد های وابسته، به اندازه و سایز عناصر دیگه بستگی دارن. واحد های مطلق، اینطور نیستن و  کاملا مستقلن.

حالا واحدهایی که تا الان یاد گرفتیم رو باهم بررسی کنیم.

پیکسل px
یک واحد مطلقه و به چیزی بستگی نداره، مثل سانتی متر و متر. طول و عرض رو بر حسب پیکسل مشخص می‌کنه. یعنی اگه عرض یک عنصر رو برابر ۲۰ پیکسل قرار بدیم، این عرض ثابت خواهد موند و به هیچ عنوان از ۲۰ پیکسل، بیشتر یا کمتر نخواهد شد.

نکته: خاصیت های width و height، نمی‌تونن مقدار منفی داشته باشن.

/*--- !اینطور چیزی نداریم ---*/
width: -30px;

درصد %
یک واحد وابستست. مقدار اون به اندازه عنصر پدر اون بستگی داره.

اگه عرض یک عنصر رو ۲۰٪ قرار بدیم به این معنیست که عرض عنصر مورد نظر، ۲۰ درصد عرض عنصر پدر خواهد بود.

بدین ترتیب، هر تغییری در عرض عنصر پدر، باعث تغییر در عرض عنصر مورد نظر ما می‌شه.

به مثال زیر توجه کنین:

کد HTML:

<div class="parent">
   <div class="child">
      Mizfa content
   </div>
</div>

کد CSS:

/*--- استایل عنصر پدر ---*/
.parent{
   width: 600px;
   background-color: yellow;
   height: 300px;
}
/*--- استایل عنصر فرزند ---*/
.child{
   width:30%;
   background-color: limegreen;
   height: 300px;
}

نتیجه:

نمونه ای از طول و عرض در CSS
نمونه ای از طول و عرض در CSS

به صورت دقیق تر، عرض عنصر پدر (عنصر زرد رنگ)، ۶۰۰ پیکسل و عرض عنصر فرزند (عنصر سبز رنگ)، ۳۰٪ عنصر پدره.

با یک محاسبه سر انگشتی، متوجه می‌شیم که عرض عنصر فرزند، ۱۸۰ پیکسل خواهد بود.

در صورتی که عرض عنصر پدر به ۵۰۰ پیکسل افت کنه، عنصر فرزند هم، با توجه به عرض وابسته خودش، به ۱۵۰ پیکسل افت خواهد کرد.

این موضوع، در مورد بیشتر شدن عرض عنصر پدر نیز صادقه.

اگه مثال مورد نظر، ابهام یا سوال خاصی براتون پیش میاره، تو قسمت نظرات پایگاه دانش میزفا حتما و حتما مطرح کنین. همیشه پاسخگو خواهم بود 🙂

نکته: خود صفحه وب ما، می‌تونه یک عنصر پدر برای عناصری که در تگ body می‌نویسیم به حساب بیاد.

لزوم استفاده از واحد درصد

چرا باید رو یاد گیری واحد درصد حساس باشیم؟

دلایل بسیاری می‌تونه داشته باشه. از نظر شخصی خودم، دو مسئله هست که کدنویسارو، چه حرفه ای و چه مبتدی، مجبور می‌کنه که بیشتر از % استفاده کنن، تا پیکسل.

  1. قابل تصور بودن ابعاد: زمانی که ما ابعاد یک عنصر رو برای مثال، برابر ۳۰۰پیکسل قرار می‌دیم، مطمئن نیستیم که چقدر از صفحه ما رو می‌پوشونه، چون معیاری برای اندازه گیری ۳۰۰ پیکسل وجود نداره و تمام اندازه گیری ها در خود سیستم ما اتفاق میفته. اما با استفاده از درصد، میتونیم بدونیم که ۳۰٪ میشه یک سوم عنصر پدر، یا با توجه به نکته ای که گفته شد، می‌تونیم به راحتی یک سوم صفحه وب سایت رو با درصد پوشش بدیم.
  2. واکنش گرا بودن صفحه: واکنش گرا بودن به معنای مناسب بودن صفحه وب ما برای تمامی صفحات مختلف نظیر انواع لپ تاب ها، تبلت ها و گوشی هاست. به عبارت ساده تر، وقتی صفحه رو بزرگ کوچیک می‌کنیم چیزی بهم نریزه. استفاده کردن از درصد، می‌تونه تاثیر بسیار زیادی رو واکنش گرا بودن صفحه ما بزاره. این بحث رو در مقاله های طراحی واکنش گرا در CSS به خوبی با هم یاد می‌گیریم.

پایان ترم

سوال:

ارتباط padding با width و height به چه شکله؟ آیا با وجود عرض و طول مشخص شده، می‌شه برای عنصر padding در نظر گرفت؟

به ایمیل کسانی که پاسخ درست و کامل در در نظرات بگن ۲ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه.

نتیجه گیری

در این مقاله از اموزش css ، یاد گرفتیم که چطور می‌تونیم توسط دو خاصیت width و height، طول و عرض تعریف کنیم.

همچنین، فهمیدیم که با چه واحد ها و روش هایی می‌تونیم این طول و عرض رو مشخص کنیم.

در نهایت، با اهمیت واحد درصد در تعیین طول و عرض آشنا شدیم و فایده های اون رو با هم یاد گرفتیم.

توجه داشته باشید که ما علاوه بر CSS ، در HTML نیز خاصیت های طول و عرض را داریم که می‌توانید مشخصات آن‌ها را در مقاله لیست همه Attribute ها در HTML مشاهده کنید.

در جلسه بعدی با نکات مهمی در ویژگی width در سی اس اس و ویژگی height در سی اس اس آشنا خواهیم شد.

اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.

مدیر محتوا: علی اسمعیلی

برچسب ها

نوید معدن نژاد

یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


حداکثر حجم فایل برای آپلود: 1 MB.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر