جلسه 12 آموزش CSS: ویژگی width و height در CSS
سلام رفیق 👋 به جلسه دوازدهم آموزش CSS رایا وردپرس خوش اومدی😊 خیلی خوشحالم که میبینم جلسات رو به خوبی دنبال میکنی و میخای چیزای جدید یاد بگیری، همینطوری به یادگیری ادامه بده و هیچ وقت کم نیار!!!
امروز قراره ، درباره ویژگی width و height حسابی باهم حرف بزنیم. این دو تا ویژگی تو دنیای CSS بهت کمک می‌کنن اندازه عناصرت رو دقیقاً همون‌جوری که می‌خوای تنظیم کنی. در ادامه کامل برات توضیح میدم همه چیو، نگران هیچی نباش و منو با چشمای زیبات تا پایان این مقاله همراهی کن 🙂
چرا ویژگی width و height مهمن؟ 🤔
تصور کن داری یه خونه می‌سازی. اگه ندونی دیوارها و پنجره‌ها چه اندازه‌ای باید باشن، خونه‌ات یا زیادی بزرگ میشه یا زیادی کوچیک! 😅 تو دنیای وب هم همین‌جوریه. ویژگی width (عرض) و height (ارتفاع) بهت کمک می‌کنن تا اندازه هر عنصر رو درست مثل یه معمار حرفه‌ای تنظیم کنی. این ویژگی‌ها نه‌تنها برای زیبایی صفحه‌ات مهمن، بلکه باعث می‌شن کاربرا موقع گشت‌وگذار تو سایتت حس خوبی داشته باشن.
جلسه 19 آموزش CSS: جدول (Table) در CSS
📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD
🧐 ویژگی width در CSS چیه؟
خب، بریم سراغ ستاره امروز، یعنی ویژگی width! این ویژگی مشخص می‌کنه که عرض یه عنصر چقدر باشه. می‌تونی بهش یه عدد ثابت بدی (مثلاً پیکسل) یا از درصد و واحدهای نسبی مثل vw (ویوپورت ویدث) استفاده کنی. حالا بیا یه کم دقیق‌تر بشیم:
- کاربردش چیه؟ با ویژگی width می‌تونی عرض هر چیزی تو صفحه‌ات، از یه دکمه کوچولو تا یه div بزرگ، رو تنظیم کنی.
- چطور ازش استفاده کنم؟ به این شکل:
در مثال بالا عرض المان رو 300 پیکسل در نظر گرفتیم 🙂
🔻انواع مقادیر برای ویژگی width
ویژگی width می‌تونه مقدارهای مختلفی بگیره تا عرض یه عنصر رو توی صفحه‌ت تنظیم کنه. بیا ببینیم هر کدومشون چی هستن و چطوری کار می‌کنن:
جلسه 13 آموزش CSS: باکس مدل (Box Model) در CSS
- پیکسل (px): این مثل این می‌مونه که با یه خط‌کش خیلی دقیق اندازه بگیری. وقتی می‌گی
width: 200px;یعنی دقیقا می‌خوای عرض اون عنصر ۲۰۰ تا از اون نقطه‌های کوچولوی صفحه (پیکسل) باشه. این مقدار ثابته و به بقیه چیزای صفحه کاری نداره. - درصد (%): تصور کن یه پیتزا داری که چند تا تیکه شده. وقتی می‌گی
width: 50%;یعنی می‌خوای عرض اون عنصر نصف عرض ظرف پیتزا (عنصر والدش) رو بگیره. این مقدار اندازه‌ش بستگی به این داره که عنصر بالایی‌ش چقدر فضا داشته باشه. خیلی خوبه برای وقتی که می‌خوای یه چیزی نصف صفحه رو بگیره یا با تغییر اندازه صفحه، اندازه‌ش هم تغییر کنه. - em و rem: اینا یکم پیچیده‌ترن ولی باحالن!
emعرض رو نسبت به اندازه فونت همون عنصر در نظر می‌گیره، وremعرض رو نسبت به اندازه فونت عنصر اصلی صفحه (<html>) حساب می‌کنه. - auto: ⚙️ این حالت پیش‌فرض بیشتر جاهاست. وقتی عرض یه عنصر روی
autoتنظیم شده باشه، یعنی می‌گیم: “هر چقدر فضا داری، همشو بگیر!” معمولا عناصر بلاکی مثل<div>و<p>کل عرض موجود رو اشغال می‌کنن وقتیwidthشونautoباشه. - vw: 📱 این یکی خیلی باحاله و مخصوص اندازه‌های صفحه نمایشه!
vwمخفف “viewport width” هست. وقتی می‌گیwidth: 100vw;یعنی می‌خوای عرض اون عنصر دقیقا به اندازه کل عرض پنجره مرورگر باشه، مهم نیست چقدر بزرگ یا کوچیک باشه. تصور کن یه بنر داری که می‌خوای کل عرض صفحه رو بگیره،vwبهترین دوستته! مثلاwidth: 50vw;یعنی نصف عرض صفحه نمایش. خیلی خوبه برای طراحی‌های واکنش‌گرا که می‌خوای عناصرت با اندازه‌های مختلف صفحه نمایش خودکار تنظیم بشن.
ببین رفیق، هر کدوم از این مقادیر برای یه جور موقعیت خاص به کارت میان. بستگی داره تو چی می‌خوای و چه شکلی دوست داری عناصر صفحه‌ت نمایش داده بشن. با تمرین و امتحان کردن، قشنگ دستت میاد که کی از کدوم مقدار استفاده کنی! 💪
🧐ویژگی height در CSS چیه؟
حالا که با ویژگی width آشنا شدی، بذار بریم سراغ height. این ویژگی همونطور که از اسمش پیداست، ارتفاع یه عنصر رو مشخص می‌کنه. مثل width، می‌تونی براش مقدار ثابت (مثل پیکسل) یا نسبی (مثل درصد یا vh) بذاری.
- چطور ازش استفاده کنم؟ به این شکل:
🔻انواع مقادیر برای ویژگی height
همونطور که بالاتر برای عرض (width) گفتم، برای ارتفاع هم می‌تونی از مقدارهای مختلفی استفاده کنی تا قد و قواره‌ی عناصرت رو توی صفحه تنظیم کنی. بیا با هم ببینیم این مقدارها چی هستن:
- پیکسل (px): دقیقا مثل عرض، پیکسل برای ارتفاع هم یه واحد اندازه‌گیری ثابته. وقتی می‌گی
height: 150px;یعنی ارتفاع اون عنصر دقیقا ۱۵۰ تا از اون نقطه‌های کوچولوی صفحه باشه. این مقدار فیکس می‌مونه و به بقیه عناصر کاری نداره. - درصد (%): این مقدارم مثل عرض کار می‌کنه، ولی برای ارتفاع. وقتی می‌گی
height: 75%;یعنی ارتفاع اون عنصر ۷۵ درصد ارتفاع ظرفش (عنصر والدش) رو بگیره. یه نکته‌ی مهم اینجا هست: برخلاف عرض که معمولا عنصر والدش ارتفاع مشخصی نداره، اگه بخوای از درصد برای ارتفاع استفاده کنی، معمولا باید ارتفاع عنصر والد رو هم یه جورایی مشخص کرده باشی (مثلا با پیکسل). وگرنه ممکنه اون چیزی که می‌خوای نشه. تصور کن یه لیوان داری و می‌خوای ارتفاع مایع داخلش نصف ارتفاع لیوان باشه. اول باید ارتفاع خود لیوان مشخص باشه دیگه! 😉 - em و rem: این واحدها برای ارتفاع هم کار می‌کنن و نسبی هستن.
emارتفاع رو نسبت به اندازه فونت همون عنصر در نظر می‌گیره، وremارتفاع رو نسبت به اندازه فونت عنصر اصلی صفحه (<html>) حساب می‌کنه 😊 - auto: این مقدار پیش‌فرض برای ارتفاعه. وقتی ارتفاع یه عنصر روی
autoتنظیم شده باشه، یعنی می‌گیم: “خودت ارتفاعتو بر اساس محتوایی که داری تنظیم کن!” مثلا اگه یه عالمه متن توی یه<div>باشه، ارتفاعش خودکار به اندازه‌ای میشه که همه‌ی متن رو نشون بده. - vh: این یکی هم مثل
vwمخصوص ارتفاع صفحه نمایشه!vhمخفف “viewport height” هست. وقتی می‌گیheight: 100vh;یعنی می‌خوای ارتفاع اون عنصر دقیقا به اندازه کل ارتفاع پنجره مرورگر باشه، چه بزرگ باشه چه کوچیک. تصور کن می‌خوای یه پس‌زمینه داشته باشی که کل صفحه رو بپوشونه،vhبه کارت میاد! مثلاheight: 50vh;یعنی نصف ارتفاع صفحه نمایش. اینم برای طراحی‌های واکنش‌گرا خیلی مفیده.
پس دیدی که برای ارتفاع هم کلی گزینه داری؟ بستگی داره به این که چه شکلی می‌خوای عناصرت توی صفحه قرار بگیرن و چه رفتاری داشته باشن. بازم می‌گم، بهترین راه برای یادگیری اینا اینه که خودت دست به کار بشی و باهاشون کار کنی!
جلسه 7 آموزش CSS: کار با رنگ ها (colors) در CSS
جمع بندی و حرف آخر 👋
خب دوست من، دیدی که کار با ویژگی‌های width و height توی CSS چقدر ساده و در عین حال مهمه؟ با استفاده از این دو تا ویژگی می‌تونی کنترل کاملی روی اندازه عناصر صفحه‌ت داشته باشی و دقیقا همون شکلی که توی ذهنت هست رو پیاده‌سازی کنی. یادت باشه که به تفاوت بین عناصر بلاکی و اینلاین و نحوه تاثیر این ویژگی‌ها روشون هم توجه کنی.
امیدوارم این جلسه برات مفید بوده باشه. اگه سوالی داشتی حتما بپرس. تا جلسه بعدی که می‌خوایم در مورد یه موضوع جذاب دیگه توی CSS صحبت کنیم، فعلا خداحافظ! 😉💖
ارسال نظر ( 0 نظر تایید شده )