مقدار ها و واحد ها در CSS – بخش دوم، مقادیر درصدی و فانکشن ها
در بخش قبل، دیدیم که انواع مختلفی از مقدار ها در CSS وجود دارد، که شامل مقادیر عددی و موارد دیگر است. و همچنین به مقادیر طول، رنگ، و … پرداختیم، همچنین تعدادی از واحد هایی که کمتر رایج هستند مانند درجه ها و مقادیر عددی بدون واحد را نیز بررسی کردیم. در این بخش از مقاله، به درصد ها و فانکشن های مربوط به مقادیر CSS خواهیم پرداخت.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)
درصد ها در مقادیر CSS
در کد های CSS همچنین می توانید مقادیر درصدی را نیز برای مشخص کردن بیشتر مواردی که با مقادیر عددی مشخص می شوند، استفاده کنید. این حالت به ما اجازه می دهد که برای مثال، باکس هایی را ایجاد کنیم که عرض آن ها همیشه به اندازه ی درصد مشخصی از عرض باکس اصلی آن ها است. این حالت را می توان با باکس هایی مقایسه کرد که پهنای آن ها را به اندازه ی یک مقدار معینی از مقدار واحد (مانند px یا em) تنظیم می شوند، و همیشه همان مقدار را حفظ می کنند، حتی اگر عرض باکس اصلی آن ها تغییر کند.
آموزش پیشنهادی برای شما : آموزش کامل CSS و CSS3
بیایید یک نمونه برای توضیح این مسئله ببینیم.
ابتدا دو باکس مشابه در HTML مشخص شده اند:
|
1 2 3 4 5 6 7 |
<div> <div class="boxes">Fixed width layout with pixels</div> <div class="boxes">Liquid layout with percentages</div> </div> |
و اکنون کدهای CSS که برای استایل این باکس لازم است:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
div .boxes { margin: 10px; font-size: 200%; color: white; height: 150px; border: 2px solid black; } .boxes:nth-child(1) { background-color: red; width: 650px; } .boxes:nth-child(2) { background-color: blue; width: 75%; } |
و نتیجه ی کار به این صورت است:
در اینجا ما دو divs، حاشیه، ارتفاع، اندازه ی فونت، کادر و رنگ داریم. سپس به اولین و دومین div، دو رنگ پس زمینه ی مختلف دادیم تا بتوانیم به راحتی آنها را از هم جدا کنیم. همچنین عرض اولین div را به ۶۵۰ پیکسل تنظیم می کنیم و عرض div دوم را به اندازه ی ۷۵٪ تنظیم می کنیم. اثر این کار، است که اولین div همواره دارای عرض ثابت است، حتی اگر اندازه ی پورت نمایش تغییر کند (زمانی که پورت نمایش باریک تر از صفحه نمایش شود، ناپدید می شود)، در حالی که عرض div دوم تغییر می کند؛ به طوری که زمانی که اندازه ی پورت نمایشگر تغییر می کند، عرض div دوم به اندازه ی ۷۵٪ از عرض باکس اصلی آن است. در این مورد، باکس اصلی که همان عنصر <body> است که به طور پیش فرض به اندازه ی ۱۰۰٪ از عرض پورت نمایش / viewport است.
توجه: می توانید این اثر را در عمل، با تغییر اندازه ی پنجره مرورگر ببینید.
در این مثال، اندازه ی فونت را نیز بر اساس مقدار درصد تعیین کردیم: ۲۰۰٪. این حالت، کمی متفاوت از چیزی است که شما ممکن است انتظار داشته باشید، اما منطقی است؛ معنی آن چیست؟ در این حالت، این اندازه ی جدید، نسبت به اندازه ی فونت والدین است، که با EM داده شده است. در این مورد، اندازه ی فونت والدین ۱۶ پیکسل است که پیش فرض صفحه نیز هست؛ بنابراین مقدار محاسبه شده از ۲۰۰٪ برابر با ۳۲ پیکسل خواهد بود. این حالت در واقع به نحوی بسیار شبیه به em کار می کند – ۲۰۰٪ اساسا معادل ۲em است.
این دو نوع متفاوت طرح بندی باکس ها، اغلب به عنوان طرح “مایع” (تغییرات بر اساس تغییر اندازه ی پورت نمایش مرورگر تغییر می کند) و طرح عرض ثابت (بدون در نظر گرفتن شرایط، ثابت باقی می ماند.) هر دو حالت، استفاده ی متفاوتی در CSS دارند، به عنوان مثال:
- یک طرح مایع در CSS می تواند در حالتی مورد استفاده قرار گیرد تا اطمینان حاصل شود که نمایش یک سند استاندارد، همیشه بر روی صفحه ی نمایشگر، متناسب خواهد بود و در مورد اندازه ی صفحه نمایش های مختلف و تلفن همراه نیز مناسب است.
- طرح با عرض ثابت در CSS، برای نمایش یک نقشه ی آنلاین در اندازه ی ثابت استفاده می شود. صفحه ی نمایش مرورگر می تواند در اطراف نقشه حرکت / scroll کند، و فقط یک مقدار معینی از آن، در یک زمان قابل مشاهده است. مقداری از نقشه که می توانید در یک زمان مشاهده کنید، بستگی به اندازه ی نمایشگرتان دارد.
یادگیری فعال: بازی با طول ها در CSS
برای این یادگیری فعال، هیچ پاسخ درستی وجود ندارد. فقط به سادگی می خواهیم که با عرض ها و ارتفاع ها بازی کنید. Divهای inner و outer را ببینید که تا چه میزان می توانند مقدار های مختلفی داشته باشند. یک مقدار درصدی را برای .inner امتحان کنید و ببینید که چگونه با تغییر عرضouter تنظیم می شود. همچنین برخی از مقادیر ثابت مانند پیکسل ها و em را نیز امتحان کنید.
اگر اشتباه کردید، همیشه می توانید آن را با استفاده از دکمه ی بازنشانی مجددا تنظیم کنید.
توابع در CSS
در برنامه نویسی، یک تابع، بخشی از کد با قابلیت استفاده مجدد است که می تواند چندین بار اجرا شود و یک کار تکراری را با حداقل تلاش از جانب توسعه دهنده و رایانه انجام دهد. توابع معمولا با زبان هایی مانند جاوا اسکریپت، پایتون یا سی ++ همراه هستند، اما در CSS نیز به عنوان مقادیر صفت / property وجود دارند. توابع CSS را در عمل در قسمت رنگ ها Colors با rgb ()،() hsl و غیره استفاده خواهیم کرد. (برای اطلاعات بیشتر در مورد رنگ ها، بخش سوم این مقاله را در این جا را ببینید)
|
1 2 3 |
background-color: rgba(255,0,0,0.5); background-color: hsla(240,100%,50%,0.5); |
این توابع، محاسبه ی رنگ مورد استفاده در CSS را انجام می دهند.
اما توابع CSS را در جا های دیگری نیز مشاهده می کنید؛ هر زمان که در CSS یک نام را با یک پرانتز بعد از آن، حاوی یک یا چند مقدار جدا شده با کاما، می بینید، شما با یک تابع برخورد کرده اید. مثلا:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/* calculate the new position of an element after it has been rotated by 45 degress */ transform: rotate(45deg); /* calculate the new position of an element after it has been moved across 50px and down 60px */ transform: translate(50px, 60px); /* calculate the computed value of 90% of the current width minus 15px */ width: calc(90% - 15px); /* fetch an image from the network to be used as a background image */ background-image: url('myimage.png'); /* create a gradient and use it as a background image */ background-image: linear-gradient(to left, teal, aquamarine); |
یکی از رایج ترین توابع CSS، تابع() url است که یک فایل را باز می گرداند. چندین تابع تصویر، از جمله توابعی که برای ایجاد گرادیان / gradients خطی، شعاعی و مخروطی استفاده می شوند، در CSS وجود دارند.
امیدواریم که تا این مرحله، در مورد مقدار ها و واحدهای CSS مطالب مفیدی را آموخته باشید. در بخش بعدی مقاله ی مقدار ها و واحد های CSS، به طور ویژه به مقادیر رنگ ها خواهیم پرداخت.
